mrspeaker Posted June 2, 2014 Share Posted June 2, 2014 I've recently been implementing pixi.js as the rendering part of my game engine - which was formally just for canvas 2d. The process has been going smoothly, but I'm not sure how I should approach large scrolling tile maps. My engine currently takes a sprite sheet with all the map tiles, and the map is defined as a huge 2D array of indexes into that sprite sheet. For example: var map = [ [5,5,5,5,5], [5,0,0,0,5], [5,0,8,0,5], [5,0,0,0,5], [5,5,5,5,5]]; I have a camera object that defines the current x/y position of the map - and when I render, I simply loop over all currently visible cells and blit them directly to the canvas. So it doesn't matter how huge my map is, it's the same amount of blits-per-frame. There is no concept of a "tile object"... the only information stored per tile is the index to the sprite sheet. But with pixi I need to (I think!) define each tile as a sprite: var tile = new PIXI.TilingSprite(this.texture, 16, 16); And I add each tile to a DisplayObject. This works for a non-scrolling one-screen map. But as soon as my camera starts panning left (for example) I need to add another row of sprites to the stage, and remove all the sprites from the left. This means that I need to go through each tile and decide if they are on screen or not, and then figure out which new tiles need to be added. This sounds... expensive. Perhaps it's correct though? Or is there a better way to do it? Is it smart to have some kind of tile pool (and if so, would the pool need to be NUMBER_OF_TILES x ONE_SCREEN_FULL_OF_TILES big)? Umm... I guess I'm asking if anyone has any tips for large tile maps? Quote Link to comment Share on other sites More sharing options...
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.