Journal

Rico’s ActionScript 3 Game Making Guide [Anyone can do it.] ~ Introduction


This will be a multi part series and I’m going to try and make everything crystal clear. The guides online for ActionScript and Flixel are mostly terrible. It’s like the entire internet is conspiring together to screw with folks like you or I who just want to learn something new! No longer, I’m going to start making guides like this one for various scripting languages. I’m going to take care of all the cumbersome labor bullshit and leave you with a nice and simple guide.

Will it be 100% accurate? I’m not quite sure, but everything I’ll tell you has lead me to finish a game and we’ll be finishing another one together. The first thing you’ll want are the files needed to get this dog and pony show under way. I personally use FlashDevelop, Flixel, and Flixel Power Tools. You’ll want to grab FlashDeveloper from this location. Just get whatever their most recent one is, hopefully it’ll still work with this guide someday but if it doesn’t I’m using version 4.6.1.

FlashDevelop Version

  Once you have that you’ll want some libraries. Libraries are collections of codes that make game building much easier. I suppose an easier way to think of them is as shorthand for long actions. In WordPress these are called Shortcode, same basic idea. Grab the Latest Master Download from this location. Export the contents of the zip folder somewhere. It should look like this:

Flixel Contents

  Next we want to grab Flixel Power Tools. FPT is to Flixel what Steroids are to professional wrestlers. It takes something rad and makes it super rad.

Triple H Approves

  If that url above doesn’t work you can find more info about FPT from the ever awesome Photon Storm. Once you have these files you’ll want to export them somewhere like we did before. They should look something like this:

Flixel Power Tools Contents

  Alright once you have all this go do the installation for FlashDevelop. I recommend using the custom install settings when it asks and doing a portable install. The reason for this is that if you save your install inside of something like OneDrive or Dropbox you can work on your project from anywhere in the world! That’s pretty cool and its one of the ways I work on things both at home and at work. Not that my work is all that important on the coding side.

  Once FlashDevelop is installed open it. The first thing we want to do is add ActionScript 3 to this thing. Without that stuff you’ll be a sad panda. Click on Tools and then Install Software.

Install Software

Click on that and it will open something called “AppMan” on FlashDevelop. From here click the box beside Flex SDK and if you are feeling wild you could click the box beside Flex + AIR SDK. I did both but you can get away with one or the other.

AppMap

On the bottom right you’ll see an install button. Give that a click and grab a glass of water. It might take a while but it’ll finish downloading and installing for you. Next step will be creating a project!

Action Script Project

  Click AS3 Project, then tap that “Create Director for Project” deal, next type in the name of your project and then hit OK! Once this is done you’ll be asked what your Author Name is…make that whatever your name is or what you like to be called. Next hit OK and you’ll see something “close” to this:

WhatYouSee

If you want you can hit “F5” and that should open a Flash Window. If it doesn’t you’ll need to install Flash on your PC, but frankly it should be there already. If it isn’t you can get it here. Anyways, once you are done having fun looking at a blank white screen double click on the Main.as on the right there. That should open it. Posting code here is going to be a bit of a pain in the ass but I’ll do my best.

You should see something like this:

 package

{
	import flash.display.Sprite;
	import flash.events.Event;

	/**
	 * ...
	 * @author Rico Penguin
	 */
	public class Main extends Sprite 
	{

		public function Main():void 
		{
			if (stage) init();
			else addEventListener(Event.ADDED_TO_STAGE, init);
		}

		private function init(e:Event = null):void 
		{
			removeEventListener(Event.ADDED_TO_STAGE, init);
			// entry point
		}

	}

}

That’s some scary looking shit. Honestly we aren’t ready for event listeners or any of this nonsense. So what you’ll want to do is erase all that (howling like a warrior while you do) and replace it with this:

