16 October 2010

Discrete versus continual graphical AS3 Timer

Some Flash games require level timers. If mission is not complete when timer runs out, hero is dead. Usually you have two types of timers, numerical level timer and graphical timer.

On the other hand, graphical timer can be discrete or continual. Actually all graphical timers are discrete, when you think about it, just updates happen more frequently and user sees it like continual.

Here is how to create both discrete and continual graphic timers.

step 1.

First we set up some background color.


// background elements

var b1:Sprite = new Sprite();
b1.graphics.beginFill(0x33cc33);
b1.graphics.drawRect(0,0,stage.stageWidth,20);
addChild(b1);

var b2:Sprite = new Sprite();
b2.graphics.beginFill(0x33cc33);
b2.graphics.drawRect(0,25,stage.stageWidth,20);
addChild(b2);


step 2.

We write our discrete timer. Here is complete function.


function gTimer(seconds:int):void
{
var t:Timer = new Timer(1000, seconds);

var w:Number = stage.stageWidth;
var h:Number = 20;
var g:Sprite = new Sprite();
addChild(g);

t.addEventListener(TimerEvent.TIMER, onTimer);
function onTimer(evt:Event):void
{
var cc:int = evt.target.currentCount;
var gWidth:Number = (cc * w)/seconds;
g.graphics.beginFill(0x339933);
g.graphics.drawRect(0, 0, gWidth, h);
}
t.start();
}


Why this timer is 'discrete'? Because graphic update happens once every 1000 milliseconds. We see graphic change in distinct time intervals of one second.

Code is simple, only thing worth explanation is gWidth variable which is just proportion used to calculate current timer width.

step 3.

We write our continual timer. Here is complete function.


function cgTimer(seconds:int):void
{
var t:Timer = new Timer(50, seconds*20);

var w:Number = stage.stageWidth;
var h:Number = 20;
var g:Sprite = new Sprite();
addChild(g);

t.addEventListener(TimerEvent.TIMER, onTimer);
function onTimer(evt:Event):void
{
var cc:int = evt.target.currentCount;
var gWidth:Number = (cc * w)/(seconds * 20);
g.graphics.beginFill(0x339933);
g.graphics.drawRect(0, 25, gWidth, h);
}
t.start();
}


Code is exactly the same as in discrete graphical timer, with one minor change. Timer is called every 50 milliseconds and because those time intervals are so small, user sees this timer as continual one.

step 4.

We test our timers.

gTimer(24);
cgTimer(24);

Now, take your stopwatch and you will see that even both timers start in approximately the same time, discrete timer will finish first and both timers will finish after more than 24 seconds, discrete one in about 25,5 seconds and continual one almost 2 seconds later (at least on my computer).

This is not some error. Continual timer makes a lot more calculations than discrete one, hence difference. Just something you should be aware of when making games.

*_*

5 comments:

katrina ramos said...

Hey Flanture! Can you help me find a website where I could upload my swf file for free? cause I want to change my header in blogspot into a flash. Ive been looking for a site for quite some time now and still couldn't get one for free :( googlepages has moved to google site and dont know how to run it. I'll be waiting to your responce. Thank you!!!

flanture said...

Hey Katrina, try shareswf.com I use them right now.

katrina ramos :) said...

Hey Flanture! I haven't tried it yet but thank you! I'm new to flash, by the way. I've stumbled upon your site when I was looking for tutorials... i wish I could be as creative as you are. Anyway, I"ll let you know if it works. Thank you! :)

Andreas said...

While the background displays as it should, on event the timers are nonexistant to me, do I need to change some values with the code in step 4, gTimer(24);
cgTimer(24);?

It's a bit vague..

flanture said...

Andreas, it seems your problem is specific, contact me via email with your example, please

 

template by blogger templates