Deprecated: preg_replace(): The /e modifier is deprecated, use preg_replace_callback instead in /home3/csandahl/public_html/luckoverskill.com/lib/smarty/Smarty_Compiler.class.php on line 270
LuckOverSkill - 01 - Getting Started
Deprecated: preg_replace(): The /e modifier is deprecated, use preg_replace_callback instead in /home3/csandahl/public_html/luckoverskill.com/lib/smarty/Smarty_Compiler.class.php on line 270

01 - Getting Started

Goals

  1. Get Flixel (v2.55) and Flixel Power Tools (v0.90) up and running
  2. Show a menu screen

Files

Firing Up the Demo

As you can see, there’s not much to see yet. This is the boring tutorial that lets you get to the fun tutorials. If you don’t care about going from zero to menu screen, just skip ahead to the next tutorial and add a player to the mix.

Setting Up the Environment

This tutorial series uses FlashDevelop 4, though you should be able to use any newer version of FlashDevelop or the basic Flex command line tools. The easiest way to get your environment ready is to download FlashDevelop and tell it to download and install the latest Flex SDK and Flash Debugger. This will take a LONG time, but when it’s done you’ll be ready to go. If you already have Flex SDK installed, see how to let FlashDevelop know where it is on your machine.

Now that you have FlashDevelop and Flex setup, create a directory for these tutorials. I am assuming that Flixel and all the tutorials live under one project directory. So, for instance, if your project directory were C:\Development\Flash Platformer Tutorials\, you would place Flixel and all the tutorials under that directory. For example:


C:\Development\Flash Platformer Tutorials\01 – Getting Started\
C:\Development\Flash Platformer Tutorials\02 – Adding a Player\
C:\Development\Flash Platformer Tutorials\…
C:\Development\Flash Platformer Tutorials\Flixel v2.55\

If you haven’t done so already, download Flixel and the source code for this tutorial and extract them into your project directory (ex: C:\Development\Flash Platform Tutorials\).

Project Structure

Files in ProjectFirst, let’s look at all the files in this tutorial:

  1. /assets/gui/title.png – background image for the main menu
  2. /src/states/MenuState.as – main menu
  3. /src/Assets.as – class for embedding images, sounds, etc
  4. /src/Default.css – required file for using the Flixel preloader
  5. /src/Main.as – entry point for the application
  6. /src/Preloader.as – preloader for the application (uses the Flixel preloader)

This project structure was created with two things in mind. First, Flixel has a built-in preloader that expects something like this. Second, by the time we finish all of these tutorials we will have a usable 2D platformer engine. We will want our code to be organized so it can be modified easily for a real game.

Entering the Application

Every application needs a starting point, and ours is in Main.as. Let’s take a look at the whole thing and then break it down:

package
{
	import org.flixel.*;
	import states.MenuState;

	[SWF(width="640", height="480", backgroundColor="#131c1b")]
	[Frame(factoryClass="Preloader")]
	public class Main extends FlxGame
	{
		/**
		 * Constructor
		 */
		public function Main() {
			super(320, 240, MenuState, 2);
		}
	}
}

