Flixel-helloworld

The first, most basic project you can make is, of course, Hello World! We are going to walk you through all the menus and line changes, but ultimately we are creating these two files:

HelloWorld.as

 

package 
{
	import org.flixel.*; //Allows you to refer to flixel objects in your code
	[SWF(width="640", height="480", backgroundColor="#000000")] //Set the size and color of the Flash file
 
	public class HelloWorld extends FlxGame
	{
		public function HelloWorld()
		{
			super(320,240,PlayState,2); //Create a new FlxGame object at 320x240 with 2x pixels, then load PlayState
		}
	}
}

PlayState.as

 

package
{
	import org.flixel.*;
 
	public class PlayState extends FlxState
	{
		override public function create():void
		{
			add(new FlxText(0,0,100,"Hello, World!")); //adds a 100px wide text field at position 0,0 (top left)
		}
	}
}

Looks pretty easy, right? It is! LET'S DO THIS!!

Creating a New Project

Before we start, make sure your version of Flixel is up to date. Download the standard, most stable version here: [1]

Now you should be ready to go, so open up Flex Builder and create a new project by clicking File->New->ActionScript Project:

Give your new project an appropriate name:

Hit Finish and you should see something like this:

 

Adding Flixel to your Project

High fives, bro! You just created your first Flixel project. It will run, but nothing will happen. And it isn't even really a Flixel project yet. We're going to remedy that right now by right-clicking on our new project and selecting Properties from the dropdown:

Clicking on that should pop up the Project Properties dialog, which looks something like this after you select ActionScript Build Path from the list on the left:

To add Flixel to your ActionScript project, you need to press the Add Folder button, which will pop up this file browser thing:

Press Browse to go boldly forth and highlight the Flixel folder:

Press Choose to claim Flixel as your own:

Then press OK to save your selection and view it in the Build Path dialog, with a nice little icon and everything:

Press OK again to close the Project Properties dialog. Look! There's Flixel, it's part of your project now!

 

Basic Game Setup

Alright, flixel is part of your project now. Let's get some text drawing on screen! Flash Builder is going to generate a main class file, in this case HelloWorld.as, that is going to look something like this:

 

package
{
	import flash.display.Sprite;
 
	public class HelloWorld extends Sprite
	{
		public function HelloWorld()
		{
		}
	}
}

The file we are trying to create looks like this:

 

package
{
	import org.flixel.*; //Allows you to refer to flixel objects in your code
	[SWF(width="640", height="480", backgroundColor="#000000")] //Set the size and color of the Flash file
 
	public class HelloWorld extends FlxGame
	{
		public function HelloWorld()
		{
			super(320,240,PlayState,2); //Create a new FlxGame object at 320x240 with 2x pixels, then load PlayState
		}
	}
}

Let's go through this line by line real quick, since this is the start of the project, we don't want to miss any details quite yet.

 

