Hello, there.

Recently, as requested by a few students and alums of the NYU Game Center, I created a sample project based off of a 2D platformer I made so that other students could work and learn from it. Beyond just creating and distributing the code, I wanted to make a brief Beginner’s Guide for anyone looking to start making games – specifically, 2D games using Flixel. This requires almost no programming knowledge really, rather just an interest to open up some code and poke around in it.

What is Flixel, you ask? Well the Flixel site answers it like this:

“Flixel is an open source game-making library that is completely free for personal or commercial use. Written entirely in Actionscript 3, and designed to be used with free development tools, Flixel is easy to learn, extend and customize.”

Basically, it’s a library of classes you include in your ActionScript3 project to make a lot of things easier for you. To get started, try to follow this guide to get setup with FlashDevelop or FlashBuilder (hint: you can get a free license of FlashBuilder from Adobe if you’re a student). Once installed, try to follow parts of this Hello, World guide here. However, with that one, about halfway down a ton of the images are currently missing due to some problems with FlashGameDojo.

Now, if you’re like most people, and find these tutorials a bit dryer than playing with some semblance of an actual game, then hopefully this will come in handy. Firstly, download this zip file of a 2DTutorial project I made with the latest version of Flixel (which is included in this zip). Unzip that file and put it wherever you’d like to keep your FlashBuilder projects. It contains all the code and media needed for the project.

Next up, open FlashBuilder. If you’re using FlashDevelop you should be able to follow along fairly well, so do not worry.

Firstly, go to File->Import.

Then select Flash Builder -> Flash Builder Project -> Next.

Then select Project Folder -> Browse -> Navigate to the unzipped 2DTutorial folder you downloaded above and select Open -> Select Finish.

Now you should see the Project in your Package Explorer. If you expand the folders, the “src” folder is where all the code is. In the Default Package, you’ll see all the classes I’ve created for you, and in the Org folder, you’ll see all the Flixel classes.

If you double click on Main, you’ll see the class come up. Now if you click on the Debug or Run icons (or go to Run->Run) the game should pop up in your browser or Flash Player (depending on the settings of the IDE). Voila!

However, there is one precaution we should take with the project still…

Firstly, right click on the project folder that says “2DTutorial” and select Properties. Make sure that in ActionScript Compiler, under Additional Compiler Arguments, we have “-locale en_US -defaults-css-url Default.css” This, along with the blank Default.css class included in the project, stop an annoying Default.css warning from coming up whenever you try to compile the project. Hopefully the project you imported has this taken care of. (NOTE: In Flash Develop you can probably disregard this line and DELETE the Default.css file if you get any compile errors that mention it when trying to run Main.as (thanks, commenters)).

If you are running FlashDevelop, you may have to point the classpath of the project to the src folder included in the folder you unzipped from me. Right-click on your project and go to Properties -> Classpath and direct it to the folder entitled “src” that came with the project I gave you.

Now that that’s good to go, let’s run the game and take a look at what we have.

Firstly, if you look closely, you’ll see a Flixel “Preloader” displaying the loading of the game for us. This is a simple built-in feature using the FlxPreloader class you’ll see in the code later.

Then we see a simple menu, made up of a Backdrop PNG and a button. We also control a cursor with our mouse and can select the button to start the game. Note: It’s always good practice to enforce clicking on the flash app to start the game, since it makes sure that the flash app has the user’s “focus.” If the user does not click in the app first, no inputs will be tracked.

After clicking, you’ll see what looks like a level from my game, Chip. You can control the character with the WAD or Arrow Keys, and shoot with the Spacebar. The Robot will chase you, and kill you if he gets to you. That’s all that’s here. It’s intentionally simple, but hopefully through looking at the code, you’ll understand enough fundamentals to start prototyping your own 2D games.

Now, I spent a solid amount of time commenting all the code in the project so I would not have to go over it all in detail here, but I will give a general summary of some basic concepts and what is happening.

First, let me say that I am NOT a programmer by any means. I am, what some would call, “bad” at programming. However, that’s sort of the beauty of working with something like Flixel. Despite my lack of expertise, I can easily create little games like this to tweak and learn from. So while you can use this as a jumping off point, some of the actual code in here might be considered poor practice by some.

