What is Flixel?
Let me quote the flixel website itself…
A revolution in Flash game production. An amazing new way for man to interface with machine. The beginning of a new tomorrow. Never before has the world witnessed such a collection of AS3 files. We put it all in the new flixel 2. Groups to help organize game objects, quad trees for faster, more accurate collisions, a cleaner API, plus all the old flixel classics: animated sprites, tilemaps, and particle emitters. Most importantly, flixel is still completely free for personal or commercial use.
What are its features?
- Display Hundreds of Objects at Once
- Create Tilemaps from Text Files or Images
- Generate and Emit Particles for Hot Effects
- Play Positional, Streaming, Looping Sounds
- Scroll Objects or Groups in Parallax
- Text Display, Buttons and Mouse Cursors
- Save Games, Math Utiltities and Collisions
- Pure ActionScript 3 is Fun and Free!
Not good enough? Check out some of the awesome games made with flixel!
What am I doing?
I love playing games and love to make them too. I’ve been playing with Flash and actionscript for quite sometime now; I bumped into flixel almost half a year ago and I’ve been playing around with it ever since. I wanted to share a lot of what I’ve learned over the time and hence this series on how to make games with flixel or getting started with flixel. You need to have a good grasp of actionscript 3 before you jump in though. So, here we go…
.01
note – This was been written with windows in mind
Setting up a development environment
For the time being, we will be using FlashDevelop as our IDE on windows and Flex3.
Open Source Flex SDK
Get the Flex4 Open Source Flex SDK, and unzip it somewhere like your root drive like c:\flex
http://opensource.adobe.com/wiki/display/flexsdk/Flex+SDK
FlashDevelop
Get the latest FlashDevelop. Sadly it works only for windows. Mac OSX/Linux compatible using virtualization software (VirtualBox, VMWare, Parallels). You can use Eclipse as your IDE as well.
http://www.flashdevelop.org/wikidocs/index.php?title=Main_Page
you will also need the following; they are usually listed at the download page as well.
* Get the debug Flash Player (You need: Projector and ActiveX)
- http://www.adobe.com/support/flashplayer/downloads.html
* Get Adobe Flex SDK. The free Flex SDK (4+) is required for ActionScript 3 development if you don’t use Flash CS*.
- http://opensource.adobe.com/wiki/display/flexsdk/Flex+SDK
* Java 1.6+ is required for the Flex compiler (ActionScript 3).
* XP users: update .NET 2.0 framework to SP2
- http://www.microsoft.com/downloads/details.aspx?familyid=aea55f2f-07b5-4a8c-8a44-b4e1b196d5c0&displaylang=en
Download and install as you do any other application.
The first thing you want to do after you have set up FD is to run it and set the SDK path. Goto Tools>Program Settings or hit F10. In the new dialog box that pops up, select AS3Context on the left side. Change the Flex SDK location to your Flex SDK location in the properties section on the right side. (see img01.png).
Using Eclipse with Flex4
–TBD–
Getting Flixel
Go to http://flixel.org/ and download the standard version of Flixel, which is hosted on github.
Setting up Flixel
Unzip flixel anywhere you like, you can choose to keep it in a common location for all your projects or copy over to each project you are doing.
Your First Flixel Project
Create a new project in FD, goto Project>New Project. In the Project creation dialog box, select AS3 Project from the installed template section. Type in the name of your project. Make sure that you are creating it in the correct location. Go ahead and check the option to create a sub-folder for the project so it can house all the files. Verify your location in the status bar and hit OK. (see img02.png).
A new project has been created for you and you can see it in your Projects panel (View>Project Manager). See that Main.as has an always compile option selected, this means that it is your entry point, and this file will always get compiled by FD and this class has to be public as well. ( see img03.png).
Copy the ‘org’ folder from the flixel folder that you have unzipped earlier, to the src folder inside your project directory so it will look like MyProject\src\org
If you check out Projects panel, you will find that the folders were added to it as well. (see img04.png).
Ok, now the fun part :) Delete everything in your Main.as file and you need to rewrite it extending flixel’s main Game class, FlxGame. FlxGame actually is the core that runs the whole and it is a class that extends the Flash Sprite class.
After importing flixel and creating the class extending FlxGame, it will look like this.
package { import org.flixel.* /** * ... * @author Yadu Rajiv */ public class Main extends FlxGame { public function Main() { } } }
Now you need to call super and give it the initial parameters to create your extended FlxGame Class. when you call super in the Main class, you are calling the constructor for FlxGame, and hence you need to pass in 4 parameters. (see img05.png).
public function FlxGame(GameSizeX:uint,GameSizeY:uint,InitialState:Class,Zoom:uint=2)
GameSizeX – width of your game viewport
GameSizeY – height of your game viewport
InitialState – initial state class that needs to be loaded once the game starts
Zoom – by default 2, means that the GameSizeX and GameSizeY will be zoomed double
Keep in mind that GameSizeX and GameSizeY does not mean your window width and height, it is a viewport that is drawn and constantly refreshed internally by FlxGame.
In Flixel, to make things easier, you have states; each state will hold whatever game objects you add to it. For example, you can have a menu state, and a game state..etc. The menu states will have the game title menu buttons and the game state will have your player and level objects and everything else. switching between states is as easy as assigning a new value to the state property of the FlxG class.
a word about the FlxG class. This is a sort of static class-ish class that is a global helper class full of useful functions for audio, input, basic info, and the camera system among other things. You will be using it very often all over your game.
Now, before we call the super function, we need to make a new class which extends the FlxState class, so that we can pass it as a parameter for FlxGame.
So we create a new document for our new FlxState class, I’m calling mine menuMain, assuming that there would be more menu’s ;) Goto File>New>AS3 Document, a new document like this will be created.
package { /** * ... * @author Yadu Rajiv */ public class { } }
rewrite it so that it extends the FlxState class, like so.. and save it to our src folder as menuMain.as(I hope you know why we name our files same as our classes :)
package { import org.flixel.*; /** * ... * @author Yadu Rajiv */ public class menuMain extends FlxState { override public function create():void { /* we call the create function on the FlxState class by using super.create() */ super.create(); } } }
Come back to the Main.as file and call super
package { import org.flixel.* /** * ... * @author Yadu Rajiv */ public class Main extends FlxGame { public function Main() { /** * 320 is the width, 240 is the height, menuMain is the FlxG.State, * and 2 is the zoom we want, so width will be 320x2 = 640 * and height will be 240x2 = 480 */ super(320, 240, menuMain, 2); } } }
Ok, so try running it to see what happens! – Run is F5 or Project>Test movie from the menu.
The first thing that you might run into if you are using Flex3 and the latest Flixel are two errors in FlxGame.as; (see img06.png). What you need to do is to just double click on the errors which will open up file and position the cursor on the line in question. You will see that the error happens where the font is being embedded, comment out that line as it says in the Note on the same page, and uncomment the similar line for Flex3. and you are ready to go. (see img07.png)
Run again and you might get something like this (see img08.png). As you can see, it is not quite right, there is a black box in the size you specified earlier(320×2 X 240×2). But the window is bigger. This is because, by default, the size of the swf is defined in the project settings, and you need to change that to 640×480 so that your game viewport fits in properly (see img09.png).
Another way of doing this is to change the settings in the code; The code below, shows options to change the swf width, height and background colour.
package { import org.flixel.* // sets the swf width, height and backgroundColor [SWF(width = "640", height = "480", backgroundColor = "#333333")] /** * ... * @author Yadu Rajiv */ public class Main extends FlxGame { public function Main() { /** * 320 is the width, 240 is the height, menuMain is the FlxG.State, * and 2 is the zoom we want, so width will be 320x2 = 640 * and height will be 240x2 = 480 */ super(320, 240, menuMain, 2); } } }
Now, if you run it, you would get a black window, rather than a #333 coloured window as you’d expect. This is because The background color is by default set to 0xff000000 (black in octal, aarrggbb format) for the FlxState class. if you try to maximize the window, you’d see that the background is actually #333 for the swf.
ok, so lets play around a bit more with the menuMain.as file to change its background color and add some text. Most of the code below is very simple, and the comments do the explaining. First off, you can see that we have overridden the create function from FlxState in our menuMain class; this function gets called as soon as the class is created. We call FlxState.create using super.create(). Now, we add a new welcomeMsg variable which is basically an FlxText. You create an instance of the object and set is initial properties and then add it to your display list to be rendered. the FlxText extends FlxSprite, which extends the FlxObject class.
package { import org.flixel.*; /** * ... * @author Yadu Rajiv */ public class menuMain extends FlxState { // variable to hold our welcome message private var welcomeMsg:FlxText; override public function create():void { /* we call the create function on the FlxState class by using super.create() */ super.create(); /** * In Flixel 2.5 the FlxState.bgColor propery no longer exists. * it has been moved into FlxG static class */ FlxG.bgColor = 0xfffe03f4; /** * creates a new FlxText Object with the string "Welcome to Flixel" and positions it exactly in the middle of the stage * FlxG.width returns the width of the viewport without zoom * FlxG.height returns the height of the viewport without zoom */ welcomeMsg = new FlxText((FlxG.width / 2) - 60, FlxG.height / 2, 120, "Welcome to Flixel"); // by default, the FlxText object is "left" aligned, we center it. welcomeMsg.alignment = "center"; // adding the new object to the display list add(welcomeMsg); } } }
As you run this, you will see our welcome text in the middle of the viewport with an electric pink background.. enjoy (see img10.png)
The final project files can be downloaded here.
