Play the Game

Use the left and right arrow keys to manoeuvre your ship, the up and down arrow keys to increase or reduce the size of the magnetic field it produces, and the space bar to reverse the polarity. Collect the white crystals to increase your fuel supply - but avoid the red ones, because they use it up. Don't hit a rock, or it's game over!

In this tutorial, we won't actually create the full game displayed above; we'll just get started on it, by making a very simple version with primitive graphics and just one type of object. However, by the end, you should have learned enough to be able to add the other features yourself!

The game itself is very simple in its current state - take a look at this critique for tips on how you can take it from a simple demo to a full game!

Let's Get Started!

Set up a new AS3 project in FlashDevelop, and set its dimensions to 550x600px.

Step 1: Identifying the Game Objects

There are six objects in particle that you can identify from playing the game above:

Energy supply - represented by an white oval shape object

Asteroid - represented by a rock-like object

Energy consumer - represented by a red star bounded with green light.

Stars - the background

Range indicator - represented by a white circle

Ship - player object

Of course you can add in any other object to make the game more interactive or add a new feature. For this tutorial we'll just make

Step 2: The Energy Class

From the objects we identified, four of them actually work in exactly the same way: by falling from top to bottom.

They are:

Stars

Energy supply

Energy consumer

Asteroid

In this tutorial, we're only going to make the "energy supply" objects, out of the four above. So let’s begin by creating these objects and making them fall down, with a random spawning position and speed.

Note that we require a reference to the GameScreen to be passed to the constructor, and we store this reference in a private variable. We also set up a Vector to store references to all the energy objects.

So far the class contain no other functions; we will add them in later.

Step 6: Creating Energy

Add the below function for creating energy, this is just a function; we will call the function later from GameScreen Class:

We create a new energy supply with a speed of 4, add it to the display list (via the GameScreen), add it to the Vector of all energy objects that we just created, and set its position to a random point within certain bounds.

The Calculation.generateRandomValue(#, #) is a static function we haven't written yet, so let's do that now. Create a new class called Calculation and add this function:

This function will generate a random number between the two values passed to it. For more information on how it works, see this Quick Tip. Since this is a static function, we don't need to create an instance of Calculation in order to call it.

Now, what's that addEnergyToScreen() function? We haven't defined that yet, so let's do it now. Add this to GameScreen:

So far we should have a few energy supplies falling few seconds, and the player appearing in the middle of the screen:

Step 9: Moving the Player

There are basically two ways to apply movement:

Using Boolean (true/false) values - true = moving, false = not moving. When the right arrow key is pressed, the value for "moving right" will change to true. In each frame update, "moving right" is true, we increase the object's x-value.

Using direct update each frame - when the right arrow key is pressed, an object is told to move right immediately, by increasing its x-value.

The second method does not lead to smooth movement when the key is continuously pressed, but the first method does - so we shall use the first method.

There are three simple steps to doing this:

Create two Boolean variables, one for moving right and one for moving left.

Line 32: note that we pass in a reference to the player, so that we can access its position.

Line 38: EnergyS is short for Energy Supply.

Line 40 & 41: finding the difference in x- and y-coordinates between the player and the energy supply we are currently checking.

Line 43: calculate the distance between the objects via Pythagoras.

Line 45: check for collision; 28 is the sum of the two objects' radii (player radius is 20, energy radius is 8).

Line 46 & 47: remove energy supply from screen and from Vector.

Line 51: add a maximum of one unit of energy per frame.

You could alter Line 51 to energyTransfer += 1, to allow the player to absorb more than one energy object at once. It's up to you - try it out and see how it affects the game.

Step 11: Call Collision Detection Routine

We need to check for collisions every frame, so we should call the function we just wrote from GameScreen.update().

First, we need to create an integer variable to store the energy transfer value from the collision detection function. We'll use this value for increasing the ship's energy and adding to the player's score.

private var returnedPower:int = 0;

returnedPower = energyM.checkCollision(player);

Step 12: Newton's Law of Gravitation

Before we go into creating the game mechanic for the ‘Push’ and ‘Pull’ function of the ship, I would like to introduce the physics concept on which the mechanic is based.

The idea is to attract the object towards the player by means of a force. Newton’s Law of Universal Gravitation gives us a great (and simple) mathematical formula we can use for this, where the force is of course the gravitational force:

G is just a number, and we can set it to whatever we like. Similarly, we can set the masses of each object in the game to any values that we like. Gravity occurs across infinite distances, but in our game, we'll have a cut-off point (denoted by the white circle in the demo from the start of the tutorial).

The two most important things to note about this formula are:

The strength of the force depends on the square of the distance between the two objects (so if the objects are twice as far away, the force is one-quarter as strong).

The direction of the force is along the direct line connecting the two objects through space.

Step 13: Revising Math Concepts

Before we start coding the game mechanics for the 'Push' and 'Pull' function, let's be clear on what we want it to do:

Essentially, we want A (the player) to exert a certain force on B (a crystal), and move B towards A based on that force.

We should revise a few concepts:

Flash works in radians rather than degrees.

Flash's coordinate system has its y-axis reversed: going down means an increase in y.

We can get the angle of the line connecting A to B using Math.atan2(B.y - A.y, B.x - A.x).

We can use trigonometry to figure out how much we need to move B along each axis, based on this angle and the force:

B.x += (Force*Math.cos(angle));

B.y += (Force*Math.sin(angle));

We can use Pythagoras's theorem to figure out the distance between the two objects:

With random alpha, size, position, and speed, a pseudo-3D background can be generated.

Range indicator

A range indicator circle can be made by simply creating another circle and adding it to the ship's display list, just like how you added the power indicator text. Make sure the circle is centred on the ship, and has a radius equal to the ship's push/pull range.

Add transparancy (alpha value) to the circle with the below code:

graphics.beginFill(0xCCCCCC, 0.1);

Try adding extra controls that make the range increase or decrease when the up and down arrow keys are pressed.