New Flash Visual Profiler

I frequently use Flex Profiler for my job in order to track slow functions, bad memory usage and other things.

But when it come to diagnose a problem in a project, it’s often hard to tell what’s going wrong “in the screen”. You can use other live performances analyzer like “Hi-ReS” or even MonsterDebugger… But it’s always detached from what’s in the screen!

So I decided to make a Visual Profiler that can help diagnose quickly problem with memory allocation, bad assets re-use, and Garbage Collector Overhead.

*Edit 2010/05/24*
This post was a pre-release of my tool “Flash Preload Profiler”
If you want something more comlpete: Get it here
*End edit*

The tool is VERY simple but quite helpful.
1: Draw a RED rectangle when an assets is added to the stage for the first time, then it add the object to a HUGE (Weak Key) Dictionary containing all object in the scene.
2: Draw a GREEN rectangle when an assets is removed from the stage, set the Dictionary object value to false (removed)
3: Draw a YELLOW rectangle is the sprite is put on the stage but was already in the Dictionary (meaning it’s re-use and hence no memory allocation was done)
4: At each frame, Draw a BLUE rectangle (alpha .25 because it adds up!) for every object in the Dictionary that are “still on the stage” (.stage != null) but their flags is set to “removed from stage”

Here is a good example of what it can look like in a real case:
Custom Shape Particle (3th example)

Before:

After:

In a bad flash application, this is going to blink like a Christmas tree!
The more red you see, the more memory allocation is done, and you can see what is allocating it.

The more yellow you see, the more re-use you are doing!

The last one is tricky. (The blue one)
It looks like it’s possible for a MovieClip to be removed from stage, but to continue playing and to receive events until the GC collect it.
I did a lot of test, and in many cases the result was a lot of blue rectangle waiting for collection.

The flash GC doesn’t guarantee that all “dead” objects will be collected in a single pass. The GC is lazy and safe.
But having those blue rectangle collected almost randomly is really fun to see.

To prove that those assets are still animated, you only have to watch the rectangles move around… And to prove that they are really eligible for collection, you can call the famous LocalConnection GC trick and ALL the blue rectangles will be gone next frame. So when you see blue rectangles, you can assume that some CPU is spent managing, updating, animating thoses assets.

You can add the source-code right into your project but It won’t be very generic and it would be hard to manage.
Instead I added it to my MicroProfiler using the PreloadSWF trick.
This way it can also be use on ANY as3 project (debug or not) on the whole internet!

Everything is on Google Code (Rev. 49), even the “bin/MicroProfiler.swf” for those who don’t want to build it.

Enjoy the colors!

I suggest you take a look at this site with the profiler on.
Most game are very good target too!
If you find interesting example please share them here.