Best practice for static background images?

[Binary Moon]

I want to add a static background image to my match 3 game and am not sure of the best way to do it that is flexible and efficient.

 

My concerns are:

• I'm designing the game for mobile primarily (going to publish with cocoonjs) so want to be efficient with memory usage
• The game is universal so needs to work on different resolutions (including desktop for online demo)
• I know that working with big images can be hard on the processor (I'm using canvas mode)

A few things I have considered:

1. use a single massive image and scale it down to fit each platform
2. have 3 or 4 images in different sizes and use different ones per platform based on screen resolution - then scale to fit
3. something else?

Was wondering if anyone has any thoughts/ opinions on the best way to do this?

[lewster32]

I think a fourth option would be to construct the background image from smaller elements and make it somewhat responsive. If you can be clever about how the image is cut up, you can make a background image out of elements such gradients, shapes, tiled repeating patterns and images for the stuff that's too complex to produce via those means. You can then assemble all of that in a group and set cacheAsBitmap to true on the group, giving you a 1:1 pixel ratio background that uses precisely as much memory as is needed for that size of display, and without the performance overhead of having all the objects composed each frame. Doing it this way means you can position things appropriately to the canvas too, so regardless of differences in screen aspect ratios, you get a satisfactory result.

[rich]

Depends how large the image needs to be really, and what other assets you've got loaded into memory too. While you could do any of the things you listed (or option 4 above) I would go with the absolute simplest first: one large image, scaled to fit at runtime. And see what happens. If you don't actually have all that many other assets in memory then I suspect this will actually work fine, especially for a Match 3 style game.

[BdR]

Good question, I think my question is very similar so I'll just post it here. Let's say you're creating a game like Sokoban using Phaser, so something like this:

 

 

During gameplay, only the player character and the boxes will move around. All the rest is just a "static" background of walls and floors. But the walls and floors will differ for each level.

 

Is it possible to create some sort of background image, draw the current level on it and use it as the background image? Instead of re-drawing and 'compiling' the background for each frame again and again..

[lewster32]

Yeah, this is exactly what I mean by using cacheAsBitmap - it takes a group and 'flattens' it into a single texture.

[Binary Moon]

Thanks for the comments.

 

I think I'll do what Rich suggested and just try a single image and see how it works. There's not much else in terms of graphics in the game - but there are some rotations and transitions which could be quite processor intensive I guess. I suppose that's what testing is for though

 

Also - cacheAsBitmap sounds interesting. I wonder if I could take a large image, scale it down, and then cache the scaled version so that it only stores what is needed. I'll save that for another day though. I guess it may not be needed