EnableFramerateCounter, Setting your Framerate correctly

Debug tool
I posted about EnableFramerateCounter before — it is a simple little debugging setting that you can use when trying to figure out:

  1. Which of these designs hurts my framerate more?

  2. If I add this module in, does it hurt my framerate?

To figure these out, you can:

  1. Set the plugin’s desired framerate at 1000 (silverlightObject.settings.MaxFrameRate OR Silverlight.CreateObjectEx({properties:{framerate:’framerate‘}}))

  2. Turn on the EnableFramerateCounter, which should show up in the status bar (IE/Firefox –> View –> Status Bar).

Desired Framerates
Make sure to reset the framerate to the suggested framerates for your app: Media apps @60fps or RIA/Control apps @20fps before launching your app to the public.
When trying to figure out the desired framerate of an animation or control-heavy app, use real people (not developers/designers) to gauge whether increasing the fps above 20fps makes sense. If you set your framerate at an unnecessarily high value, it will throttle the computer’s cycles — and could result in a jerkier effect than if you just had a lower framerate. So where 60fps might be slick and easy for your devbox, it could be a pain for your customer’s machine — so only use what you need.

The desired framerate of plugin hosting media is always 60fps — this gives the media pipeline the most number of ticks to figure out the optimal timing of presenting a frame. Silverlight will decode at the framerate of the encoded video (this usually is <32fps), and we present the frames in sync with the audio. To summarize roughly, if the platform doesn’t receive a tick in sync with the audio, then the platform will decode the frame, and then just throw it away. If you don’t understand this, just trust me and use framerate=60.

Technically, you could set the framerate dynamically — I haven’t tried this, but it might be a useful thing to try out if your app has both media and heavy controls/animations.

Debugging Settings

So here are the debugging settings that I use (not all at once, of course)


     source: “xaml/Scene.xaml”,

     parentElement: document.getElementById(“SilverlightControlHost”),

     id: “SilverlightControl”,

     properties: {

          width: “500”, height: “500”,

          isWindowless: false,   

          background: “FF000000”,

          framerate: 10000      },

     events: { onLoad:onLoadHandler} });


function onLoadHandler() {

     agControl = document.getElementById(“SilverlightControl”);

     /* To see the framerate displayed in the browser status bar */

     agControl.settings.EnableFrameRateCounter = true;

     /* To see the redraw regions*/

     agControl.settings.EnableRedrawRegions= true;


I accidentally dumped the sugar canister into my tea, time to go home.