package
{

This is simply telling your Flash IDE that you're creating a file in the default source directory. This may not be ideal if you are sharing source code with another project or something, but for quick Flixel sketches its no problem. The next line says something like this:

 

import flash.display.Sprite;

But we are going to edit that line of code to say this instead:

 

import org.flixel.*; //Allows you to refer to flixel objects in your code

This tells the Flash IDE that you want to include all the Flixel source files. If you wanted to include a specific file, you would just us that filename (e.g. "FlxGame.as") instead of "*". Including all the Flixel files is fast and easy and doesn't really have any penalties, so it's usually simplest to just use the asterisk wildcard. Next, we are going to add a whole new line of code, right after the last one (before the line beginning with "public class"):

 

[SWF(width="640", height="480", backgroundColor="#000000")] //Set the size and color of the Flash file

This is a special "pre-processor" command to your Flash IDE, that tells it what size to make your Flash game project. We want our sample game to run at a full resolution of 640x480 (more on this below). We are going to alter the next line too!

 

public class HelloWorld extends FlxGame

There are a few different things going on here. "public" refers to the "visibility" of the class. For now, let's not worry about it, suffice to say that all our stuff for this project will just be public. "class" refers to what FlxGame is - it's programmer-speak for object, basically. Classes can have variables, and functions, and even store other classes. "HelloWorld" refers to what we named our project. "extends" means we're making a new class, called HelloWorld, that is based on FlxGame. We want to extend FlxGame instead of Sprite so that we have access to all that Flixely goodness.

 

public function HelloWorld() {

This is what we call a "function declaration", and since it has the same name as the object, it's called a "constructor declaration". That means this function, or set of instructions, is automatically called when the object is created. Since this is our main object, Flash creates it automatically, we don't even have to do anything. You'll notice yet another weird bracket there - each "open" bracket indicates that we're opening a kind of Russian nesting doll. In this case, what we're telling Flash is that our constructor ("HelloWorld()") belongs inside our HelloWorld object, which belongs inside our default source tree package from the first line. Phew!

 

super(320,240,PlayState,2); //Create a new FlxGame object at 320x240 with 2x pixels, then load PlayState

This is the most important line of code in this file. "super" refers to the object you're extending, in this case FlxGame. Since there is no function attached to it (e.g. "super.update()"), you know that what we're calling is FlxGame's constructor. Then we give it some important parameters. In order, these parameters indicate the width, height, starting game state, and "zoom" level of your entire game. Notice something funny? The width and height of the game are exactly half the size of the width and height we passed to Flash earlier in this same file. However, "width" (320) times "zoom" (2) exactly equals the number we put up there: 640. Make sense? We're going to display the game at 640x480, but the game itself is only 320x240. We're going to blow it up, or zoom it in, so that each pixel takes up twice as much space. This leads to a kind of chunky, retro aesthetic, but it's a good way to get extra performance out of your Flash game. Finally, we close our function, then our game object, then our package with closed brackets. The resulting file should look exactly like this:

 

package
{
	import org.flixel.*; //Allows you to refer to flixel objects in your code
	[SWF(width="640", height="480", backgroundColor="#000000")] //Set the size and color of the Flash file
 
	public class HelloWorld extends FlxGame
	{
		public function HelloWorld()
		{
			super(320,240,PlayState,2); //Create a new FlxGame object at 320x240 with 2x pixels, then load PlayState
		}
	}
}

Finally Printing Some Text

Almost done! All we have to do is create a FlxState object. FlxStates are states of the game; usually divided into things like menus, gameplay, game over screens, etc. To create a new FlxState, select your source folder in the file tree on the left, then click File->New->ActionScript Class:

Then enter PlayState in the Name field, and FlxState in the Superclass field. (You may need to use the exact address of the FlxState class, which is org.flixel.FlxState. Searching for the class with Browse will get you the correct location. The image below does not reflect this.)

Then hit Finish, and you should see your new file:

Your new file should look something like this:

package
{
	import org.flixel.FlxState;

	public class PlayState extends FlxState
	{
		public function PlayState()
		{
			super();
		}
	}
}

But we are trying to create a file that looks this:

 

package
{
	import org.flixel.*;
 
	public class PlayState extends FlxState
	{
		override public function create():void
		{
			add(new FlxText(0,0,100,"Hello, World!")); //adds a 100px wide text field at position 0,0 (upper left)
		}
	}
}

We're not changing or adding much here. First, it saves annoyance if you change the import to just pull in all of flixel, like we did earlier. Then, we're going to replace that "public function" constructor block with our own, called create(), with one line of code in it:

 

		override public function create():void
		{
			add(new FlxText(0,0,100,"Hello, World!")); //adds a 100px wide text field at position 0,0 (upper left)
		}

Note that we added a new keyword called "override". This means we are adding code to a function that already exists as part of the FlxState class. create() is called whenever Flixel loads or switches to this game state, so anything you put in here will be called when that switch is made. The resulting file should look like this:

 

package
{
	import org.flixel.*;
 
	public class PlayState extends FlxState
	{
		override public function create():void
		{
			add(new FlxText(0,0,100,"Hello, World!")); //adds a 100px wide text field at position 0,0 (upper left)
		}
	}
}

That's it! Hit the run button to build your file and read those sweet, chunky words:

Extra Credit

This is Flash Builder-specific, as far as I know. But if you use the Flixel preloader (How do preloaders work?(Flixel)), Flash Builder will get cranky that you haven't specified a default CSS file for some reason. This is really easy to get rid of if you find it as annoying as I do! First, in your source folder, create a new file called Default.css. It can (should?) be totally empty. Then we're going to right-click on the Project Properties like we did earlier, and click on ActionScript Compiler on the side menu there.

The key thing we added to that field there is:

-defaults-css-url Default.css

That's it! No more stupid CSS warning.