Custom timing technique and optimization with setInterval

If you are making your logo that will be incorporated in many different flash games, or if you want to optimize your flash game or movie, setInterval function is your friend. Not only can you play your clips independent of the given frame rate, you also can optimize which objects on screen are more important so you can give them more processor time than unimportant ones. Let’s begin.

Imagine we made a logo and created a little animation method that dims our logo every frame so it disappears and reappears at different place. You would use this actionscript code.

initGame();

function initGame() {
	alphaDirection = false;
	attachMovie("logoMC","logo",1);
	// call every frame
	onEnterFrame = changeLogo;
}

// method for changing our logo
function changeLogo() {
	// change alpha value
	if(alphaDirection == false)
		logo._alpha -= 10;
	else
		logo._alpha += 10;
		
	// change position
	if(logo._alpha <= 0) {
		logo._x = Math.random()*(200 - logo._width);
		logo._y = Math.random()*(200 - logo._height);
		alphaDirection = !alphaDirection;
	} else if (logo._alpha >= 100)
		alphaDirection = !alphaDirection;
}

We want it to be visible just enough so the user can click on the logo (I used our ArtCode Games logo :).

But in the second example imagine developer used 60 fps so the user can’t click on the logo because it’s too fast. What to do then? Do we tell the developers at what fps to make their game? No the solution is in setInterval function.

What is this setInterval function?

intervalID = setInterval( method_to_execute, milliseconds );

Basically it works like execute method_to_execute every n milliseconds. It returns ID of the interval which we can remember or not. If we remember it we can remove this interval using clearInterval method.

clearInterval( intervalID );

And that is enough to fix our previous example. Using setInterval function we can separate display of our logo from frame rate or the game. The code goes like this.

initGame();

function initGame() {
	alphaDirection = false;
	attachMovie("logoMC","logo",1);
	// call every 40 milliseconds
	setInterval(changeLogo,40);
}

// method for changing our logo
function changeLogo() {
	// change alpha value
	if(alphaDirection == false)
		logo._alpha -= 10;
	else
		logo._alpha += 10;
		
	// change position
	if(logo._alpha <= 0) {
		logo._x = Math.random()*(200 - logo._width);
		logo._y = Math.random()*(200 - logo._height);
		alphaDirection = !alphaDirection;
	} else if (logo._alpha >= 100)
		alphaDirection = !alphaDirection;
}

If you check the frame rate it is the same as before, but the logo changes the same speed. That is because the function in both movies is called every 40 milliseconds, that is 25 times every second. So that means our logo constantly has frame rate of 25 fps.

How to optimize?

Imagine you are making a game with hundreds of objects on stage. You can already see the frame rate dropping. The most expensive action in flash is moving things around every frame. So if we decide which objects are important and which are less important, we are already on our way of optimizing our game. If we separate moving methods from the flash frame rate using setInterval as described before, we can control how often flash updates position of our objects. Less important objects will be updated less frequently than the important ones. Let’s see it on an example.

We are going to make a game with four different objects, sun, tree, bush and a beach ball. Sun moves really slowly so we can update his position infrequently, let’s say every second. Tree moves a little bit faster so we update his position more frequently, say five times in a second. Bush is almost in the front, so we update it regularly. And our hero, the beach ball, is updated regularly 30 times in second, because it is the most important object in the game.

This way we saved around 60 expensive function calls in one second. If you place 50 different objects like this on your stage you save 3000 expensive function calls in a second that you can use for something else. Let’s see the code.

initGame();

function initGame() {
	// attachMovie depth
	sunDepth = 1;
	treeDepth = 2;
	shrubDepth = 3;
	heroDepth = 4;
	
	// moving speed of object
	sunSpeed = 1;
	treeSpeed = 1.5;
	shrubSpeed = 2.5;
	heroSpeed = 2;
	
	// how often we update
	// position in milliseconds
	sunTick = 1000;
	treeTick = 200;
	shrubTick = 62;
	heroTick = 40;
	
	// attach objects to stage
	attachMovie("sun","sun",sunDepth);
	sun._x = 480;
	sun._y = 120;
	attachMovie("tree","tree",treeDepth);
	tree._x = 480;
	tree._y = 200;
	attachMovie("shrub","shrub",shrubDepth);
	shrub._x = 480;
	shrub._y = 330;
	attachMovie("hero","hero",heroDepth);
	hero._x = 270;
	hero._y = 355;
	
	// setup our magic
	setInterval(moveSun,sunTick);
	setInterval(moveTree,treeTick);
	setInterval(moveShrub,shrubTick);
	setInterval(moveHero,heroTick);
	
}

/********************************************
	Methods for moving objects on the stage
	Every object has his own method
*********************************************/
function moveSun() {
	sun._x -= sunSpeed;
	if(sun._x < -sun._width/2)
		sun._x = Stage.width + sun._width/2;
}

function moveTree() {
	tree._x -= treeSpeed;
	if(tree._x < -tree._width/2)
		tree._x = Stage.width + tree._width/2;
}

function moveShrub() {
	shrub._x -= shrubSpeed;
	if(shrub._x < -shrub._width/2)
		shrub._x = Stage.width + shrub._width/2;
}

function moveHero() {
	hero._rotation += heroSpeed;
}

Method setInterval as you can see calls moving functions every n specified milliseconds. We define milliseconds as ticks (sunTick, treeTick, shrubTick, heroTick), so for example method “moveTree” will be called every 200 milliseconds that are 5 times in a second (which has 1000 milliseconds). Notice that I calculate not in frame rates but in seconds. Using milliseconds gets easy that way. That’s it.

Thanks for reading my tutorial here at ArtCode Games.