RayIT Posted November 7, 2017 Share Posted November 7, 2017 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 Quote Link to comment Share on other sites More sharing options...
ivan.popelyshev Posted November 7, 2017 Share Posted November 7, 2017 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. RayIT 1 Quote Link to comment Share on other sites More sharing options...
ivan.popelyshev Posted November 7, 2017 Share Posted November 7, 2017 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 1 Quote Link to comment Share on other sites More sharing options...
RayIT Posted November 13, 2017 Author Share Posted November 13, 2017 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 () { } }; Quote Link to comment Share on other sites More sharing options...
ivan.popelyshev Posted November 13, 2017 Share Posted November 13, 2017 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. Quote Link to comment Share on other sites More sharing options...
Recommended Posts
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.