Hello, World! (mxml)
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: This is the mxmlc version of "Adam's Hello, World! tutorial":http://wiki.github.com/AdamAtomic/flixel/tutorial-hello-world-flex-builder-30-osx.
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":http://github.com/AdamAtomic/HelloWorld. Looks pretty easy, right? It is! LET'S DO THIS!!
STEP 0.1: Download Flex, you can get if from "here":http://www.adobe.com/cfusion/entitlement/index.cfm?e=flex3sdk.
STEP 0.2: Open the terminal. You want to edit a file calle ".bash_profile"
pico .bash_profileI use pico, but you can use another editor if you like.
STEP 0.3: Write this in the file:
PATH=$PATH:/usr/local/bin:/path/to/flex/binwhere /path/to/flex is the path to where you put the flex folder
STEP 0.4: Quit the editor and save (ctrl-x followed by "y" when prompted if you used pico)
STEP 0.5: Restart your terminal.
Create a folder a give it whatever name you want. I suggest you give it the name of your game.
Ok, so you have a folder. Yay! Now you might want to have flixel in it. copy the "org" folder and paste it inside your project's foler.
Yay! now you have flixel in your project.
Alright, flixel is part of your project now. Let's get some text drawing on screen!
STEP 3.1: Create a new file and call it HelloWorld.as
STEP 3.2: First, we need to write a couple of default lines which will be part of all our actionscript files:
package {
public class HelloWorld
{
public function HelloWorld()
{
}
}
}STEP 3.3: Next, we need access to flixel. Add the following line just after @package {@:
import org.flixel.*; //Allows you to refer to flixel objects in your codeSTEP 3.4: 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.5: Then we are going to alter the class declaration to extend FlxGame instead of Sprite:
public class HelloWorld extends FlxGameSTEP 3.6: 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.7: 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, simply create a new file and call it PlayState.as
STEP 4.2: Then, fill it with the same default code we wrote in STEP 3.2
STEP 4.4: You also want to import flixel. Your file should now look 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.3. Then, we're going to replace the constructor (that "public function" part) with a new function called "create", and add this line of code to 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)
}
}
}Almost done!
STEP 5.1: Open the terminal and navigate to the folder of your project:
cd /Path/to/the/folderSTEP 5.2: Type
mxmlc HelloWorld.asThis should create a "HelloWorld.swf" file. That's it, youre done!
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":http://myflex.wordpress.com/2007/09/07/about-hex-color-codes-in-flex-as3/ .
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.data.FlxFactory;
public class Preloader extends FlxFactory
{
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!