Funded with Kickstarter

Getting Started

We previously wrote about the tools we gravitate towards when jamming on games. Today we’re going to walk through bootstrapping a simple game using Flixel, FDT, and Tiled. By the end of this Primer series, we’ll have a playable version of this:

primer-simple.gif

Setup

These first few steps are a one-time thing. We’re going to assume you have some familiarity with ActionScript at this point. Colin Moock’s Essential ActionScript 3.0 is a great way to get up to speed if you’re unfamiliar with the language.

First, download the Flex SDK. Unzip and store in a safe place (don’t leave it in your Downloads folder). Download and install the Flash Player Projector Content Debugger (note that you want the Projector not Plugin). Download and install FDT Free (note that the recommended version is easily overlooked as a header and not a download link). During installation FDT will ask you to find the Flex SDK you just squirreled away. In FDT’s Preferences (FDT 5 > Preferences…) drill down to FDT > Tools > Flash and browse to the debug Flash Player you just installed.

fdt-tools-flash.png

Download and unzip the latest version of Flixel (note that the downloaded file will be a zip file and the name will start with AdamAtomic-flixel-). Finally, download and install Tiled (the download link is on the right below the screenshots).

The remaining steps are necessary every time you want to create a new game. Don’t be overwhelmed, this takes longer to read than to actually do!

Open up FDT and create a new project (File > New > New FDT Project). Enter a project name, choose a location to save the project files, select the Web project type, delete the automatically suggested Default Package, and click the Finish button. Now switch to the Finder and navigate to the project folder you just created with FDT. In a new Finder window, open your Downloads folder. Inside you should have an AdamAtomic-flixel-* folder. Copy its org folder and paste it into your project’s src folder in the other Finder window. You’ve just added Flixel to your project!

fdt-explorer.png

Return to FDT. We called our project Primer so we now have a Primer project in the FDT Explorer palette. If we expand the project and src folder we find a Primer.as file (you should also see the org folder you just copied over in the Finder too). Open Primer.as. Then open Debug Configurations (Run > Debug Configurations…). In the list to the left double-click FDT SWF Application to automatically create a new debug configuration for your new project. Switch to the Start tab and change Viewer to Adobe Flash Player. First click the Apply button. Then the Close button below it.

FDT Gotcha: If the FDT interface ever reconfigures itself (hard to explain, you’ll know it when you see it) you just need to change its Perspective back to Flash FDT (Window > Open Perspective > Flash FDT). One of those “quirks” we mentioned yesterday.

If you run your new project (click the little beetle icon in the top left of the FDT window) a blank white window should open in Flash Player Debugger. Time to talk Flixel!

Flixel

First some high-level, conceptual stuff regarding Flixel and organizing your games, then we’ll dig into some code.

In Flixel, a game is organized into states (or screens). Each state draws sprites and tilemaps (among other things) and responds to user input. You might have a title state that draws the title screen as a sprite and responds to clicks to start a new game. You might have a play state that draws player and enemy sprites, foreground and background tilemaps, and responds to user input allowing the player to explore a huge map. You might have an end state that displays a cutscene made up of many animated sprites.

In Flixel, these concepts are represented by subclasses of the FlxGame, FlxState, FlxSprite, and FlxTilemap classes. Onto the code!

Let’s open Primer.as and extend FlxGame. First replace:

import flash.display.Sprite;

with:

import org.flixel.*;
[SWF(width="480", height="320", backgroundColor="#000000")]

The first line imports the Flixel library (which we’ll begin using very shortly, promise). The second sets the dimensions and default background color of our game. In this example our game will be 240 pixel by 160 pixels scaled 200%.

Now replace:

public class Primer extends Sprite {

with:

public class Primer extends FlxGame {

Inside the Primer() function definition add:

super(240,160,PlayState,2);

This sets our unscaled width and height to 240 pixels by 160 pixels. PlayState is the name of the default state (we’ll create this in a moment). The final argument, 2, sets the scale to 200%. Ignore the PlayState error (we’re about to define the missing class) and save and close Primer.as.

Your Primer.as should now look like this:

package {
    import org.flixel.*;
    [SWF(width="480", height="320", backgroundColor="#000000")]

    public class Primer extends FlxGame {
        public function Primer() {
            super(240,160,PlayState,2);
        }
    }
}

Create PlayState.as (File > New > ActionScript Class). Enter the Class name PlayState, enter the Superclass org.flixel.FlxState, make sure “Explicitly invoke superclass constructor” is unchecked, and click the Finish button.

First replace:

import org.flixel.FlxState;

with:

import org.flixel.*;

Then inside the PlayState class definition add the following:

override public function create():void {
    // initiate variables, add sprites, tilemaps, etc
}

override public function update():void {
    // listen for user input, move sprites, etc
}

With these last changes your PlayState.as should look like this:

package {
    import org.flixel.*;

    public class PlayState extends FlxState {
        override public function create():void {
            // initiate variables, add sprites, tilemaps, etc
        }

        override public function update():void {
            // listen for user input, move sprites, etc
        }
    }
}

Run the project and you should see an empty black screen. Progress! Now we’re ready to start adding things to our game.

Copyright © 2012–2014 Retro Game Crunch.