Hello World - MXMLC (Flixel)

From Flash Game Dojo

Revision as of 20:51, 19 July 2010 by BullitSpeed (Talk | contribs)
(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)
Jump to: navigation, search

This tutorial walks you through creating a simple Hello World style app using Flixel and MXMLC. While the code is the same regardless of which IDE or text editor you use, the process of creating new files varies some.

Note: you can use fcsh-wrap instead of mxmlc to speed up compile times.

Contents

What are we doing?

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 (top left)
		}
	}
}

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

Installing mxmlc

Download Flex, you can get if from here Open the terminal. You want to edit a file called ".bash_profile" which is located in your home directory.

pico ~/.bash_profile

I use pico, but you can use another editor if you like.

Write this in the file:

PATH=$PATH:/usr/local/bin:/path/to/flex/bin

where /path/to/flex is the path to where you put the flex folder

Quit the editor and save (ctrl-x followed by "y" when prompted if you used pico)

Restart your terminal.

Creating a New Project

Create a folder a give it whatever name you want. I suggest you give it the name of your game.

Adding Flixel to your Project

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 folder.

Yay! now you have flixel in your project.

Basic Game Setup

Alright, flixel is part of your project now. Let's get some text drawing on screen!

Create a new file and call it HelloWorld.as

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()
                {
                }
        }
}

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 code 
 

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 file 
 

Then we are going to alter the class declaration to extend FlxGame instead of Sprite:

public class HelloWorld extends FlxGame

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 PlayState 
 

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, simply create a new file and call it PlayState.as

Then, fill it with the same default code we wrote above

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();
		}
	}
}

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) 
 

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)
		}
	}
}

Building And Running

Almost done!

Open the terminal and navigate to the folder of your project:

cd /Path/to/the/folder

Type

mxmlc HelloWorld.as

This should create a "HelloWorld.swf" file. That's it, youre done!

Note: You can also use the make utility to compile your game

See Also


External Links

Personal tools