The game starts with what’s called the application class, in this case Main.as. Here all that happens is we tell the game its dimensions, to use the preloader, and that as soon as it’s running it should just “switch states” over to the MenuState.as class.

A state is sort of hard to explain, but it’s basically the part of the application that’s running things at a given time. Each menu is it’s own state, and each level is usually it’s own state. States extend FlxState, which basically means, they inherit all of the functionality built into the FlxState class. As a result they can easily add other objects like Players and Enemies and Maps and create and update everything neatly. So, back to MenuState… MenuState is simple. It has the media embedded for the background, button and music of the game, and all it does is show the built in mouse cursor, start the music, and call a function when the player clicks on the button. This function, called PressNew() just tells the game to switch states to the PlayState.as class.

One important concept is how these classes are organized. You’ll notice all media and embeds occur right after the line “public class MenuState extends FlxState { “. This area is called the class declaration (I think) and so stuff like embedded media and variables you need to use throughout the class should go here.

The next key piece is the “Create” function, which is written after the line “override public function create():void”. Here is everything that the state does once and right away, as it’s “creating” itself. Again, everything in here runs exactly once whenever this state is switched to.

The last piece is the “Update” function, which is written after the line “override public function update():void”. Here we put anything that needs to be constantly checked (in actuality it’s around 20 times per second) while we’re in this state. In this MenuState though, all we need is the line super.udpdate(), which tells FlxState to run it’s update function, which covers all we need for this class. However, we’ll really see the update functions shine in the PlayState class, which is where the game goes next.

In the PlayState, we also have instances of our Player, an Enemy, and some ShockBullets, and you can see those are types we defined in our other classes. It might be easier to look through some of these classes first before jumping into the PlayState. Let’s start with the Player class…

First above we setup all the media and variables, and then the constructor is called. The constructor is the function that is basically the same as the “Create” function but for a FlxSprite, not a FlxState. In our PlayState, when we ask for a Player, we’ll end up writing something like player = new Player(100,200);. That last part is us calling the constructor and feeding in 100 for the X value and 200 for the Y value. This is the position we want the player to start. Note that in Flash, (0,0) represents the top left point of the screen, and as Y increases it’s actually moving down on the plane.

Another thing to note here is that this game uses SpriteSheet animation. This basically means we use an image file like this:

for all of the player’s animations. Then in the code when we load the graphic, we give it the individual size of a single sprite (not the dimensions of the entire SpriteSheet), in this case it’s 26×45. Then when we write addAnimation(“walking”, [0,1,2,3,4,5,6,7],10,true) we are telling Flash to play the 26×45 piece of the SpriteSheet all the way to the left (frame 0), then the one 26 pixels over to the right (frame 1) etc. at a speed of 10 frames per second. It’s fairly simple.

The player’s update function is where we hold the controls, and physics of the player. Anything that requires constant checking should go here.

For more details on the Player workings it’s probably easier to just read through the comments in the code. The Enemy is also fairly similar, but has some different logic and doesn’t take any input from the user (again, I recommend reading through the code).

The last piece to touch on here is the PlayState.

Here we “add” a bunch of things to the state, including a Player, an Enemy, a Camera, an array of ShockBullets, a TileMap, and a Backdrop. This happens in the Create function of the PlayState.

In the Update function, we do things like check for collision, keep the player in the bounds of the level, fire off bullets, and call “callback” functions. A callback function is basically yet another function included in the class, traditionally in the bottom. You can see in the update function when the player presses Space I call the function spawnShockBullet(); This line of code actually redirects the program to the spawnShockBullet() function at the bottom of the class, runs that logic, then the program jumps back up to the update function and continues onto the next line.

That’s basically all of the general concepts. Any further finer workings are hopefully explained via the comments of the code. If you have additional trouble you could try asking me in the comments here, but I’d recommend these fine resources over that:

FlashGameDojo

Flixel Forums

Flixel Snippets

Photonstorm’s Site

Also, here are some tutorials that really helped me getting started (and are all honestly probably better than this one I just wrote):

No Idea What I’m Doing

EZ Platformer

Making a Platform Game With AS and Flixel

Building a Retro Platformer in Flixel

Again, I hope this helps some of you to get in there quick and get your feet wet. It’s okay if you don’t understand anything. Just play around with variables and mess with stuff, switch out the music and graphics, and add some more logic until the game starts to feel like your own!