Performance Tips for Mobile Games

So, you got Construct 2 installed and working, created a simple 5 sprites game with background, exported it to phonegap build or appMobi and you're like "it's running at FIVE frames per second, WTF Construct?". Been there, seen that, and as a rather successful C2 mobile developer I'd like to shed some light on what's going on, why and how to make it work.

Stop the rage

Construct 2 exports games as a HTML5 Canvas. Almost every desktop browser supports hardware canvas acceleration called WebGL, which in contrary, on mobiles is not supported so widely, in fact, the only phone known to me, to support native WebGL is Xperia. Yes, mobile browser like Opera and Firefox seem to support WebGL, but phonegap applications DON'T use them, they use built in, native browser. So until native browsers don't support WebGL, canvas on mobile phones will be software rendered, which is extremely slow. Let's now add to this the eventing system C2 uses, which is exported as javascript. The event sheets you create in C2 are run by a mobile processor as much times per second they can, so the more events you have, the slower your application will be. Having all that gibberish said...

What do?

You can take some steps to increase mobile application performance. First of all, a great starting point would be reading Construct's

Performance Tips manual entry. It will tell you, what to do to optimize your game. Keep in mind it focuses on optimizing in general. I'll try to expand it a little, as we're targeting a NON WebGL accelerated environment.

1) ALWAYS set pixel rounding to On, WebGL to On, Sampling to Point, Clear Background to No and every layout's all layers' transparent to Yes (except for special design conditions not covered in this tutorial)

As stated in Performance Tips linked above, pixel rounding will avoid processor heavy floating point operations, point sampling will make application resize and rotate sprites faster (only on WebGL, so actually it's a feature that will accelerate your app in future), clear background will turn off filling whole canvas with white background every frame.

2) AVOID having lots of sprites on screen

Here's one for you. more than 20 (yes, twenty) sprites probably will be slow. Also bigger sprites are slower.

3) AVOID sprite resizing and rotation

Events like Set Width/Height/Size/Scale and Set Angle, Rotate (also a Rotate Behavior) are performance killers.

4) AVOID semitransparency and Sprite effects

Events like set opacity, set effect (also Sprite's effects) and Fade behavior (also Sine behavior with opacity) will drastically lower your fps.

5) NEVER use force own texture on layers

Every layer that has its own texture will be rendered separately. Having two canvases when one is already working slowly is bad.

6) NEVER use text object

Rendering text on canvas is a very inefficient operation at the time. Use spritefont plugin or textbox. Be vary of their limitations though.

7) Avoid using particles

Particles tend to create lots of sprites, see point 2.

8) Avoid fast animations

Yes, set your objects animations' speed to less than 10. Also, keep in mind, some mobile browsers have a limit of images loaded, so avoid sprites with lots of frames in their animations. If your whole layout's sprites have less than 100 frames - this is good.

9) Avoid For each loops in events

Having 20 sprites and running for each sprite every frame will cause slowdown.

10) Scroll to is faster than moving eveyting

Rare situation but it happened to me. Don't move every object if you can scroll your view.

lrn2code

Don't be afraid of it, it's fun!

1) Learn a little of html, css and javascript

At least as much to make this change to your exported html file:

    <style>
    ...
    canvas, canvas * {image-rendering: optimizeSpeed}
    </style>