Using tileset with json

[RayIT]

I created a map/level in JSON with "tiled map editor" which uses a tileset. Fot the JSON file look in the attachment.

Now in code loop through the JSON and try to create the level/map.
Problem is that it renders the same tile and not the different ones.
If I run per layer it's ok (l=1, l<2), If I add the layer loop it renders with only 1 tile...(see attached image, there should be different walls)

I tried several things. 
It looks like pixi does create all sprites with same tile?

Many thanks

Raymond

 // load json
var level = require('../map/level1.json');
var tileHeight = level.tileheight;
var tileWidth = level.tilewidth;
var layers = level.layers;
var height = level.height;
var width = level.width;
var tileset = PIXI.utils.TextureCache["./images/terrain.png"];

        for(var l = 1; l < 5; l++ )
         {

            // Layer
            var data = layers[l].data;

            for(var i = 0; i < data.length; i++)
            {
                // Postition on screen
                var y = i / height | 0;
                var x = i % width | 0;

                // Which tile we should use
                if( data[i] != 0) {

                    var tileRow = (data[i] / 32) | 0;
                    var tileCol = (data[i] - (tileRow * 32))-1 | 0;
                    console.log('texture -> row: ' + tileRow + ' col: ' + tileCol + ' width: '+tileWidth+ 'tileHeight: ' + tileHeight);
                    var rectangle = new PIXI.Rectangle(tileCol*32, tileRow*32, tileWidth, tileHeight); // x, y, w, h
                   
                    tileset.frame = rectangle;
                    var layer = new PIXI.Sprite(tileset);
                    layer.x = x * tileHeight;
                    layer.y = y * tileWidth;
                    this._game.stage.addChild(layer);
                }
            }
        }

 

 

level1.json

[ivan.popelyshev]

Hi!

Informative first post is always a good way to start discussion here, thank you!

One more person is going to use Tiled, and I'm pretty sure we'll create special tutorial for that at some point.

You have to create `PIXI.Texture` for every possible tile. Texture is actually a region = baseTexture+Frame. 

//1. dump all the possible tiles somewhere
//2. pre-create textures with this thing:

new PIXI.Texture(tileset, new PIXI.Rectangle(x,y,w,h));

//3. use created textures inside
//4. alternatively, you can just make a hash of all existing textures made from tileset and create new one if its not present there yet.

 

[ivan.popelyshev]

This plugin can help you: https://github.com/pixijs/pixi-tilemap , it stores sprites like Graphics stores primitives. Here is the tutor: https://github.com/Alan01252/pixi-tilemap-tutorial

The strategy for really big map: create a portion of the map, "window" around a camera, 2x or 3x size of camera. Each time camera gets out of the "window" , you should clear the tilemap and fill it with tiles from new "window" that has same center as camera.

If you want to use `PIXI.Sprite` with this strategy, assume that tilemap is a container that has all those sprites stored inside, and you can save the sprites that belong to both "window" positions. Also its better to store unused sprites for later use, pooling them will help against sudden GC run after a window change.

[RayIT]

Thanks Ivan

works perfect!!!

// map
module.exports = class Map {
    constructor( game ) {
        this._game = game;
        this._body = {};
        var tileset = PIXI.utils.TextureCache["./images/terrain.png"];
        this._game.on( 'update', this._update.bind( this ) );
        this._createMap(tileset);
    }

    _createMap ( tileset ) {

        // load json
        var level = require('../map/level1.json');
        var tileHeight = level.tileheight;
        var tileWidth = level.tilewidth;
        var layers = level.layers;
        var height = level.height;
        var width = level.width;
        console.log(level);

        for(var l = 1; l < layers.length; l++ )
         {

            // Layer
            var data = layers[l].data;

            for(var i = 0; i < data.length; i++)
            {
                // Postition on screen
                var y = i / height | 0;
                var x = i % width | 0;

                // Which tile we should use
                if( data[i] != 0) {

                    var tileRow = (data[i] / 32) | 0;
                    var tileCol = (data[i] - (tileRow * 32))-1 | 0;
                    var text = new PIXI.Texture(tileset, new PIXI.Rectangle(tileCol*32, tileRow*32, tileWidth, tileHeight));
                    var layer = new PIXI.Sprite(text);
                    layer.x = x * tileHeight;
                    layer.y = y * tileWidth;
                    this._game.stage.addChild(layer);
                }
            }
        }
    }

    _update () {

    }
};

 

[ivan.popelyshev]

Congratulations! that's how it supposed to work. There are many tricks like "text.rotate=12" if you want to flip the texture, but I'm sure you'll find them later. Focus on implementing good camera and may be that strategy with "window", if you have any trouble with performance.