Confused About Pre-Loading PNG Image Sprites...

[JeZxLee]

Hi,

Making good progress with our new PixiJSv4 Internet game.

I am confused about pre-loading PNG image sprites.

I loaded the open-source demo on the tutorial page and have been modifying it to my own needs.

The following code confuses me:

	function setup()
	{
        //Make the game scene and add it to the stage
        gameScene = new Container();
        stage.addChild(gameScene);
		
        //Make the sprites and add them to the `gameScene`
        //Create an alias for the texture atlas frame ids
        id = resources["images/treasureHunter.json"].textures;
		
        //Dungeon
        dungeon = new Sprite(id["dungeon.png"]);
        gameScene.addChild(dungeon);
		
        //Door
        door = new Sprite(id["door.png"]);
        door.position.set(32, 0);
        gameScene.addChild(door);
		
        //Explorer
        explorer = new Sprite(id["explorer.png"]);
        explorer.x = 68;
        explorer.y = gameScene.height / 2 - explorer.height / 2;
        explorer.vx = 0;
        explorer.vy = 0;
        gameScene.addChild(explorer);

        //Treasure
        treasure = new Sprite(id["treasure.png"]);
        treasure.x = gameScene.width - treasure.width - 48;
        treasure.y = gameScene.height / 2 - treasure.height / 2;
        gameScene.addChild(treasure);

What is: "id = resources["images/treasureHunter.json"].textures;" ?

I plan to have all PNG image sprites in a sub folder called "images".

Any help would be appreciated, thanks!

JeZxLee

[bubamara]

it comes from PIXI.loader : http://pixijs.download/dev/docs/PIXI.loaders.Loader.html

PIXI.loader
    .add("images/treasureHunter.json")
    .load(setup);

function setup(loader, resources)
{
	var id = resources["images/treasureHunter.json"].textures;
	
	// object with generated textures (dungeon.png, door.png, ..)
	console.log(id);
}