How to preload images using filenames from a .txt file

Hokk

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

GoToLoop

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.

jeremydouglass

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.

GoToLoop

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;
  }
}

Hokk

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.

GoToLoop

... 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:-)