3
\$\begingroup\$

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 800x480 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: http://code.google.com/p/apps-for-android/source/browse/trunk/SpriteMethodTest

2 of these image set.

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

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

\$\endgroup\$
7
  • 1
    \$\begingroup\$ Can we see a sample of a couple of the images? Are there any repeated bits (clouds, stars etc.) that you could extract? It might be possible to construct your larger images as composites of smaller images. Things repeated in more than one of those images only need to be stored once and should reduce the size of the game. \$\endgroup\$
    – Martin Foot
    Commented Oct 3, 2011 at 9:36
  • \$\begingroup\$ Thanks for your comment. many clouds and stars are on the background. Will it be faster to create many new sprites to display the clouds and stars? \$\endgroup\$
    – Basic Coder
    Commented Oct 3, 2011 at 9:47
  • \$\begingroup\$ Are you trying to display all 20 background images at once, or are you only displaying the one or two that are in the scene? \$\endgroup\$
    – thedaian
    Commented Oct 3, 2011 at 9:55
  • \$\begingroup\$ Just the one/two on the current scene \$\endgroup\$
    – Basic Coder
    Commented Oct 3, 2011 at 10:40
  • \$\begingroup\$ Some sample images, and/or the code you're using, would help a lot, otherwise, we're mostly just guessing at an answer. \$\endgroup\$
    – thedaian
    Commented Oct 3, 2011 at 15:45

2 Answers 2

Reset to default
2
\$\begingroup\$

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 48x48 or 96x96 (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.

\$\endgroup\$
5
  • \$\begingroup\$ Do you mean I should also create small tiles of the large background images? But then I will have hundreds of small tiles?! \$\endgroup\$
    – Basic Coder
    Commented Oct 3, 2011 at 18:38
  • \$\begingroup\$ Don't create smaller tiles for every star background you currently have (unless you want or have to). Create new independent star tiles (say about 20) when placed randomly with other star tiles creates a non-repeating pattern. A small number of star tiles will make your background appear non-repeating since the star field is randomly composed. If your star tiles are 80px by 80px, your tile map would be filled with (10x6) randomly picked star tiles. \$\endgroup\$
    – Doug.McFarlane
    Commented Oct 3, 2011 at 19:14
  • \$\begingroup\$ and thats faster than using a larger texture? \$\endgroup\$
    – Basic Coder
    Commented Oct 3, 2011 at 19:46
  • \$\begingroup\$ Just for understanding: I use a big image (480x800) and use this as background. This image is just the gradient. Than I place clouds and stars randomly as new sprites over these background image? \$\endgroup\$
    – Basic Coder
    Commented Oct 3, 2011 at 19:53
  • \$\begingroup\$ I wasn't picturing it with a gradient. But if that's needed, your star tiles could have a transparent background for overlaying a gradient I suppose. I was suggesting filling the screen with 6 across and 10 down random star tiles, if the tiles are 80px X 80px. Then always have one row of tiles off screen to scroll into view, and discard the ones that disappear off the top (or depending on your scroll direction). Just google 'tilemap tutorial' if you're unclear about the topic. \$\endgroup\$
    – Doug.McFarlane
    Commented Oct 4, 2011 at 12:51
0
\$\begingroup\$

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.

\$\endgroup\$

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .