What is an efficient way to deal with large, scrolling background images?

| | August 11, 2015

In my mobile game you basically you just fly up (infinite height) and collect stars.

I have many quite large background images, scaled down so that their width is the same as the device width. Then they are appended after each other during rendering.

Since I implemented these backgrounds, my game runs poorly. I’ve got about 20 background images with a size of 800×480 each; without backgrounds the game is quite smooth.

Does anyone have an idea how to implement this many backgrounds without making the game slow down?

The images are used as a 2DTexture.
If I leave the clouds out of the image and “just” display the blue part, the app still slows down. Showing some code is a bit difficult, because I got many many classes which will do the loading, rendering and display stuff. Basically its done as Google does it in there “spriteMethodTest” example here:

2 of these image set.

First: http://picbox.im/view/b7c8c86abb-01.png

Second: http ://picbox.im/view/3a8162314a-02.png

2 Responses to “What is an efficient way to deal with large, scrolling background images?”

  1. If your images are glued together on both x and y axis you will have up to 4 images drawn at the same time.
    I had a similar problem and solved it with loads of small images loaded as textures and displayed when needed.

    You can also load the image and then by simply dividing it into smaller textures/tiles you can already get some improvements.
    Try also enabling clipping.

    I am not sure about the underlying functions we used for the memory management and display as the game engine was not written by me.

  2. Doug.McFarlane on November 30, -0001 @ 12:00 AM

    What I’d recommend is to go with a smaller tile system, as suggested in the comments.
    I would separate the clouds from the stars and create a bunch of tileable star tiles, maybe 48×48 or 96×96 (or whatever suits you).

    Then I would create a bunch of cloud tiles (can vary in size), using alpha / transparency so the clouds will overlay and blend with the stars smoothly.

    This could all be in one texture file if your device supports textures that size.

    Then randomly pick stars from the star tile list to fill a star tile array.
    The choose random clouds and random positions to fill a cloud tile array.
    Fill in new tiles at the bottom in both tile arrays after scrolling.

    One advantage of this is you could implement a parallax scrolling effect easily if you scroll the clouds faster than the stars. And it will take less memory if that’s an issue. Plus it will be fairly fast in rendering if done properly and only set the texture / material once at the start of the tilemap render loop.

Leave a Reply