Quantcast
Channel: Pixi.js Latest Topics
Viewing all articles
Browse latest Browse all 3978

Using tileset with json

$
0
0

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

2017-11-07-235021_2880x1620_scrot.png


Viewing all articles
Browse latest Browse all 3978

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>