Jump to content

Rendering tiled map


Recommended Posts

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?

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...