untoldentertainment.com » Tutorial: Building a Flash/AS3 FPS ( frames per second) counter

Home > Blog > Tutorial: Building a Flash/AS3 FPS ( frames per second) counter

Tutorial: Building a Flash/AS3 FPS ( frames per second) counter

by jeff, April 9, 2009

Often when building games or other graphically complex flash applications it is important to gauge performance on different systems or in different browsers. Flash Player has no built in way to do this other than to eyeball the resulting playback and make a guess. Fortunately with some simple calculations this can be solved.

Here Comes the Code

Here is the code for a simple FPS counter I have created by extending the TextField class.

package 
{
	import flash.display.Stage;
	import flash.events. *;
	import flash.text.TextField;
	import flash.text.TextFieldAutoSize;
	import flash.utils.getTimer;
	//
	public class FPSCounter extends TextField
	{
		private var fontSize : Number; //the font size for the field
 
		private var lastUpdate : Number; // the results of getTimer() from the last update
 
		private var frameCount : Number; //stores the count of frames passed this second
 
		private static const UPDATE_INTERVAL : Number = 1000; //the interval at which the frame count will be be posted
 
		public function FPSCounter (textColor : Number = 0xFF0000, fontSize : Number = 25) : void
		{
			this.textColor = textColor;
			this.fontSize = fontSize;
 
			//set the field to autosize from the left
			autoSize = TextFieldAutoSize.LEFT;
 
			//make the text unselecteable and disable mouse events
			selectable = false;
			mouseEnabled = false;
 
			addEventListener (Event.ADDED_TO_STAGE, setFPSUpdate);
			addEventListener (Event.REMOVED_FROM_STAGE, clearFPSUpdate);
		}
 
		//called when the instance is added to a Display Object
		private function setFPSUpdate (event : Event) : void
		{
			addEventListener (Event.ENTER_FRAME, updateFPS);
			frameCount = 0;
			updateText (frameCount);
			lastUpdate = getTimer ();
		}
 
		//called when the instance is removed from a Display Object
		private function clearFPSUpdate (event : Event) : void
		{
			removeEventListener (Event.ENTER_FRAME, updateFPS);
		}
 
		//update the frame counter
		private function updateFPS (event : Event) : void
		{
			//get the current time and increment the frame counter
			var currentTime : Number = getTimer ();
			frameCount ++;
 
			//post the frame count if more then a second has passed
			if (currentTime &gt;= lastUpdate + UPDATE_INTERVAL)
			{
				lastUpdate = currentTime;
				updateText (frameCount);
				frameCount = 0;
			}
		}
 
		//update the display text
		private function updateText (frameNum : Number) : void 
		{
			htmlText = "<b></b><font size='" + fontSize + "'>" + frameNum + " fps</font></b>";
		}
 
	}
}

note: The Actionscript code plugin we’re using above has a bug where greater than/less than (pointy bracket) symbols are not rendered properly. Watch for & gt; and & lt; in the code above and replace them with the proper symbols.

To use the class simply create a instance of it and add it to the stage.

var fpsCounter : FPSCounter = new FPSCounter();
addChild( fpsCounter );

optionally you can set the font color and size as well
var fpsCounter : FPSCounter = new FPSCounter( 0x00FF00 , 50 );

You can download the source code here:

http://www.untoldentertainment.com/blog/tutorials/FPS/fps_tutorial.zip

For more Flash AS3 Tutorials and a pile of other useful stuff, check out our Flash and Actionscript 911 feature.