Tuning Starling based games


All the optimizations on your rendering library won’t help your game’s performance unless you use the library properly. I’ll now go through few basic ideas we used with Angry Birds Facebook version to get the most out of the Starling framework.

Texture usage

Now when Starling automatically generates the QuadBatches when rendering images it is important that display objects share the same base texture when ever possible. To achieve this use big base texture and then use subtextures from the main texture for the images. When all your graphics won’t fit one 2048×2048 texture group them smartly so that for example background graphics use the same base texture, game objects use another shared texture etc. Consider writing your own logic for combining smaller bitmaps into a big one for the texture generation so that you can modify these textures for example when moving from one game level into another one. Also note that even if Flash 11 should guarantee 128MB of texture memory it means only 8 of these 2048×2048 textures. On some setups even this might be too much so don’t create textures unless you really need them and when you don’t need some texture any more dispose it.

Display object usage

No matter how active your game’s visuals are all the graphics are probably not moving or changing. If you have these kinds of elements, for example background that contains several sprites and images, place the element’s display objects within one sprite and then flatten the sprite after it’s content is set. You will still be able to move, scale and rotate the background but it will render a lot faster than without flattening. If possible add also some quick checks if the parent display object is within the visible display area or not. Set the visibility of the objects accordingly to speed up the rendering.

Background coloring

The whole Stage3D rendering context needs to be cleared on every frame update no matter how much you render on it. By default Starling uses the initial stage color for the clearing but if your game happens to have a solid color sky, ground or what ever that is drawn behind all the other graphics add a setter for the clearing color and set it to this color you would be using. This way painting the whole canvas with the color is basically a free operation since the clearing has to be done anyway. If you have several of these single color areas use Quads for the smaller ones since they are a lot faster than Images with single color textures.

Detail adjustments

Computers that use software rendering will most likely have problems running your game as smoothly as those that use hardware rendering. Detect if the game is running using software rendering and then drop some details that are not necessary for the game. Consider using lower rendering quality for the graphics and limit the amount of particles if you are using the particle emitter extension.

Overlay graphics

It’s possible to have conventional Flash display objects on top of the Starling’s Stage3D graphics. Using them for example for UI elements might make sense but remember here not to touch the attributes of the display objects if they have not changed. If these sprites are not updated on every frame they should not have too big effect on the frame rate.

That’s all this time. With these simple tricks you should get your Starling based game running smoothly on most of the computers.

Post a comment or leave a trackback: Trackback URL.

Comments

  • Alex Nino  On February 20, 2012 at 7:15 am

    good points! I can’t wait for Air 3.2, adobe is promising a lot of this for mobile, so starling will be there for sure.

    • villekoskela  On February 20, 2012 at 9:28 am

      Same here. I’m also expecting quite a lot from AIR 3.2 performance on both iOS and Android devices.

  • Israel Barba (@israelbarba)  On May 12, 2012 at 5:53 am

    Hello Ville, which physics engine was used? Box2D, Nape?

  • villekoskela  On May 14, 2012 at 9:26 am

    Angry Birds uses Box2D like stated also in the game’s credits.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: