Flixel tutorial part 1
For the uninitiated, Flixel is a game engine made in/for flash. It is said to be much faster than regular flash because it ditches vector graphics for bitmap ones.
This is a tutorial series that will try to introduce you to the flixel sdk one step at a time. So here we go with part 1.
Flixel tutorial part 1: Set up flixel for Flex.
This part is for OS X users of Flex 3.0 IDE.
Step 1: Download the latest flixel version from http://github.com/AdamAtomic/flixel/archives/master and save on your favorite location on your disk.
Step 2: Start Flex and select File -> New -> ActionScript Project
Step 3: Type your project name (Tutorial_01) and store at a convenient location
Step 4: Click on “Next” button (not Finish) and at the source path field add the path to the library you downloaded from step 1 (you expanded it right?) and then click Finish
That’s it.. you’re done!.. well almost since you aren’t using the library just yet. The Flex IDE created a file titled “Tutorial_01.as” which we’ll have to replace so replace it with this one:
package {
import org.flixel.*;
[SWF(width="640", height="480", backgroundColor="#000000")]
public class Tutorial_01 extends FlxGame
{
public function Tutorial_01()
{
super(640,480,PlayState,1);
FlxG.debug=true;
}
}
}
In the first lines we use a 640×480 canvas with black color and later on we pass control to the class “PlayState”. We didn’t define Playstate did we? No!. So Select File -> New -> ActionScript Class and at the window that will appear type Name: PlayState, Superclass: FlxState and hit Finish. Now paste inside this one the following:
package
{
import org.flixel.*;
public class PlayState extends FlxState
{
public var myText:FlxText;
override public function create():void
{
myText=new FlxText(0,30,100,"Hello, World!");
add(myText);
}
}
}
What we do here is we create a new FlxText object called myText to print on screen “Hello, World!” and then we pass it to the game engine to attach it to the rendering loop with the add() function. We don’t need to use the update() function yet as we don’t change anything yet.
Flixel uses states to manage the code. This means that when you are for example in the main screen you should create a separate FlxState called Intro and write code there on what should happen and then pass control to another FlxState called for example PlayState which will have the main game code.
Although we didn’t write much you will notice that if you click on the flash area (to activate it) and then hit ~ then you will see the flixel console (we enabled it using FlxG.debug=true). You will be able to see the flixel library version you are using and the fps you are reaching (frames per second). In the time of writing I get 58-62fps (it’s trying to stay to 60 fps) and flixel version 2.21.
This concludes part 1 of this series. Stay tuned for more 