Stats

3.9K visitors
39.2K page views
2,637 translation visitors
9.6K translation page views

Performance Tips for Mobile Games

Favourite 137 favourites
Tutorial written by ranmaOriginally published on 26th, April 2012 - 3 revisions

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>
this will work on some native mobile browsers and cause software rendering to switch to point resizing and rotation.

2) Finally, don't use automated solutions like phonegap build and appMobi
This will pay out later on, trust me. Export your game as a phonegap app, but test and build in Eclipse, Xcode, etc. First of all, this will help you customize your app more - add custom resolution icons, modify application manifests directly. Secondly, it will allow you to use phonegap plugins, mainly the LowLatencyAudio plugin which is a native way of playing sounds, contrary to html audio element, which is used by Construct's audio plugin. There are lots of tutorials on the web on how to do this, i recommend Phonegap's tutorial.

Patience my apprentice

HTML5 gaming is quite new technique, but we see that it's expanding very fast, making developers push WebGL to their browsers fast. Imagine, if there was little need of WebGL it would probably still be available only as Chrome's beta as it was some time ago. Now it's available on Firefox (also firefox mobile) and on mobile opera. I believe it's only a matter of time it will be supported on most (if not all) mobile systems.

Have fun and test

Nothing to add more. The sooner you start testing your game on the device, the better.

Unlock your full gamedev potential

Upgrade to the Personal Edition of Construct 2, it has way more features and won't holding back from making money and using your full creativity like the free edition does. It's a one off payment and all Construct 2 editor updates are free for life!

View deals

Plus, it's got a lot of additional features that will help you save time and make more impressive games!

Congratulations on finishing this tutorial!

Did you learn a lot from it? Share it now with your friends!

Comments

4
OrdonianKing 2,615 rep

Thank you for this.

Thursday, April 26, 2012 at 8:58:46 PM
4
simwhi 6,279 rep

There are some great tips here. Great tutorial.

Monday, April 30, 2012 at 12:07:16 PM
4
Epox 4,244 rep

Thank You for this great list and details about the mobile optimalisation!
The most suprising is the "avoid text object" and the most progressive tip is the image-rendering: optimizeSpeed css hack.

Thursday, May 03, 2012 at 8:47:37 AM
2
0plus1 8,329 rep

Shouldn't it be better to keep webgl turned off for mobile browsers?

Thursday, May 03, 2012 at 3:13:47 PM
2
ranma 13.6k rep

webgl is forced disabled by construct itself even on mobiles that support it so it's best to leave it on as it shouldn't make a difference.

Thursday, May 03, 2012 at 3:27:43 PM
2
Kamal 2,406 rep

so many avoidance! there will be still a long way for html5 games on mobile devices

Saturday, May 19, 2012 at 8:21:13 PM
2
valkyriegames 4,925 rep

Thanks ranma, that was a great tutorial! I will be trying out all of these tips to increase the fps on my game. Hopefully WebGL will kick in and be supported soon on most phones too! Cheers!

Friday, June 15, 2012 at 2:22:37 PM
2
mmmm4525 2,590 rep

Really good tutorial! It really helped my game that I'm making for me and a couple of my friends.

Tuesday, October 30, 2012 at 3:05:08 PM
2
Ramesh 5,396 rep

This is very useful. Followed these guidelines and drastically improved the performance of a Scirra Construct game running on a Android Tab with CocoonJS. Thanks for publishing this.

Friday, January 11, 2013 at 1:24:57 PM
3
xyboox 2,875 rep

Hi @ranma, you're saying we should use LowLatencyAudio plugin of Phonegap for playing audio instead of the html audio C2 is using. Can you explain a little bit? How would you initiate an audio play from a C2 game? Maybe using CallJS C2 plugin? If so, what about the events triggering/listening ( e.g. audio ended ). I am very much interested in this. Thanks!

Friday, March 01, 2013 at 10:39:15 AM
2
philx 4,487 rep

do you know what is better? using a PNG with transparent background or use a jpg/png with black background and then multiply it?

Tuesday, March 26, 2013 at 5:08:46 PM
3
Sollaano 3,311 rep

@ranma

Thanks for those tips! I've been struggling on 10-15 FPS but now i see what i need to do to get FPS higher. I have to do many changes to my game but i'm happy that they will increase the performance.

Sunday, June 23, 2013 at 9:23:53 PM
1
delgado 35.2k rep

finally dont do so much because you dont play with your game :)

Sunday, July 28, 2013 at 6:17:16 PM
4
philx 4,487 rep

you're saying "Finally, don't use automated solutions like phonegap build and appMobi"
but what about CocoonJS?
i made some great experience with this wrapper and i think it's quite decent.

Wednesday, July 31, 2013 at 12:09:31 PM
2
OrangeFlash81 1,894 rep

Great tips, thanks!

Saturday, August 03, 2013 at 10:42:04 AM

Leave a comment

Everyone is welcome to leave their thoughts! Register a new account or login.