Gravity in Games

Very often, when making a game in Flash, you will need to create some artificial gravity so that things just fall down like in real life. That's why, it's good to have the knowledge of how to create one. In this tutorial, I'm going to take you through the process of creating a simple game in which an saucer is influenced by gravity.

To add some more charm to the code, I'm going to use some of the real physical equations, although we can pretty much do without them.

This is what you will be able to create by the end of this tutorial:

As you can see, the above example of gravity is rather unreal. We could say that this is probably not the gravity of Earth, but of some other planet, like Mars. :-)

If you're interested in creating more natural gravity, all you have to do is increase one variable in the code you can find below. I'm going to show you which shortly.

However, bear in mind that this "slow" kind of gravity is more desirable for games - we want our saucer to gather speed slowly, right?



Let's get start!

i. Create a new Flash document, 550*400 px, 20 fps.

ii. Draw a saucer, airplane or anything else you can think of. After that, convert it into a symbol by selecting it and pressing F8. Don't worry about the Name of the symbol - you can it whatever you like. However, make sure that your symbol is a Movieclip.

Also, if you're interested in learning to draw in Flash, these cheap video tutorials are ideal for you.

iii. With your Text Tool (T), create a "start" text in the bottom left corner. Convert the text to a Movieclip and given it an instance name of restart. This is going to be the button that restarts the our little game..

 

iv. Select your object and press F9. If you did that, an Actionscript window will appear before your eyes. Copy and paste the following code in it:

onClipEvent (load) {

acc = 9.8;
time = 0;

fps = 20;

}

onClipEvent (enterFrame) {

time = time+1/fps;

this._y += Math.pow(time, 2)*acc;

_root.restart.onPress = function() {

_root.aircraft._y = -50;

time = 0;

};

}

The game should work like dream.

If the code seems unclear to you, read below!


Explanation of the code

If you know the basics of ActionScipt, you (will) understand the code in no time. Heck, even if you can't make neither head nor tail of this code, I'm sure this state of affairs won't stay for long!

onClipEvent (load) {

acc = 9.8;

time = 0;

fps = 20;

}

In the first line we use an onClipEvent handler. What is characteristic of this particular handler is it is executed only once, when the Movieclip is loaded.

Within the handler, we declare three variables: acc, time and fps .

acc - our acceleration. No, this is no coincidence that it is 9.8 - as we know, 9.8 m/s2 is the acceleration due to gravity at the Earth's surface.

TIP: Increase the acc variable up to some 70 to receive gravity that is more like the one we've got here on Earth.

 

time - pretty self-explenatory: the time that has passed in seconds.

fps - frames per second. If you haven't set your fps to 20, do it now, or adjust this variable so that it matches your fps.

onClipEvent (enterFrame) {

time = time+1/fps;

this._y += Math.pow(time, 2)*acc;

_root.restart.onPress = function() {

_root.aircraft._y = -50;

time = 0;

};

}

 

And here goes another onClipEvent handler. This time it's different, though: it executes the code every frame. That means that the code that is within the handler is executed 20 times every second.

Let's now have a look at the code itself:

 

time += 1/fps

The time variable is increased by time+1/fps. If we equate fps to 20, we will find out that the variable time is increased by 1/20. Yes, that means that this variable is increased by 1 every second.

this._y += (Math.pow(time, 2)*acc/2;

This line of code is responsible for the downward movement of our saucer. It simply says that the aircraft's y coordinate will be increased by the variable time raised to the power of 2, multiplied by the variable acc, and finally diveded by 2. As might be able to see, this equation is in fact our well-known s=at2/2.



Restarting the game

 

_root.restart.onPress = function() {

_root.aircraft._y = -50;

time = 0;

};

The last few lines of code are about restarting the game. Let's see how they work step by step:

_root.restart.onPress = function() {

We say that, if pressed, we want the object called restart, which is on the main Timeline (_root), to do a function...

 

_root.aircraft._y = -50;

time = 0;

 

 

Alright, thanks for reading. I hope this piece of information turned out helpful. Don't forget to see other tutorials.

Cheers!