Jump to content

Large tile maps


Recommended Posts

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 = [






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?



Link to comment
Share on other sites

But is you'r game running slow ? Did you profile that , are you'r assumptions correct ?Maybe it is not that expensive operation after all.

And the goal of tile maps , is tiles after all :) .Little rectangles with regular shapes , which makes them predictable for their position. You don't need to iterate them all.

You just need some simple calculations based on the size of the tiles , the visible size and the camera position.


Basically handling smaller tiles should be more expensive operation then larger ones.

Link to comment
Share on other sites

You are having the same problems as I had before.


Please take a look at my answers in this question.




In short:


- render parts of tiles into bigger textures with renderTexture,

- dynamically set property of a sprite to visible = false if element is outside the viewport,

- divide your area into sectors that will be uploaded to the stage only when needed.



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.

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.


  • Recently Browsing   0 members

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