Add An FPS Display In Your Flash Game
In this tutorial, we will learn how to create a display that overlays your game, indicating the current FPS that your game is running at.
Watch Your FPS
In most of the games here, I asked you to use an FPS of 30, meaning your game loop runs 30 times in a second.
But, that is only a theoretical maximum. If your game loop runs efficient and does lesser than what your computer's processing speed can handle, then it will reach an FPS of 30. What if you are doing a gazillion things within 1 tick of your game loop? Naturally, your computer would not be able to handle it. The result would be that each tick of your game loop takes longer than 1/30 seconds to execute.
If the situation is bad, then you'll probably start to see sluggish movement in your game and unresponsive feedback to your inputs.
Using the FPS Display
The FPS display is a little counter that sits right at the top of your game to show you how many ticks of your game loop is running in one second. Keeping a close watch on your FPS can help you identify inefficient codes, or possible areas of optimisation for your games.
I'd recommend that you keep it up for the entire duration of your testing, and only turn it off when you're deploying your game into the actual server.
You can download the file, FPS_Display.as from here.
Save this file at the same folder as your other fla, or files that you're currently working on.
As an extra, I've also included a display on how much memory your game is currently consuming. This should be a helpful gauge of how hungry your game currently is. :)
How the FPS Display Works
In the game you're working on, you just have to include a line of code in your main fla file, as shown below.
var fpsDisplay = new FPS_Display();
That's all! If you run your game, you should see an FPS display on the top left hand corner of your screen.
What goes on inside the FPS Display
Now, let's do a quick run through of the codes that power the FPS Display.
public function FPS_Display()
counterDisplay = new TextField();
counterDisplay.textColor = 0x00FF00;
counterDisplay.background = false;
counterDisplay.height = 50;
var theTimer:Timer = new Timer(1000, 0);
//Disable mouse interaction with the FPS display
this.mouseEnabled = false;
this.mouseChildren = false;
private function updateFPSDisplay(evt:Event):void
private function onTimerEvent(evt:Event):void
counterDisplay.text='FPS : '+ counter.toFixed(1)+
'\nMemory : '+(System.totalMemory/1024);
In lines 10 to 12, we make use of a special class in Flash called the Timer. What it basically does is to execute a function once every x milliseconds. In our example here, x is 1000 milliseconds, i.e. 1 second. The function that we want executed is onTimerEvent.
Then in line 14, we listen to the ENTER_FRAME event as well, so that for every one tick of your game loop, the internal variable counter is increamented by 1 via the function updateFPSDisplay.
The nett effect of these two is such that the variable counter monitors how many ticks your game loop runs, and the timer will check this variable once a second to see how many ticks have occurred. Essentially, this counts the number of frames that have run per second.
Line 16 and 17 disables the FPS Display from any mouse click events. This is necessary because the FPS display is overlayed on game. If you didn't code in these 2 lines, it may unwillingly trap your mouse clicks when you click over the area that is overlayed by the FPS Display.
FPS Display Completed
And that's all. You can download this package to see how the FPS Calculator is used with the game you did in Tutorial 1 here.