Tile Rendering Performance

[Jay Manley]

Hi all,

I'm currently working on a new game which uses large tilesets and renders 9 Containers as map layers. Each map contains 24*24 tiles and each tile is 32px*32px. Currently I'm adding each tile from the tileset as a sprite individually (only if the tileIndex for that tile is > 0). So if I were to have a fully loaded map it would contain a total of 5,184 Sprites.

I'm guessing that this is inefficient and I feel that I could combine the bottom two layers into a texture, as these are Ground Layers on the map. The player will walk over these anyway and they are unlikely to ever change until the player switches map and thus reducing the Sprite usage by 1,152 (2 layers worth).

I've looked at the docs and online examples to see if there's anything that could be helpful here but have been unsuccessful in getting it to work as I'd expect it to. Please help.

[ivan.popelyshev]

Welcome to the forums!

Another tilemap thread. Please use search for this particular subforum on "tilemap" word.

You can also search at https://github.com/pixijs/pixi.js/issues

My latest explanation: https://github.com/pixijs/pixi-tilemap/issues/75#issuecomment-589615977

Tilemap is an advanced (not basic) , advanced algorithm that requires developer to write its own code and not just CTRL+C stuff from examples. PixiJS gives only low-level components that can be used with high-level algos people produce. When you write it, you actually feel like engine creator and not just like a person who uses one of existing solutions.

I posted the same answer with different details like 30 times already. I hope you can forgive me that I cant give you compilation of all those threads  

Of course I would like someone to actually go through all that and compile article for PixiJS wiki ( https://github.com/pixijs/pixi.js/wiki ). We are waiting when that hero arrives.

Edited February 21, 2020 by ivan.popelyshev

[ivan.popelyshev]

Regarding your case - yes, 5k sprites is too much, only something like ParticleContainer can handle that, and even then - you'll have like 100k javascript objects in memory total, because each sprite is lightweight but not that lightweight  

You can put tiles into graphics with beginTextureFill - it'll have like 20k objects and it wont re-upload vertex buffer every frame. pixi-tilemap wont spawn any objects, it can just upload buffer once when after you refill your tiles list, and all next calls are cheap, only asking for GPU to render that particular tilemap. RenderTexture caching can convert your map to 1 or 2 sprites, but eats gpu memory, 4 bytes per pixel.

Choose your destiny.

[xerver]

If you're using the Tiled map editor, then gl-tiled can help render large maps efficiently (WebGL only).

Edited February 23, 2020 by xerver

[ivan.popelyshev]

47 minutes ago, xerver said:

If you're using the Tiled map editor, then gl-tiled can help render large maps efficiently (WebGL only).

btw does it have animated tiles support?

[xerver]

Yes.

[timetocode]

If the tilemap isn't mutatable (or if only a few layers are mutable) one can also get away with:

1. keeping the map data in some simple form, like an array per layer containing ints for tiletype
2. generating megatiles by drawing sections of the map (e.g. 16x16 tiles) onto a rendertexture 
3. add the megatiles to the game instead of individual tiles
4. (maybe) hide megatiles that are offscreen (if your player only sees a small subsection of a much larger world)

Baking a large number of tiles into a megatile takes a little bit of time (milliseconds, usually) but baking an entire map depending on the size can take <  1s on a gaming rig and multiple seconds on a chromebook -- so just keep in mind that while this may help reach and maintain maximum frames per second it does so at the expense of potentially lengthy operation on slower machines as the game starts up. If you need it to generate these megatiles on the fly as the player moves around (which would not be the case for 5000 sprites, but might be the case for a super big map) then it becomes prohibitive as it makes the game choppy unless one can bake the megatile without freezing the game for a few frames.

I've got a few games that work this way.. generally speaking they're able to get 60 fps on a low end chromebook... and this approach added ~4-12 seconds of 'bake time' on low end devices for a map that was ~150,000 sprites and resulted in 8096x8096 pixels worth of render texture (baked into smaller textures like 1024x1024).