How to preload images using filenames from a .txt file

Hi I am currently working on a game project where I use a txt file that contains the sprite for an object, the object name, and some properties based on the object (ex: player.png, player, player's health). While the first two parts are not a problem to get working into the game, I cannot load the sprites due to only being able to run preload once which is spent on LoadStrings and so I cannot also load the images due to not being able to read the strings. Is there a way to force preload to wait until the LoadStrings function is done so that I can load the images that the txt file indicates?

Code Sample:

    funtion preload(){
      mainFile = loadStrings("assets/MainFile.txt"); //load the text file
      //need it to wait here until loading strings finishes
      for (var i = 3; i < mainFile.length; i++) {
        var newCharacterStr = splitTokens(mainFile[i], ",");
        var newImage = loadImage(newCharacterStr[0]);
      }
    }

MainFile.txt:

player.png,player,5

Answers

  • edited September 2016

    preload()? Is this about p5.js? If so, please click "Edit" and change the category accordingly!

    Also you should post a sample of both your code and ".txt" file.

  • Your code sample says funtion preload(). I'm guessing that should be function preload() and that you should be getting warnings about that...? If you don't fix it, nothing else will work.

  • edited September 2018

    Disclaimer: Given your "MainFile.txt" is actually a ".csv" file type, my sketch version is using loadTable() in place of loadStrings():

    1. http://p5js.org/reference/#/p5/loadTable
    2. http://p5js.org/reference/#/p5/loadStrings

    Obviously you can stay on loadStrings(). It works as well; as long as you modify the code to deal w/ the returning loaded object's String[] instead of p5.Table:

    1. http://p5js.org/reference/#/p5.Table
    2. http://p5js.org/reference/#/p5.TableRow

    Also, I've changed the loaded FILENAME to "players.csv". :\">


    Both loadStrings() & loadTable() (and all the other p5.js' IO API functions) got a success parameter where we pass a function callback; which in turn is invoked when the loading is completed.

    The interesting thing is that we can use it even inside preload()!
    My solution is about chaining the loadImage() w/ the loadTable()'s success parameter callback. *-:)

    Apparently the sketch continues to block the execution until all images are loaded! \m/

    Once the execution reaches setup(), console.log(players.length, entries); displays 10 10. It means players.length got the same number of loaded entries; that is, table.getRowCount();.

    I guess if it wasn't delaying, it'd display players.length w/ a lower count than entries, right? =P~
    Or maybe not! It may happen those p5.Image objects haven't finished loading completely. :-SS

    Here's the "players.csv" file. You can grab it at https://ThimbleProjects.org/gotoloop/96556/players.csv:

    https://upload.Wikimedia.org/wikipedia/en/thumb/9/93/Tanooki_Mario.jpg/88px-Tanooki_Mario.jpg,Mario,100
    https://upload.Wikimedia.org/wikipedia/en/f/f4/Sonic_modern_and_classic_designs.png,Sonic,120
    https://upload.Wikimedia.org/wikipedia/en/1/1a/Miles_%22Tails%22_Prower_Sonic_and_All-Stars_Racing_Transformed.png,Tails,40
    https://upload.Wikimedia.org/wikipedia/en/thumb/e/e5/Ryu_TvC.png/75px-Ryu_TvC.png,Ryu,550
    https://upload.Wikimedia.org/wikipedia/en/thumb/a/a4/Super_Blanka.png/73px-Super_Blanka.png,Blanka,770
    https://upload.Wikimedia.org/wikipedia/en/thumb/7/70/Super_Zangief.png/58px-Super_Zangief.png,Zangief,1200
    https://upload.Wikimedia.org/wikipedia/en/thumb/b/be/KyoKusanagi95.jpg/42px-KyoKusanagi95.jpg,Kyo Kusanagi,430
    https://upload.Wikimedia.org/wikipedia/en/thumb/1/1b/IoriYagamiXI.png/38px-IoriYagamiXI.png,Iori Yagami,470
    https://upload.Wikimedia.org/wikipedia/en/thumb/a/a1/Kim_Kaphwan.png/38px-Kim_Kaphwan.png,Kim Kaphwan,595
    https://upload.Wikimedia.org/wikipedia/en/thumb/3/33/Terry_Bogard-HW.jpg/55px-Terry_Bogard-HW.jpg,Terry Bogard,620
    

    Also the "index.html" minimum template file:

    <script async src=https://cdn.JsDelivr.net/npm/p5></script>
    <script defer src=sketch.js></script>
    

    And finally the "sketch.js" file. You can watch it online at the link below: :-bd
    https://ThimbleProjects.org/gotoloop/96556/

    /**
     * Preload Images from CSV (v1.0.4)
     * GoToLoop (2016-Sep-03)
     *
     * Forum.Processing.org/two/discussion/18043/
     * how-to-preload-images-using-filenames-from-a-txt-file#Item_3
     *
     * ThimbleProjects.org/gotoloop/96556
     * ThimbleProjects.org/gotoloop/96556/sketch.js
     * ThimbleProjects.org/gotoloop/96556/players.csv
     */
    
    "use strict";
    
    const FILENAME = 'players.csv', players = [];
    let entries, bg;
    
    function preload() {
      loadTable(FILENAME, createPlayers);
    }
    
    function setup() {
      console.log(players.length, entries);
      console.table(players);
    
      for (const {name: n, hp, img: {width: w, height: h}} of players)
        console.info(`${n}: hp: ${hp} res: ${w}x${h}`);
    
      createCanvas(250, 150);
      noLoop();
    
      fill('yellow').noStroke();
      textSize(40).textAlign(CENTER, CENTER).textStyle(BOLD);
    
      bg = color(0);
    }
    
    function draw() {
      background(bg);
      text(`${players.length}/${entries}`, width>>1, height>>1);
    }
    
    function createPlayers(table) {
      players.length = 0, entries = table.getRowCount();
    
      for (const r of table.getRows())  players.push(
        new Player(loadImage(r.getString(0)), r.getString(1), r.getNum(2))
      );
    }
    
    class Player {
      constructor(img, name, hp) {
        this.img = img, this.name = name, this.hp = hp;
      }
    }
    
  • I solved the problem on my own. While I appreciate the attempt to help, please don't make assumptions that other filetypes would work better for what I'm doing.

    Since my only problem was the sprite not being able to preload due to how preload works I didn't feel it necessary to mention the other parts of the txt file I have that work perfectly fine and do not work well at all when introduced through a csv format.

  • edited September 2016

    ... please don't make assumptions that other file types would work better for what I'm doing.

    If I stopped doing such, not more than 10% folks here I would be able to help out at all! [-(

    And I was very clear that you'd be able to keep using loadStrings() instead of loadTable() w/ small modifications. :-@

    It'd be nice if you explained how you had solved it by yourself; so others can learn too. O:-)

Sign In or Register to comment.