low fps after optimization

Hello Everyone,

I am developing an arcade game with C2 but i came across some serious performance problems when viewing the game from my cellphone: a Samsung Galaxy A3.

The problem is that FPS is very low from 4 to 10 even when no visible object is moving on the screen!

After reading a performance guideline on C2 website i did the following:

-lowered the game resolution from 1280x720 to 640x360 pixels (both layout size and window size of course);

-halved resolution of all sprites (the whole game weights 5 MB graphics and audio included);

-disabled some parts of code which contained a total of 10 for loops which counts from 1 to 4;

Even after doing this the problem didn't solve.

I also run a performance test on the device using a Scirra game made for that purpose but FPS ranged from 30 to 60 and that makes me think that the device itself is not the issue.

The guide states that using too much for loops can cause performance problems but how much exactly are too many? Is that my case?

Also, if the loops are disabled why I don't see any improvement? Is it possible that the loops run despite the code being disabled?

Did I miss something?

Thanks in advance for any help

Have you tried my tips here?

Are you using any or these:

WebGL effects?

Particles?

Text object?

Those are usually the biggest FPS drainers on Mobile.

If your CPU is high and FPS is high (Usually it's code optimization problem)

If your CPU is low/average and FPS is low (Usually graphics problem, particles, WebGL, Blend modes, text object etc)

IF CPU is high and FPS is low it could be a mix of both or simply too many things going on at the same time.

PixelPower, I was already following many of your advices but I'll be sure to check again all of your guidelines

tunepunk i had no particles, three text objects and many objects with the Tint effect.

I had about 50 sprites with a permanent Tint effect applied (an event trigger once to activate the effect), I used this trick to color some white sprites with 4 different colours, one for each player (yes I'd like to support up to 4 players), these sprites feature the players itself, their health bar, input device, input feedback and some other player-related objects like a crosshair.

After removing all of these tint effects the game runs much better so i guess that was the issue.

Since i still need these sprites to appear of a different colour depending on which player they are related to should I use different animation sprites, one for each colour and play stopped animation with that fixed sprite?

Also, sprites like input device and input feedback are actually sprites with collision disabled but should I turn them to - for example - tilebackgrounds or tilemap in order to get better performances?

Just to clarify:

-Input devices are a series of sprites which represtents input devices and their layouts like touch, keyboard layout 0/1 and gamepad 0...3, these become opaque when that input device sends a command and trasparents otherwise.

-Input feedbacks are a series of sprites which tells when a certain player is giving a certain command such as "right direction" or "button A", they change their opacity accordingly.

Since they are normally all white i used tint to colour them as the player they were connected to.

Yeah it's probably the tint effect. I tried that as well, and it's not a good idea for mobile. Try remove the tint effect and you should be fine.

Never use webGL effects for mobile. Not even blend modes, as they can also be heavy.

For mobile i would recommend using sprites of different color. It will use a bit more memory, but you will have much more smooth fps.

Opacity is not really a problem. If you want something to have different color, the best solution is to tint in the sprites in photoshop or something, and have different set of sprites for the different colors you need.

Just to add

Those Galaxy A series are truly awful for html game performance and do not reflect most phones.

A game I had running at smooth 60 fps Sony Z1 compact/HTC 1/ One +/ Samsung S4/5 with around 100 sprites on screen up to 15-20 of which have multiple layers including wgl effects overlaid and some transparent sprites and physics on the main character sprite 3 parallax layers and transparent top layer.

Same game on my mates A3 and my wife's brand new A6 tablet runs at 10 -14 FPS.

I don't know what they are leaving out of the A series to save costs but it cripples HTML5 game performance even when native apps appear to run fine.

The biggest problem with Android performance is GPU blacklisting - the drivers are buggy or unstable and so the browsers revert to software rendering, which can really tank performance. The best way to check for that is open Chrome and visit chrome://gpu and see what the status at the top is. WebGL should say it's hardware accelerated in green. If WebGL and canvas2d both say software rendered, you probably can't get good performance on that device. (Most modern devices are fine though, this is typically only older phones)

If both are hardware accelerated, then you simply must make measurements otherwise you are shooting in the dark. If the CPU usage is high, try running C2's profiler in debug mode and it will tell you roughly where your CPU usage is going. If the CPU usage is low but it's still slow, the graphics are too intense.

Thanks everyone for all of your advices.

After removing all effetcs the game runs much better, I'll use sprites for the coloring matter.

Is a Samsung Galaxy Neo III more reliable for testing on smartphones? I also have a Samsung Galaxy Tab S eventually...

Thanks everyone for all of your advices.

After removing all effetcs the game runs much better, I'll use sprites for the coloring matter.

Is a Samsung Galaxy Neo III more reliable for testing on smartphones? I also have a Samsung Galaxy Tab S eventually...

The Note 4 and up are excellent for testing since most phones follow thier specs. If you followed all my tips, your game will run fine on most android devices I am sure of it 100%.