package
package
{
	import org.flixel.*; //This imports all the contents of flixel to be accessed by this file. There is no harm in pulling everything.
	import org.flixel.plugin.photonstorm.*;  //Same as before but with flixel power tools!

	[SWF(width="1366", height="768", backgroundColor="#000000")] //This is creating the actual SWF window, giving it a resolution, and a background color. We are going to use the world's most common resolution for this project.

	public class Main extends FlxGame //A class is just an object. This object is called Main and it "extends" FlxGame, that is to say that it is an extension of FlxGame. More on this later.
	{
		public function Main() //This function is called once the window loads. There are multiple kinds of functions you'll be seeing in future parts!
		{
			super(1366,768,MenuState,1); //Super is a command we'll go into more detail later. This will currently throw an error because we are missing a file!
		}
	}
}

Apologies for all the commenting, I am an addict. Any of the //message content can be safely deleted or changed. The client doesn’t actually see it (or it kindly ignores it).

The astute among you will notice that I’ve got two import lines at the top that are pointing to something you haven’t added yet! You are correct, on the right side of the screen where you double clicked the Main.as file you will see a folder called “src”. Right click on this and click “Explore” that should open the folder in explorer. Next you’ll want to open up the two locations where you stored your previous files. You’ll notice that the contents of Flixel start at “org” and the contents of Flixel Power Tools start at “src”. This is because they want to complicate your life. Click twice on the src folder in Flixel Power Tools so that it also is an “org” folder. Copy this folder and paste it (or move it) into the src folder for FlashDevelop. Say yes anytime it wants to replace things or whatever. Do the same with Flixel itself. Your src folder should look like this:

Next we need to create the MenuState file. The name is 100% arbitrary. It’s a menu and a “state” of the game so I am calling it MenuState. You could call it RainbowLaserTits if you wanted but I recommend keeping your titles shorter than that and more relevant. Press ctrl+1 and you should have a file now called “Untitled#.as”. Click ctrl+s and the save prompt should come up. Name the file “MenuState” and save it. Capitalization is critical! Never screw that up! No pressure.

Alright now you should have a file that looks like this:

package 
{

	/**
	 * ...
	 * @author Rico Penguin
	 */
	public class  
	{

	}

}

Admittedly this is less daunting but holy shit that’s not enough content! It doesn’t do anything at the moment! Amusingly it even throws an error if you press F5 (MenuState.as(9): col: 2 Error: Syntax error: expecting identifier before leftbrace). So I suppose the best thing we can do is make this thing do something that doesn’t error. I’m keeping it stupid simple though because I want the real coding lesson to begin tomorrow (or in the next post, whenever that is).

package
{
	import org.flixel.*; //Imports flixel.
	import org.flixel.plugin.photonstorm.*; //Imports FPT.

	public class MenuState extends FlxState //Add Flixel API to MenuState.
	{

		override public function create():void //When the gamestate loads this gets called.
		{			
			FlxG.mouse.show(); //This makes the Flixel mouse visible! FlxG.mouse.hide(); hides it!

		} // end function create

		override public function update():void //Anytime the timers are called this part runs. More on this later!
		{
			super.update(); // "Updates" the game every time an action is called or anything is activated.

		} // end function update

	} // end class
}// end package

With this you should be able to hit F5 and not get an error! I say that because I’ve been doing this step by step as I write it down and I haven’t gotten an error. Congratulations if you’ve made it this far because this is what you should see!

Congratulations!

Congratulations!

Personally I think that’s cooler than “Hello World” but your results of joy may vary. Congratulations though, seriously, you’ve come a long way in a single post. If you have any problems or questions feel free to leave a comment. I think for the most part I’ve kept this as simple as I can. I want you to understand this stuff rather than searching the internet for hours trying to figure out simple shit. As we move along I’m going to explain ever bit of code to the best of my abilities. Your understanding will match mine and that might not be correct but it’ll be correct enough to easily make games! Don’t feel bad about copying what I do. Coding is really 10% learning something for the first time and then 90% copying and pasting what you’ve learned for the rest of your life in creative new ways.

 “Never memorize what you can look up in books.” – Albert Einstein

Thanks for reading and I look forward to making silly games together soon!