Jump to content
This forum will be closing down. Please move to the respective dedicated project forums.

Using tileset with json


RayIT
 Share

Recommended Posts

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

Link to comment
Share on other sites

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.

 

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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 () {

    }
};

 

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.

Guest
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.

Loading...
 Share

  • Recently Browsing   0 members

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