The real stuff begins with [SWF(width=”640”, height=”480”, backgroundColor=”#131c1b”)]. This tells Flash how big we want our window (640x480) and what color to use by default.

Next is [Frame(factoryClass="Preloader")]. This tells Flash that we want to use the Preloader class (which we’ll get to soon). When we load our game on the web, this preloader will be displayed while the game is being transferred to the player’s computer.

Now we actually get to our Main class: public class Main extends FlxGame. If we’re going to use Flixel (and we are), we want our Main class to extend FlxGame. It takes care of much of the dirty work for us, and it makes Flixel work.

Finaly, we have our constructor:

public function Main() {
	super(320, 240, MenuState, 2);
}

FLIXEL 101: States

Flixel’s states are roughly the same as windows or dialogs. If you need to completely change what’s being displayed and what’s being done on the screen, you probably need a new state. Flixel’s states are not all that good at handling something like a state machine on a player (normal state, under water state, flying state, etc).

Here we tell Flixel that we want our game to be 320x240. Since we told Flash to create a 640x480 window, we use the 2 at the end of the line to tell Flixel to zoom in (make the game look twice as big to fill the Flash window). The third parameter tells Flixel which state to enter first. In this case, we want MenuState to be the first thing the player sees.

Before we get to the menu, let me show you the preloader briefly:


package
{
	import org.flixel.system.FlxPreloader;

	public class Preloader extends FlxPreloader
	{
		/**
		 * Constructor
		 */
		public function Preloader():void {
			className = "Main";
			super();
			minDisplayTime = 2; // always show the logo (NOTE: only shown when in Release mode)
		}
	}
}

We won’t be changing this in any of the tutorials, but there are three things to note. First, we’re extending FlxPreloader. Preloaders in Flash are more complicated than they should be, but FlxPreloader handles all this for you. It’s a good thing. If you really want to roll your own, see this tutorial from School of Flash or this other tutorial from Bit-101. Second, we tell FlxPreloader to load up our Main class once everything’s loaded with the first line of the constructor (className = “Main”;). Finally, I told Flixel to display the Flixel logo for a minimum of two seconds (minDisplayTime = 2;), even if you have a blazing fast Internet connection that loaded the game faster than that. This is completely optional and is really just a nod to the creators of Flixel. Note, however, that you will only see this when you compile in Release mode. In FlashDevelop 4, you can select Debug or Release mode here:
Debug vs Release Mode in FlashDevelop 4

You can now safely tuck the preloader away for the rest of these tutorials. Ciao.

Creating the Main Menu

At last, we reach some stuff that we’ll actually see. Here’s the MenuState class:

package states
{
	import org.flixel.*;

	public class MenuState extends FlxState
	{
		/**
		 * Create state
		 */
		override public function create():void {
			add(new FlxSprite(0, 0, Assets.MENU_TITLE_IMAGE));
			FlxG.mouse.show();
		}
	}
}

FLASH 101: Packages

First off, notice that we had to use package states at the start of the file. This is a tool to help keep things organized once we get to the more advanced tutorials. Your package should always match your directory structure (package states == /states/…). The keen observer will note that the file actually lives in /src/states/. Why don’t we have package src.states? Well, I told FlashDevelop to look in /src/ for code instead of the project root. That effectively takes /src/ out of the picture for states. For more on packages in Flash, check out this tutorial from Foundation Flash.

Our menu extends FlxState, so it picks up some functionality along the way. Flixel calls create() before anything is actually displayed. Think of it as an initialization function. In our version of create(), we’re adding a sprite (i.e. displayable object) to the screen with add(…). Assets.MENU_TITLE_IMAGE tells the sprite which image to use. We’ll see what that’s about in a moment.

Finally, we make the mouse visible with FlxG.mouse.show(). There are many useful capabilities stored in FlxG, so this is really just getting you used to that idea.

Embedding Assets

In our menu, we used Assets.MENU_TITLE_IMAGE. Open up Assets.as to see what’s going on here. There’s only one line of any significance at the moment:


[Embed(source="../assets/gui/title.png")] public static var MENU_TITLE_IMAGE:Class;

As these tutorials progress, we will be adding in many more images and sounds to this Assets class. Think of this as your media library. If you want to use a JPEG or PNG or MP3, for example, you use this class to bring it into your final Flash file (*.swf). For more information on embedding assets in Flash, check out this article from the Nightspade blog.

The only thing you really need to notice is that we are using public static var when we declare this variable. This means you can access it with Assets.MENU_TITLE_IMAGE rather than having to create an Assets object. This is simply my preference.

Conclusion

Now you have walked through the code necessary to get Flixel up and running, and you know how to show a Menu (with no functionality...yet).

Next Tutorial: Adding a player