Hello World - FlashDevelop (Flixel)
From Flash Game Dojo
This tutorial walks you through creating a simple Hello World style app using Flixel and FlashDevelop. While the code is the same regardless of which IDE or text editor you use, the process of creating new files varies some. If you are on Mac OSX you might want to read up on Hello World - Flash Builder(Flixel) instead.
Contents |
What are we doing?
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
Open FlashDevelop, and create a new project by clicking Project->NewProject:
Set your project type as AS3 Project, give it an appropriate name and choose its location:
Hit OK and you’ll see your project structure appear in the project panel. Take a look in the src folder and open the Main.as file to see your new program in all its glory:
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 Classpaths tab:
To add Flixel to your ActionScript project, you need to press the Add Classpath button, which will pop up this file browser thing. NOTE: the folder you point to is the one containing the org\flixel directory structure, not the one inside the org folder.
Press OK 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! FlashDevelop is going to generate a main class file, in this case Main.as, but we’re better off with a new file. To add it, right-click on the src folder and choose Add->New Class:
In the dialog box replace NewClass with HelloWorld. Your new file should look like this:
package { /** * ... * @author x */ public class HelloWorld { public function HelloWorld() { } } }
Now for some cleaning up. Right-click on your HelloWorld.as file and choose Always compile – it will be set as the project’s main class file. You can now delete the Main.as, as well as the comment lines from the HelloWorld.as – those are the ones I mean:
/**
* ...
* @author x
*/
That leaves us with something like this:
package { public class HelloWorld { 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, add a new class file just like you did with HelloWorld.as, but this time call it PlayState. After cleaning up those comment lines you should have something like this:
package { public class PlayState { public function PlayState() { } } }
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, add the import to 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:
Error: transcoding parameter 'embedAsCFF' is not supported
Are you using Flex 3 SDK?
Open FlxGame.as. Read the explanation at line 29, comment out line 34 (by adding // at the beginning), remove comment slashes at line 37.
