Creating a Flash platform game with Flixel and Flex - Getting Started

PLAY THE DEMO

DOWNLOAD THE SOURCE CODE

TUTORIAL INDEX

Flixel is a popular game engine for Flash and Flex that allows you to easily create Flash games. It was created by Adam Atomic, and has been used as the basis of a number of popular Flash games. The Flixel website includes a number of games that were built using Flixel engine.

This tutorial series will step you through the process of creating a simple game using Flex and Flixel. This will be much easier with Flex Builder, so if you don’t have a copy grab a 30 day demo from the Adobe Website.

The first step is to download the Flixel library. The code is hosted on GitHub. Download the Flixel archive and extract it to a convenient location.

Next, create a new Flex project in Flex Builder. You need to point to the extracted Flixel files in the Flex Build Path.

The usual starting point for a new Flex application is the MXML file.

Here we have defined a Flex application that has the dimensions of 640x480, and where the appComplete function is called once the application has initialised.

Inside a Script element we have added the appComplete function. In here we create a new instance of the class FlixelGame, which has been passed to the constructor of a new DisplayObjectUIComponent instance, which is then added as a child of the MXML Application object. We have to use the intermediary class DisplayObjectUIComponent because Flixel objects are based on the Flash Sprite class, which cannot be added as a child of the MXML Application object. Despite the fact that the addChild function takes a DisplayObject as a parameter, an exception will be thrown at runtime if the object supplied to the addChild function object does not extend the UIComponent class. The DisplayObjectUIComponent allows us to work around this because it extends the UIComponent class, but then adds a DisplayObject as its own child.

package
{
 import flash.display.DisplayObject;
 
 import mx.core.UIComponent;
 
 public class DisplayObjectUIComponent extends UIComponent
 {
  public function DisplayObjectUIComponent(sprite:DisplayObject)
  {
      super ();
  
      explicitHeight = sprite.height;
      explicitWidth = sprite.width;
  
      addChild (sprite);
  }
 }
}

The FlixelGame class extends the FlxGame class, and is where we start our game. Most of the Flixel demos use a class like FlixelGame as the application entry point (i.e. no MXML file), but Flex Builder makes developing an application without an MXML file a pain, so we will save ourselves some trouble and just use the MXML file.

package 
{
 import org.flixel.*;

 public class FlixelGame extends FlxGame
 {
  public function FlixelGame():void
  {
   super(320, 240, MenuState, 2, 0xff131c1b, true, 0xff729954);
   help("Jump", "Shoot", "Nothing");
   useDefaultVolumeControls(true);
  }
 }
}

The FlixelGame class is very simple. We first call the FlxGame constructor through, and initialise the games properties.

The first two parameters are the dimensions of the game, which are set to 320x240. You may notice that this is half of the size of the MXML Application. This is deliberate, because the next parameter is the zoom, which is set to 2. This means that every pixel from our source images will actually be displayed as 4 pixels on the screen (2 vertically and 2 horizontally). This scaling deliberately gives the game a very pixelated look, which is reminiscent of the old 8 bit consoles.

The next parameter, MenuState, is a reference to a class that will be created as the initial state. Just like Flex itself, Flixel can switch between a number of states, like a menu state, a game state, a victory state etc. The MenuState class will be created later to display the initial menu that the player will see.

The next parameter is the background colour, in hexadecimal format (similar to HTML colour codes).

The next parameter, true, tells the FlxGame object to display the default Flixel intro. The final parameter defines that colour the Flixel logo in the intro fades to.

The help function defines the actions of some standard keys. The X, C and arrow keys are standard keys in Flixel, although you can respond to other keypresses. The help function lets you assign some simple instructions that relate to these keys.

Finally we call useDefaultVolumeControls and pass it true as the parameter. This tells Flixel that we want to use the default controls for modifying the volume.

The final class in this demo is the MenuState class. This represents the menu state in the game. By extending the FlxState class we inherit the Flixel state functionality.

package
{
 import org.flixel.FlxSprite;
 import org.flixel.FlxState;
 
 public class MenuState extends FlxState
 {
  [Embed(source="../media/title.png")]
  protected var TitleImage:Class;
  
  public function MenuState()
  {
   this.add(new FlxSprite(TitleImage));
  }
 }
}

As you can see there is not much happening here. We embed an image to be displayed as the background, and then pass a new instance of this embedded image to the FlxSprite constructor, which is then added to the state through the add function.

When you run the game you will see the Flixel intro, and then the game will switch to the menu state. What isn’t immediately obvious is some of the built in functionality that Flixel provides. If you press the plus and minus keys, a volume display will pop up on the screen and you can modify the master volume. Also, if you click off the Flash application the game will pause, and a help screen will display the functions of the standard keys. The text that is display is what we set in the FlixelGame constructor with the help function.

In the next tutorial we will start building the actual platform game.