Creating “Flux”: A Simple Flash Game With a Gravity Mechanic

In this tutorial, I’ll explain the major steps and workflow for creating a simple space survival game, based on the gravity mechanic explained in a previous tutorial. This game is written in AS3 using FlashDevelop.

---

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.

package
{
 [SWF(width = "550", height = "600")]

 public class Main extends Sprite
 {

 }
}

---

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.
Start by creating an Energy class:

package
 {
  import flash.display.MovieClip;
  import flash.events.Event;

  public class Energy extends MovieClip
  {
   private var rSpeed:Number = 0;

   public function Energy(speed:Number)
   {
    graphics.beginFill(0x321312);
    graphics.drawCircle(0, 0 , 8);

    rSpeed = speed;
   }

   // we will call this every frame
   public function move():void
   {
    this.y += rSpeed;
    //rotation speed is linked to moving speed
    this.rotation += rSpeed / 8;
   }
  }
 }

---

Step 3: The GameScreen Class

This class will eventually control most of the aspects of our game, including the player movement and the game loop.
Create the class:

package
{

 public class GameScreen extends MovieClip
 {

  public function GameScreen()
  {

  }
 }
}

That’s all we need for now.

---

Step 4: Update The Main Class

We’ll now create an instance of GameScreen within Main:
Read more: Creating “Flux”: A Simple Flash Game With a Gravity Mechanic