Hello, World! (Flex Builder 3.0, OSX)
So this has been a long time coming, but I am working on providing and maintaining some simple projects that people can use as starters or templates for experimenting with flixel. ‘mode’, the de facto flixel game, is sort of absurdly complicated and was/is really more of a code testbed than a good example or introduction to flixel. This should be remedied in the very near future with some nice new github projects that you can use as basic development templates.
NOTE: My Flash-coding weapon of choice is something called Flex Builder. Flex Builder is both a standalone app and plug-in for the popular Java-based IDE Eclipse. I prefer the plug-in version personally, but they’re pretty comparable. The best thing about Flex Builder is that even though Adobe makes it, it’s pretty great, and buying a Flex Builder license gets you access to either version of the software on both Windows and Mac. Pretty rad! You can easily find out more about Flex Builder by getting your google on.
The first, most basic project you can make is, of course, Hello World! I am 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 (upper left)
}
}
}Both of these files are available right here on github. Looks pretty easy, right? It is! LET’S DO THIS!!
STEP 1.1: Open Flex Builder, and create a new project by clicking File→New→ActionScript Project:
STEP 1.2: Give your new project an appropriate name:
STEP 1.3: Hit ‘Finish’ and you should see something like this:
STEP 2.1: 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:
STEP 2.2: 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:
STEP 2.3: To add flixel to your actionscript project, you need to press the Add Folder button, which will pop up this file browser thing:
STEP 2.4: Press Browse to go boldly forth and highlight the flixel folder:
STEP 2.5: Press Choose to claim flixel as your own:
STEP 2.6: Then press OK to save your selection and view it in the Build Path dialog, with a nice little icon and everything:
STEP 2.7: Press OK again to close the Project Properties dialog. Look! There’s flixel, it’s part of your project now!
STEP 3.1: Alright, flixel is part of your project now. Let’s get some text drawing on screen! Eclipse 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()
{
}
}
}STEP 3.2: First, we need access to flixel, so we are going to replace that line about importing the flash sprite class with this line:
import org.flixel.*; //Allows you to refer to flixel objects in your codeSTEP 3.3: Then, right below that line, we should decide how big to make our project using this weird macro thing:
[SWF(width="640", height="480", backgroundColor="#000000")]; //Set the size and color of the Flash fileSTEP 3.4: Then we are going to alter the class declaration to extend FlxGame instead of Sprite:
public class HelloWorld extends FlxGameSTEP 3.5: Finally, we need add this line of code to the constructor of our main class:
super(320,240,PlayState,2); //Create a new FlxGame object at 320x240 with 2x pixels, then load PlayStateSTEP 3.6: 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
}
}
}STEP 4.1: 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:
STEP 4.2: Then enter PlayState (remember that from Step 3.3?) in the Name field, and FlxState in the Superclass field:
STEP 4.3: Then hit Finish, and you should see your new file:
STEP 4.4: Your new file should look something like this:
package
{
import org.flixel.FlxState;
public class PlayState extends FlxState
{
public function PlayState()
{
super();
}
}
}STEP 4.5: 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 in Step 3.1. Then, we’re going to replace that “public function” block with our own, called create, with one line of code in it:
add(new FlxText(0,0,100,"Hello, World!")); //adds a 100px wide text field at position 0,0 (upper left)STEP 4.6: 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)
}
}
}STEP 4.7: That’s it! Hit the run button to build your file and read those sweet, chunky words:
Don’t want to show the flixel logo? No problem. Just add this line after the FlxGame constructor:
super(320,240,PlayState,2);
showLogo = false;Want to change the colors? Try this:
super(320,240,PlayState,2);
setLogoFX(0xffff0000,MyLogoSound); //MyLogoSound refers to an embedded sound effect you include in your gameThat will make the ‘f’ logo turn red, and play your own custom sound effect. If that color format looks weird, don’t freak! It’s actually pretty simple. It’s hex, like web colors, but it’s in a funny order. It’s not Red, Green, Blue, then Alpha (RGBA), it’s Alpha then Red, Green, Blue, which takes the hex format of 0xAARRGGBB. You can find a more in-depth explanation here .
Preloaders in AS3 are a little bit messed up, so flixel takes care of MOST of it for you. However, you need to make a new file (like in Step 4.1) and add some code to it to help flixel finish the job. The class we need to create should be called, for the sake of simplicity, Preloader.as, and reside in your normal source folder. Paste or edit the file to look like this:
package
{
import org.flixel.FlxPreloader
public class Preloader extends FlxPreloader
{
public function Preloader():void
{
className = "HelloWorld";
super();
}
}
}HelloWorld must be spelled and capitalized exactly the way your main class is spelled and capitalized. If your main class is HelloGlobe, then className should be set to “HelloGlobe”. Finally, underneath the size macro in your main class (see Step 3.3), add this line of code:
[Frame(factoryClass="Preloader")]; //Tells flixel to use the default preloaderNow your project will automatically display the default flixel preloader each time it loads, although it will be awfully hard to see it since there isn’t much to load in a Hello World app!
This is Flex Builder-specific, as far as I know. But if you use the flixel preloader, Flex 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 be totally empty. Then, open up the .actionScriptProperties file in Eclipse and find the additionalCompilerArguments="" clause on the third line, and add this inside the quotes:
-defaults-css-url Default.css