Big bitmap animations stuttering

Recommended Posts


When I animate large images (e.g. 1600x900 px) throughout the screen, I see it stuttering sometimes. Animation must run at 60 fps with big images, otherwise it won't show smooth.
I suspect these stutters I see every now and then, say once every 15 seconds, are nothing else than my process being preempted by the OS.. Even a the smallest preemption can cause a the process to lose minimum 10-15 ms, so in that time slice I lose the opportunity to play that frame (at 60 fps it has to play 1 frame every 16.6 ms). So if the amount of time to draw completely that frame is more then 6.6-1.6 ms, it will stutter... isn't it? Probably, with big images, the amount of time to draw stuff is more than 1.6-6.6 ms.
My conclusion is that we cannot get rid of these problems, can we?

So to recap, the eye needs to see 60 fps played, if we get preempted it won't play 60 fps, but say 57, then it it will be noticeable immediately. Indeed try to set 57 fps on large images, you will see the same stuttering happening more often than not. At the same time we cannot go over 60 fps as far as I know because we are approaching that minimum 10-15 ms quantum assigned to the drawing thread. Catch 22 situation.
Do we need RTOS if we want smooth animations all the time?
Thing is that customers complain about these stutters every now and then!

  • Like 1

Share this post

Link to post
Share on other sites

It sounds like you are hitting rendering limitations of the Flash Player. So yes, your assumptions are correct: if your redraws take too long there will be visible stuttering. 


There is nothing we can really do about this in GSAP. Our engine is extremely fast and capable of changing thousands of values per frame but the bottleneck is always going to be how fast Flash Player can render those changes on screen. If you change your image size to 5px by 5px you will likely see an increase in performance but nothing has changed for what GSAP is doing, you would just be lightening the load for the Flash Player.


If you want greater performance out of Flash you may want to investigate Starling which runs on Stage3D: http://gamua.com/starling/

However, GSAP wasn't designed to work with Starling.


For the best performance in the browser you should look into Pixi.js (2D) or Three.js (3D) both are html5 canvas renderers that incorporate WebGL.

GSAP works great with both.

  • Like 2

Share this post

Link to post
Share on other sites

Actually I am already using Starling. I can use GSAP with starling faking the animaton with a dummy sprite and then updating all the animation matrixes into the starling display object, frame by frame. I use GSAP for matrix calculation only, then "steal" the matrix out the dummySprite and give it to Starling, then play it.


The problem is still there in Starling as it is in Flash, no difference.

For my project I will also try to output to WebGL in the future, still using GSAP, and see how it goes, but for now it seems like I've hit an hard limit with the Flash Player. Indeed, there is nothing I can do to avoid that little flicker every now and then. I could try tiling the image and see, but for now sufficiency is what matters!

  • Like 1

Share this post

Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Recently Browsing   0 members

    No registered users viewing this page.