Animations are very slow on mobile devices

[AndrewMic]

Hello everyone,

I recently just finished converting about 80 animations from flash to HTML Canvas so they could be accessed on mobile devices. On the newest of devices the animations loaded and played the fastest. But on a 2 year old iPhone the animations are very slow. I've been trying to figure out how to speed up these animations and have been trying out bitmap caching. It didn't seem to help because most of the animations are not in movie clips and aren't repeated. I have a feeling it has to do with the vectoring of everything but I could be wrong. Any help or recommendations?

[kglad]

optimization is a complex topic.  here's an excerpt from a book (Flash Game Development: In a Social, Mobile and 3D World) i wrote:

Optimization Techniques

Unfortunately, I know of no completely satisfactory way to organize this information. In what follows, I discuss memory management first with sub-topics listed in alphabetical order. Then I discuss CPU/GPU management with sub-topics listed in alphabetical order.

That may seem logical but there are, at least, two problems with that organization.

1. I do not believe it is the most helpful way to organize this information.
2. Memory management affects CPU/GPU usage, so everything in the Memory Management section could also be listed in the CPU/GPU section.

Anyway, I am going to also list the information two other ways, from easiest to hardest to implement and from greatest to least benefit.

Both of those later listings are subjective and are dependent on developer experience and capabilities, as well as, the test situation and test environment. I very much doubt there would be a consensus on ordering of these lists.  Nevertheless, I think they still are worthwhile.

Easiest to Hardest to Implement

1. Do not use Filters.
2. Always use reverse for-loops and avoid do-loops and avoid while-loops.
3. Explicitly stop Timers to ready them for gc (garbage collection).
4. Use weak event listeners and remove listeners.
5. Strictly type variables whenever possible.
6. Explicitly disable mouse interactivity when mouse interactivity not needed.
7. Replace dispatchEvents with callback functions whenever possible.
8. Stop Sounds to enable Sounds and SoundChannels to be gc'd.
9. Use the most basic DisplayObject needed.
10. Always use cacheAsBitmap and cacheAsBitmapMatrix with air apps (i.e., mobile devices).
11. Reuse Objects whenever possible.
12. Event.ENTER_FRAME loops: Use different listeners and different listener functions applied to as few DisplayObjects as possible.
13. Pool Objects instead of creating and gc'ing Objects.
14. Use partial blitting.
15. Use stage blitting.
16. Use Stage3D.

Greatest to Least Benefit

1. Use stage blitting (if there is enough system memory).
2. Use Stage3D.
3. Use partial blitting.
4. Use cacheAsBitmap and cacheAsBitmapMatrix with mobile devices.
5. Explicitly disable mouse interactivity when mouse interactivity not needed.
6. Do not use Filters.
7. Use the most basic DisplayObject needed.
8. Reuse Objects whenever possible.
9. Event.ENTER_FRAME loops: Use different listeners and different listener functions applied to as few DisplayObjects as possible.
10. Use reverse for-loops and avoid do-loops and while-loops.
11. Pool Objects instead of creating and gc'ing Objects.
12. Strictly type variables whenever possible.
13. Use weak event listeners and remove listeners.
14. Replace dispatchEvents with callback functions whenever possible.
15. Explicitly stop Timers to ready for gc.
16. Stop Sounds to enable Sounds and SoundChannels to be gc'd.

[Colin Holgate]

Although that is a useful list for AS3 development, how many things also apply to HTML5 Canvas?

[kglad · Accepted solution]

oops.  nothing.

Adobe Animate HTML5 Optimization

[stevep26518373]

This did it for me for canvas lagging issues on mobile phone.

//////////////////////////////////////////////

<meta name="viewport" content="width=device-width, minimum-scale=1.0">

//////////////////////////////////////////////

seem the gpu is not active by default on mobile (exept iOS devices)

this line of code fixed it.

[marjantrajkovski]

Avoiding vectors even they are the most powerfull weapon of Animate 🙂