Large tile maps

[mrspeaker]

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?

 

 

[nacs]

There's a similar question here: http://www.html5gamedevs.com/topic/1706-basic-tiled-game-performance-enhancement/

 

I use a system similar to the one mentioned above (the RenderTexture method).

 

Instead of one huge tilemap though, I break up the tilemap into "chunks" each of which is a single rendertexture and load and unload chunks based on the camera location.

[Antagonist]

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.

[hubert]

You are having the same problems as I had before.

 

Please take a look at my answers in this question.

 

http://www.html5gamedevs.com/topic/6691-how-does-pixi-deal-with-items-positioned-off-the-screen/

 

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.

 

http://www.sevenative.com