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.