Best way of optimization animation


Hi. We have a Timer and every time change a image. For example 50 sequence images 300*300 size. Now I use that : removeChild(bitmap), addChild(bitmap) every time. But I think its very slowly.
What u say about :

  1. Add all of sequence images in sprite, and than change visible.
  2. Use a movieClip
  3. other

What the best way to maximize speed ?


Another option would be to use a Tilemap, you could combine multiple images into one large image, then change the to represent each of your different frames.

However, 50 x 300 x 300 pixels would add up.

Also, consider using a combination of Event.ENTER_FRAME plus Lib.getTimer instead of using a plain timer. This allows dropping of frames (if necessary) which improves the appearance of being smooth.

Here’s an example:


Thx for u replay. But u say me about diffrent options, and smooth, not optimize. The best way u say use Enter_Frame + timer, ok, and how to add animation best ? TileMap ?! or visible change, or movieclip usage for example?

(and how Tilemap works? Its use draw() methods by id and return bitmap? If its true, I can use that without TileMap class as native)


You have two things:

1.) When it is time to update your object, change to the next graphic

This is done automatically when you use MovieClip (which is wired for using SWF assets from Adobe Animate or Flash Professional this way)

Otherwise, a combination of Event.ENTER_FRAME plus openfl.Lib.getTimer is a good way to update. On each frame, check the milliseconds elapsed since the previous frame, and use that to determine whether it is time to animate to the next frame.

2.) Render the changes once you are done

There is a spritesheet library, and another library shared recently that should do animation for you.

Tilemap has been documented elsewhere here on the forums, or the BunnyMark demo uses Tilemap.


You could take it easy and keep your frames in your 50 files: load them and define a fixed sequence (an Array?). Then add/remove them calculating the elapsed time with the ENTER_FRAME + getTimer method that @singmajesty is suggesting.
Add/removeChild is the simplest way to do it, otherwise you can add all frames and set them visible/invisible.
You should compare the efficiency of the 2 techniques: is it faster to remove a frame and add another one or to check 50 images to see which one must be rendered? If you have a single animation on screen I think the difference is unnoticeable.

If you are cool and want to be modern, create an atlas (a single image containing all your frames) and use spritesheet library or even better tilemaps as @singmajesty suggested, with the mapsheet library, that should be the most efficient render method for you.