Gamemaking for beginners: The Gameloop
When I started off making games in Flash, I didn’t yet realize the significance of having a gameloop. Now, it’s the first thing I implement when making a game.
What is a gameloop? It is a continuous loop that runs in the background of a game and basically runs the whole show. In this tutorial, we will implement a gameloop that controls the motion of ‘enemies’ across the screen.
Step 1
Create a new flash file, click modify>document and select a stage size of 600 x 800 and set the frame rate to 35 fps. This means that the display will be updated at a rate of 35 times per second, which will make the motion within our game look smooth to the human eye. Lower than 35 can cause game motion to be jerky and a higher rate will only cause the game to run slower.
Step 2
Let’s create an enemy. Draw anything you like, and save it as a movieclip with the name ‘enemy’. Make sure that you set the linkage settings as below, and make sure you do NOT have an instance of the enemy on the screen, only in the library.
Rather than have the enemy on the screen when we begin the game, we will create the enemies from the library as we go along. To do this, the linkage settings must be as above.
Step 3
Now let’s get some coding done. We want a gameloop that will update the main features of the game at the frame rate (frames displayed per second, which we have set to 35). Here is how we do it:
addEventListener(Event.ENTER_FRAME,gameloop);
function gameloop(event:Event) {
}//gameloop
First we add a listener, which ‘listens’ out for the frame being updated (or ‘entered’), and then we tie in a function to the listener. Anything within the curly brackets will occur 35 times per second. Let’s add a trace and try it out:
addEventListener(Event.ENTER_FRAME,gameloop);
function gameloop(event:Event) {
trace(“gameloop”);
}//gameloop
Run the flash movie by pressing CTRL+ENTER and you should see “gameloop” being output at a rate of 35 times per second. We want to use the gameloop to control the motion of our game enemies, but first we need to display our enemies on the screen.
Step 4
We have a movieclip class ‘enemy’ in the library and we wish to add it to the screen. Here is how we do it. Add this line of code OUTSIDE the gameloop:
var enemy1 =this.addChild(new enemy());
We have cloned a ‘child’ of the movieclip in the library and placed it on the screen. You should see your enemy in the top left corner of the screen. Since we haven’t specified where we want it to go, Flash automatically sets the x and y coordinates to 0.
Now, a game is no good with just one enemy. We want to have ten enemies on the screen at one time. Rather than repeat the code above ten times, we’ll run a loop. Replace the code above with the following:
for(var i=1;i<11;i++){this["enemy"+i] =this.addChild(new enemy());}
Now we have 10 enemies on the screen, but it looks like we only have one, because they are stacked on top of each other. Let’s spread them out by giving them randomized positions on the screen. Change the code to the following:
for(var i=1;i<11;i++){this["enemy"+i] =this.addChild(new enemy());
this["enemy"+i].x=Math.random()*800;this["enemy"+i].y=Math.random()*600;}
How does the above code work? Math.random() generates a random number between 0 and 1. By multiplying this number by 800 (the screen width), we get a random number between 0 and 800.
Step 5
Now we have placed the enemies on the screen, we want to add motion. What we will do is to place a function within the enemy movie clip and run this function using the game loop. Are you ready?
Double click on the enemy movie clip in the library and add these two lines of code to the timeline:
var speed=2;
function loop(){this._x-=speed;}
Make sure you are in the timeline for the movieclip. What you see should look something like this:
Basically, what we have done is define a speed for the enemy. Since we are going to run the function 35 times per second, a speed of 2 means the clips will move 70 pixels per second and will take about 12 seconds to cross the screen (which we set at 800 pixels). But nothing happens yet if you run the movie, because we need to call the loop function from the game loop on the main timeline.
Go back to the main timeline and update the game loop like so:
function gameloop(event:Event) {
for (var ii=1;ii<11;ii++){this["enemy"+ii].loop();}
}//gameloop
We are telling Flash to run the loop() function within enemy1, enemy2, enemy3 etc, which will move our enemies across the screen. Try it and see if it works.
Is it working? Good. Let’s do a couple more things. Why don’t we give the enemies random speeds? In the enemy movie clip, change the speed to:
var speed=(Math.random()*8)+1;
(We add 1 because we don’t want any enemies to have a speed of 0.)
Lastly, we don’t want our enemies to disappear off the screen and be gone forever. We can make it so they keep coming and reenter the screen from the other side. In the enemy behavior loop, add an if-statement:
function loop(){this.x-=speed; if(this.x<-40){this.x=800;}}
This tells Flash that if the movie script is off the screen to the left, replace it to the right of the screen. I used the number -40, because my enemy had a width of 40 pixels and at -40 it would be just off the edge of the screen.
So there we go; that’s how to write a simple game loop and use it to control enemy motion, all in less than ten lines of code and the size of the flash movie is approximately 1K.
The next step is to add a hero, control the hero’s motion and make the hero die if he hits an enemy. All that is for another day, though. I hope you enjoyed the tutorial and be sure to check out some of my own games on Flashbynight.com