Flashdevelop404flixel250

BruceJillis edited this page Sep 8, 2012 · 17 revisions
Clone this wiki locally

Flixel is an open source game-making library that is completely free for personal or commercial use. Flixel is written entirely in ActionScript 3 by Adam Saltsman. Flixel has been used in hundreds of games, including IGF nominees, Adult Swim games, and experiments and many Flixel users make their first game ever in Flixel.

Flixel builds on the powerfull graphical features of ActionScript 3. Being browser-based deploying AS3 code (binary files known as SWF's) is easy as hosting a file somewhere (for instance through the free dropbox service).

FlashDevelop

Go to this page and download the latest release of FlashDevelop (as of writing: 4.0.4). Before we can install FD we need to take care of a few dependencies: the Microsoft .NET 2.0 SP1 runtime, the ActiveX (for IE) Debug Flash Player and you must have Java 1.6+ installed. If you haven't, or aren't sure, you can go here and download the appropriate (latest) JRE.

Flixel

Flixel can be downloaded from this page (we want the "Latest Master" link, 2.5 as of writing). The website is well worth checking out in it's entirety (especially it's forum's and help section).

Setting Up Your Project

Open FlashDevelop (Start > All Programs > FlashDevelop > FlashDevelop) and select Project > New Project in the main menu. In the "New Project" dialog that pops up, we select AS3 Project under the ActionScript 3 heading. We then fill in our name for the project (let's say for instance "BaconGameJam") and select "Create directory for project". Make sure the folder selected in the Location field is the folder you want you project to be created in. The package field should be left blank as it will give problems with the way we'll include flixel later on.

Click on "Ok" to create the project.

The first thing we must do when we create a new Flixel project is to include it. Open up the archive we downloaded from flixel.org and copy the org folder into the src subfolder of the newly created folder for our project. An easy way to open up the explorer from FD is to right-click the folder you want to explore and select Explore from the menu. When you have done this correctly the folder should show up in FD:

We are now ready to write our first flixel code! Open up Main.as and select all of it and replace it with the following code:

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

        public class Main extends FlxGame {
            public function Main() {
                super(640, 480, PlayState);
                forceDebugger = true;       
            }
        }
    }

The first line tells us this code will be placed in the main namespace. The next line tells us that all the code that lives in the org.flixel namespace (ie. that code will have package org.flixel at the top) is available. Then we get 2 strange lines that are not really programming code perse but they tell FlashDevelop to compile this code into an SWF file with a resolution of 640x480 and it's default opening background color will be black. The next line again tells the compiler to do something special with the result of our code which is to add a so-called preloader.

Through various ways your game (and thus your SWF) can become quite large, so large that downloading them on modern internet connections can take a little while. Flash has a nice solution for this called a preloader that present the user with a nice progress bar that reflects the percentage of the SWF that has already been downloaded instead of a blank screen or worse just freezing the browser. Anyway, the line says that we'll use the class Preloader as our preloader class.

The next line is the declaration of your main class, aptly named Main. It is located in the file Main.as (note the same capitalization) and this is mandated by AS3. As our main class is intended to be instantiated it defines a so-called constructor, named and capitalized exactly the same as the class. The class states that it "extends" the class FlxGame meaning that it has all the things defined in FlxGame and its parent classes as well as what is defined in itself. Flixel requires that we extend FlxGame in our main class so we comply.

In this case the constructor is very simple, it takes no arguments, and calls it's counterpart in FlxGame which takes 3 mandatory arguments: the width and the height of the Flixel 'screen', and the starting FlxState class. Flixel uses a state-machine to structure games and we will go into more detail on that later.

The last line of this snippet specifies that we'd like to use Flixel's built in debugger (which can be openend using the '~' or '`' key and/or the '\' key. It provides some very usefull functionality to rapidly test and set values for your game (which we'll go into later).

Preloader

The project, as it stands, will not compile because we are missing 2 files: one files Preloader.as containing our preloader implementation, and our starting state.

To add the preloader, go to the project explorer in FlashDevelop and right click on the src folder. Select Add > Add Class and fill in 'Preloader' for the classname in the dialog that pops up. Open the file and replace all the code with the following:

        package {       
                import org.flixel.system.FlxPreloader;

                public class Preloader extends FlxPreloader {
                        public function Preloader() {
                                className = "Main";
                                super();        
                        }
                }
        }

This class extends FlxPreloader and does almost nothing else. Most of the hard work of preloading is done by Flixel's implementation and for the compo it is good enough. The class defines a constructor that sets the className property of this class to be Main and the calls it's counterpart in the FlxPreloader class.

Chances are that when you are developing the game on your local machine you will never see the preloader screen as it will load so fast it will be gone almost instantly. Once you deploy to something like dropbox however you see it show up once you load the SWF in the browser.

What the class does is "a lot of magic" and then once everything has been downloaded, the class named in className is instantiated and our game is go.

Statemachines

Flixel uses a pattern called a state machine to structure it's games. A state is roughly 1 module of the game. A module can be anything like the main menu or the settings sub menu but it can also be ..

A state is implemented by using 1 class. A Flixel state goes through the a number of phases that are in effect methods that you define in the subclass (a class that extends another class, FlxState in this instance). In order they are: create, update and destroy.

Switching states is accomplished by using for example FlxG.switchState(new WinState()) to switch to a state the represents the player winning the game.

    package {
        import org.flixel.*;

        public class PlayState extends FlxState {
            override public function create():void {
            }

            override public function update():void {
                super.update();
            }       

            override public function destroy():void {
                super.update();
            }   
        }
    }