Rendering tiled map

[kovalson]

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?

[ivan.popelyshev]

you have to create new texture for every possible tile, then share same texture between tiles of the same type:

texture = new PIXI.Texture(loader.resources["tileset"].texture, new PIXI.Rectangle(tx, ty, tw, th));

Don't worry, PIXI.Texture is only stores coordinates. "texture.baseTexture" is the real thing, and its shared between them.

Also, for tilemap you can use https://github.com/pixijs/pixi-tilemap instead of sprites.

[kovalson]

That works just fine!
Thank you very much both for solution and for fast reply.