Home >
Using Flex Builder 3's built in profiler is great but sometimes you need to do your profiling on a live site. What if you are still developing and need to debug at the same time as you profile? For a long time having a FPS counter (something not available in the Flex Builder's profiler) has always been part of my personal Flash development toolkit. Recently I was looking for something that would display FPS and Memory to help me closely monitor the performance of my application as I developed. That is when I came across Hi-ReS! Stats by Mr Doob.
Hi-ReS! Stats displays:
- FPS- Frames per second, and allows you to increment your application's FPS by +1 (after each click) to test increasing performance at runtime.
- MS - The milliseconds needed to render a frame.
- MEM - The amount of memory being used.
- MAX - The maximum memory your application has used.
This class is extremely easy to use. Simply download the ActionScript file from here (on Google Code). Once you have the Stats class in your project, use the following code to set it up:
addChild( new Stats() );
It couldn't be any easier to set up. Also, you can change the colors by doing this:
addChild( new Stats( { bg: 0x202020, fps: 0xC0C0C0, ms: 0x505050, mem: 0x707070, memmax: 0xA0A0A0 } ) );
A class like this is crucial to building optimized ActionScript applications and could be a great help in runtime profiling of ActionScript/Flex/AIR projects.
Tag Cloud
Podcasts & Screencasts
@InsideRIA on Twitter
Follow InsideRIA on Twitter
Facebook Application Development
Looks really great. Thanks for this! It will definitly come in handy.
Good find Jesse. I was always curious where to find that HUD - but then wold forget to look for it.
Great idea, that will be very usefull in my AIR app.
Thanks
Cheers for this, looks very useful! I'll give it a go on one of my projects tonight.
What I'm doing wrong?
In my Flex app I call applicationComplete method where I use addChild(new Stats()) and I get an error:
Type Coercion failed: cannot convert net.hires.debug::Stats@1e7071f1 to mx.core.IUIComponent.
Can you help me to run this stats?
Thanks
Hey UszatkOS, I am not 100% sure what your issue may be. It has been a while since I used Flex. I would imaging you should be able to just call addChild(new Stats()) anywhere in your code outside of the applicationComplete to get it to work. Seeing how this actually needs to sit at the top of your display list I would probably put it right after you finish drawing all of the displays of your application.
If you want to publish your swf and enable source preview I can get a better idea of what is going on.
UszatkOS,
Try creating a UIComponent instance then add Stats to it before adding it to the display.
In otherwords,
var ui:UIComponent = new UIComponent();
ui.addChild(new Stats());
addChild(ui);
Thanks for all answers. I'm sorry, I was offline for a few days, but I can test your ideas now.
Don-Duong Quach code was almost perfect. It works but we must set UIComponent width and height - without this he don't see stats.
var ui:UIComponent = new UIComponent();
ui.width = 70;
ui.height = 100;
ui.addChild(new Stats());
addChild(ui);
I run this code in my function onApplicationComplete() and it works perfect!
Thank you for your help.
Another way that I found is adding Stats object to 'stage' on applicationComplete event. Like:
function onAppComplete(): void {
this.stage.addChild(new Stats());
}
Actually, you can have this adding line in anywhere as long as stage object is available. (see my blog: http://idlesun.wordpress.com/2008/10/09/when-the-stage-is-available/)