Hi there.
I'm new to PIXI.js - started few days ago by reading whole step-by-step guide on the official github.
Basically I tried to render my tiled map and got stuck.
To specify my problem:
I've got an image "tileset.png" that stores tiles (each 32x32 pixels, the whole image is 128x32 which probably doesn't matter).
I've got an JSON file that stores information about each tile (coordinates where to take each tile from - x, y, width, height, and also some other properties).
I've got a regular two-dimensional array that simulates the map. For example:
var map =
[
[2, 2, 2, 2, 2, 2],
[2, 0, 0, 0, 0, 2],
[2, 0, 0, 0, 0, 2],
[2, 0, 0, 0, 0, 2],
[2, 0, 0, 0, 0, 2],
[2, 0, 0, 0, 0, 2],
[2, 2, 2, 2, 2, 2],
];
I'll skip the init and assignments.
Now I consider the main problem to be my approach (which I also consider very convenient and easy) - in a double "for" loop I read the map array and I add each tile to the stage. The code for that looks something like this:
var texture = loader.resources["tileset"].texture;
var s;
for rows
for cols
// I frame the texture to get the tile I'm interested in
// for example air (x: 0, y: 0) or the ground (x: 64, y: 0)
texture.frame = new PIXI.Rectangle( 64, 0, 32, 32 );
// create sprite out of the framed texture
s = new PIXI.Sprite( texture );
// add the sprite to the stage
stage.addChild( s );
// Anakin vs Luke
texture.frame = new PIXI.Rectangle( 32, 0, 32, 32 );
Now the struggle begins under "Anakin vs Luke" comment. The line is there just for explanations. It basically affects EVERY sprite in the stage. The result is that EVERY tile in the stage has the same sprite as the last tile. I get that it's caused by the sprites having all the same reference to the texture (which then I change, by framing, and affect them all in result). I also get that it's most likely an invalid approach. Here come the questions:
1. Is this approach any near to any solution to render the map? I want the map to be rendered using ONLY one image with my array and my json file.
2. If not, can it be easily done without any other libraries?
