Optimize rendering in ActionScript 3

Question

Hi,

I am working on parallax animation(something like - flordearagua.com) which consist 7-10 layers of quite large(1500x800) bitmaps and MovieClips. To archieve parallax, I wrote code to move all layer at different speed which again depends on some parameters like mouse position and acceleration. All upto this working fine.

I want to make this animation really smoother. I want to achieve minimum 24 FPS with this. currently I am able to achieve only 15-17 FPS with all optimization I've done.

Please note. All component I am using is Library Component. I enabled bitmap catching for some layers but for some I just can't. Enabling bitmap catching for some layers result in jerkiness while performing parallax movement.

Please suggest any optimization.

Thanks.

Answer 1

Splitting the large images up into smaller images should enable the flash player to perform tests to see if each image is within the viewport area of the stage, and not render it.

So split the images up and add them to a DisplayObjectContainer, so add them to a Sprite. And replace your large image with the group of smaller images. you should see some improvements there.

If this doesn't work you could try and perform the visibility tests manually, making the images that are not in the viewport visible=false.

Answer 2

I think this is what you should do -- I can't tell how close to this you already are, though.

• keep all of the large layers off the display list.
• on each frame, calculate which section of each layer should be visible.
• grab bitmapData objects of each layer's currently-visible section.
• paint them, in order back-to-front, into an empty display object on the display list.

However, it sounds like you're already doing this, or, at least, very close to doing it. Do you have any alpha gradients, complex pngs, or the like that you can simplify? Opaque is always faster than alpha.

Answer 3

I think you can reach a better performance by keeping everything you can off the display list. Leave a dumb sprite on it only. Calculate the paralax displacement by hand, and compose one bitmap image only, then paint that to the screen with copyPixels, which is very fast.

This gets harder to manage when you need to have fine grained user interaction (clicks or rollovers on certain areas of certain layers). Still so, you can capture mouse events and hook to the same code to determine what and where were clicked.

The catch here, is that you will be, in a way, re-implementing the DisplayObject hierarchy. And that's the crux of it, the native display object is too generic and knows little of the details of your application, so you can optimize it aggressively.

You seem to be well informed of this, but just like any other optimizations, where is the issue really? (profile it!)

The VM these days is pretty good, but the rendering pipeline is awfully slow. You might get a few more FPS from other sources (inlining things, memoization and so forth).