Draw lots of sprites for background walls and cache as one graphic?

Phaser 3
1

For a Sokoban type puzzle game in Phaser 3, I want to organise the graphics into three layers. There’s one background, the tiles and walls, and the moving objects like player and crates. See example image below.

Phaser with different background layers and sprites
Phaser with different background layers and sprites840×600 286 KB

The background can be one image and the moving objects can be a group of sprites. The walls could also be a group of sprites.

However, the walls will be “compiled” so that the corners look nicer (better than in the example). Based on the surrounding walls, I can select corner sprites so that it’s one seamless connected wall. So for a typical level it will be like a couple of hundred separate smaller sprites.

I reckon keeping the tiles/walls as many separate sprites is wasteful for the Phaser rendering process, because it will draw many separate sprites,even though but it will be the same unchanged walls and tiles for each frame. I know from previous games this could cause slow down issues, especially on mobile. Also, it’s a tile-based game and I won’t be using arcade physics or sprite collisions anyway.

So my question is:

  • what is best way to draw lots of small sprites into one cached bitmap?
  • which Phaser 3 objects/classes can best be used for this type of thing?
  • any other performance or optimization tips are also welcome
2

Render Textures sound like a good solution.

I’d recommend benchmarking different solutions first. If all of the walls use the same texture and are drawn in sequence, they’ll be rendered in one draw call even without caching them in a Render Texture.