Inconsistent framerates or am I crazy?
By Mims Wright | on June 3, 2007
In AS3, Flash, Flex, Programming, Serious Stuff |
I was trying to do a simple animation based on EnterFrame and noticed that there seemed to be some jitteriness happening even with this very basic animation. I tried checking the framerate and to my dismay, the numbers were typically about 75% of what they should be and sometimes dipping much lower. At first I thought there was something in my code causing the problem but I tried a stripped down version of it and got the same results. Wonky framerates!
I set off to investigate this phenomenon further and am looking for your help in solving it.
First, here is the code I’m using:
[ftf]
package {
import flash.display.Sprite;
import flash.events.Event;
import flash.utils.getTimer;
import flash.utils.Timer;
import flash.events.TimerEvent;
import flash.text.TextField;
public class FrameRateProblem extends Sprite
{
private var _frames:int;
private var _previousTime:int;
private var _currentTime:int;
private var _frameBall:Sprite;
private var _timeBall:Sprite;
private var _fpsDisplay:TextField;
public function get actualFrameRate():Number {
return 1000/(_currentTime - _previousTime);
}
public function FrameRateProblem()
{
stage.frameRate = 24;
//var timer:Timer = new Timer(1000/stage.frameRate);
//timer.addEventListener(TimerEvent.TIMER, onEnterFrame);
//timer.start();
stage.addEventListener(Event.ENTER_FRAME, onEnterFrame);
_frameBall = new Sprite();
_frameBall.graphics.beginFill(0xCC0000);
_frameBall.graphics.drawCircle(0,20, 10);
addChild(_frameBall);
_timeBall = new Sprite();
_timeBall.graphics.beginFill(0×0000CC);
_timeBall.graphics.drawCircle(0,60, 10);
addChild(_timeBall);
_fpsDisplay = new TextField();
addChild(_fpsDisplay);
}
private function onEnterFrame(event:Event):void {
_frames++;
_previousTime = _currentTime;
//_currentTime = new Date().time;
_currentTime = getTimer();
_fpsDisplay.text = actualFrameRate.toFixed(2) + “fps”;
trace(actualFrameRate.toFixed(2) + “fps”);
// This ball will move a fixed distance each frame
_frameBall.x = _frames/150 * 500;
var clone:Sprite = new Sprite();
clone.x = _frameBall.x;
clone.graphics.beginFill(0xCC0000, .8);
clone.graphics.drawCircle(0,20,2);
addChild(clone);
// this ball will move to it’s place relative to the time elapsed at a constant speed regardless of the frame rate
_timeBall.x = _currentTime / (150*1000/stage.frameRate) * 500;
clone = new Sprite();
clone.x = _timeBall.x;
clone.graphics.beginFill(0×0000CC, .8);
clone.graphics.drawCircle(0,60,2);
addChild(clone);
}
}
}
[/ftf]
You can also download the files I used to test this.
The code above does a few things. First, it calculates the framerate by measuring time in between frames in milliseconds and converting it to a fraction. I am using ENTER_FRAME here and getting the time using getTimer() but I found the same problem persisted when I used Timers and/or the Date object’s getTime() method.
Secondly, the program draws 2 balls on the stage. The first one moves based on what frame we’re on which causes it to move steadily the same distance each frame disregarding the fluctuations in framerate. The second ball moves based on the number of milliseconds between each frame so it moves at a constant speed moving farther when the framerate is slow. A trail is drawn behind each one to show the balls’ past positions. Watching the second ball will give you a good indication of where the drops in speed are and watching the relative position of the two balls will indicate how much slower than the desired framerate the program is running.
If you’re convinced that the animations are slowing things down, try removing the graphics and you’ll see the framerates are still wonky.
Here were the first results from my test run on Firefox.
I found that there was a considerable drop in the first second of the program followed by smaller inconsistencies. I found that the fluctuations subsided some when I ran the program at a fixed width and height instead of using 100% (the image above shows this). The framerate averaged out closer to 17fps than 24fps. Oddly, the framerate average went up to around 45fps when I set the framerate to 100fps so 17 definitely isn’t the limit (pictured below is 60fps with some bigger gaps).
Next, I tried other browsers. This is Safari. More stable but slower on average.
And here is the Standalone Player. Very consistent and fast.
I didn’t test on Windows but if you would like to, please post your screenshots to the comments section or email them to me.
So I’m wondering if any of you have seen this phenomenon or have any insights on it. Also, maybe I’m not going about this the right way. Perhaps my math is wrong. Maybe it’s just my computer (I’m using a dual G5 PowerMac btw). Any help or comments appreciated.
12 Comments »
RSS feed for comments on this post. TrackBack URI
A little Flex app to chart framerate fluctuations: http://dougmccune.com/FPS_test.swf
Obviously the framerate is influenced by the components in the app. The graph updating takes up some CPU power, and it gets slower and slower as the graph contains more and more data points.
Comment by Doug McCune — June 3, 2007 #
What i know about it, is that the Flash player can only go to the next frame after it has completed all actions on the current frame.
Greetz Erik
Comment by Erik Westra — June 3, 2007 #
Okay now excuse me for I’m considered a rather newbie flasher.
My first guess is
1) your framerate is set too high and cpu cannot cope
2nd guess is
2) your cpu cannot cope because it is being restricted from doing so.
Most browsers (firefox being one of the major offenders) restrict processing time to its plugins. Its a major pain, but nothing much you can do. At least, if you do figure something out, do let me know yeh? Kudos mate.
Hope I helped.
Comment by Dazzer — June 3, 2007 #
Flash Player and Framerate Inconsistencies Between Browsers…
Mims Wright over at dispatchEvent has a post about inconsistent framerates in the Flash Player and different browsers. He’s got some sample code and results for people to try out. Tinic Uro addressed this back before Player 9 was released, and hi…
Trackback by Ryan Stewart - Rich Internet Application Mountaineer — June 3, 2007 #
Thanks for all the responses guys. I’d like to also post Gabriel’s post here (which he emailed to me).
hey mims,
i ran your test files on my linux laptop (a dell with a 2ghz
processor, 1 gig ram running debian) and got fairly consistent
results.
on my firefox (fps don’t show on the browser because of the default
font is not being available on my machine, but you can see on the
console to the left the traces):
http://ranchonotorious.org/gabriel/mims/debian_iceweasel.png
the bumps on the framerate coincide to my bringing up the small prompt
to call the screenshot program.
and, for your collection of screenshots, a couple of screenshots of IE
6 and 5 (running over wine), which perform only very slightly
better(!):
http://ranchonotorious.org/gabriel/mims/debian_ie5.png
http://ranchonotorious.org/gabriel/mims/debian_ie6.png
i know this has absolutely nothing to do, but this made me remember a
long time ago when i worked making cheesy casino banners that there
was a limit per browser on gif animation rates. if i ran the gif on
a graphics program (i don’t remember which was it.. ), i could get it
to run as fast as my computer would go, but on browsers, i could only
get it to run up to a max frame rate. I know nothing of each
browsers’ inner mechanics, but i think that your bottleneck/weird
differences in fps could be caused by them, not by the player itself.
–
gabriel montagné láscaris comneno
Comment by Mims Wright — June 3, 2007 #
So it sounds like the ultimate answer is that the browsers (especially Firefox) are throttling the processor bandwidth of the Flash Player causing the inconsistencies and slowness. The bad news is, there doesn’t seem to be much that can be done about this. The good news is, there probably wasn’t a problem with my code. :D
However, since I was able to exceed 24fps by setting the frameRate to 60 or 100, it might be possible to automatically increase the frame rate until the desired framerate is reached.
I imagine this will require some kind of process control algorithm . I’ll post again if I make any progress.
Comment by Mims Wright — June 3, 2007 #
Browsers definitely differ in how frequently they let plugins access the processor. Further, such implementation details are rarely described in documentation. Longtime issue; little resolution.
Safari is very interesting, in that it chokes off plugins in pages in background tabs… links here:
http://weblogs.macromedia.com/jd/archives/2007/02/browser_cycles.cfm
We can’t predict the processor we run on, and we can’t predict what else will be competing for that processor during rendering. If you’d like to try for one hundred redraws per second (100 fps), then you certainly can, but if you’d like to make sure all machines play at the same speed, then choosing maybe a dozen or two redraws per second gets more predictable.
jd/adobe
Comment by John Dowdell — June 3, 2007 #
another comment that was emailed to me, this one from Deepa at Adobe
Tinic’s blog entry that Ryan referred to in the comments section explains the crux of the issue in nice, clear, Tinic prose. OS’s handle timeslicing differently and browsers add their own processing overhead (as well as garbage collection in the release/debug players and debug processing in the debug player) that all result in major frame rate undulation.
Nice app, btw.
Comment by Mims Wright — June 4, 2007 #
Hey Mims,
If you are looking for a stable framerate, this workaround by Andre Michelle has done quite nicely for me:
http://blog.andre-michelle.com/2006/stable-fps-test/
The only downfall is that simply running that with eat up some CPU…
Comment by Todd Anderson — June 4, 2007 #
It has to do with how the plugins/browser access the system clock. I found firefox giving consistently lower FPS than IE. Setting the wmode parameter in the html file to ‘opaque’ fixed this issue for the most part.
Comment by Joel — June 5, 2007 #
the flash player for the mac is notoriously slow. pretty much useless for any complex animation.
Comment by John — June 25, 2007 #
can someone go into more detail with setting the wmode parameter in the html file? I’m sort of new and don’t understand. thanks
Comment by nate — February 1, 2008 #