Journal

Rico’s ActionScript 3 Game Making Guide [Anyone can do it.] ~ (PT.2) Making a Menu!


45 by 25

Holy hell that is one messy title. As stated in the previous ActionScript3 Guide, this is a guide to help teach you the basics. I learned ActionScript 3 a few weeks back and the documentation for most of this was such shite that I felt like I was just learning it all through trial and error. With that in mind I am not teaching you best practices. This is a guide by an idiots presumably for one (I wear the label with pride, don’t take this as an attack on your character). Where I place variables, what order I place objects, and everything else I do varies from project to project and really I’m just trying to feel this all out like you are. With that out of the way, let’s begin!

Firstly we’ll look at what the completed works looks like. After that I’ll go through each piece and explain it.

Click here for the Demo.

The code for that looks like this:

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

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

		//Unassigned Variables and Embeddings are put here. They don't NEED to be but I like to keep things clean.
		[Embed(source = "images/menubackground.png")] var backgroundPNG:Class;
		[Embed(source = "images/vrbutton.png")] var vrbuttonPNG:Class;

		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!

			var menubackground:FlxSprite = new FlxSprite(0, 0, backgroundPNG);
			add(menubackground);

			var title:FlxText = new FlxText( 0,  16, FlxG.width, "Victory Runner's Menu!"); //Creates and instantly assigns a value to a variable.
			title.setFormat (null, 32, 0xFFFFFFFF, "center", 0x00FFFFFF); //Formatting the text.
			add(title); //Adding it into the game.

			var vrbutton:FlxButtonPlus = new FlxButtonPlus(FlxG.width / 2 - 150, title.y + 40, StartGame, null, null, 300, 200);
			var vrbPNGimg:FlxSprite = new FlxSprite(0, 0, vrbuttonPNG);
			vrbutton.loadGraphic(vrbPNGimg, vrbPNGimg);
			add(vrbutton);

			var instructions = new FlxText( 0,  FlxG.height - 64, FlxG.width, "Click the button to continue.");
			instructions.setFormat (null, 32, 0xFFFFFFFF, "center", 0x00FFFFFF);
			add(instructions);

		} // end function create

		public function StartGame():void
		{
			var temptext:FlxText = new FlxText( FlxG.width / 2 - 70, 260, 150, "Your button worked!", false);
			add(temptext);
		}

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

	} // end class
}// end package

A few things to note. Normally you don’t put all the variables inline with the code. I’ve not seen examples that do this and I bet its a bad idea. But frankly we are building a menu right now. This isn’t something heavy duty nor is it something that really needs much prep. As with the rest of this guide we are going to be attempting to build something simple so that you understand how things work.

Then later you can go check professional guides and websites to get the nitty gritty, as it were. Alright we’ll start from the top. I explained importing in the last guide post, gonna skip that. Next we have the extension of the main state. Note that I’ve named it “MenuState” but as far as I’m aware you could name yours “PancakePalace” and it will work just the same. The only essential thing is that you have the correct spelling and capitalization in your Main.as for leading into this file (I’m speaking of ” super(1366,768,MenuState,1); ” this line).

We have two files that we are embedding in this project.

//Unassigned Variables and Embeddings are put here. They don't NEED to be but I like to keep things clean.
[Embed(source = "images/menubackground.png")] var backgroundPNG:Class;
[Embed(source = "images/vrbutton.png")] var vrbuttonPNG:Class;

Embedding files is extremely easy in FlashDevelop. You literally just right click on the file in your directory and click “embed”. It’ll paste the correct code and location.

embedcode

We embed these images, give them variables and those variables are typed as Class (Which is fancy speak for an object).

Next we’ll move into the create function. If you get curious about what that void means it just means that if you start typing this out somewhere there won’t be a tooltip for it, it’ll say “Void”. I’m not 100% sure how to add what you want but it CAN be done. Maybe for a future update after I look it up.

In create we’ll be adding a little bit of text and a button to enter into the game.

FlxG.mouse.show(); //This makes the Flixel mouse visible! FlxG.mouse.hide(); hides it!

This is a simple flixel function. It replaces your boring old microsoft mouse cursor with a flashy flixel one! That’s uh…about it. In the comment I tell you how to make it go away which will be relevant in our next guide post.

var menubackground:FlxSprite = new FlxSprite(0, 0, backgroundPNG);
add(menubackground);

This adds an image to the background. It is in the background only because its the first thing loaded in the create function. I’m about 95% sure there is a background system built into Flixel already but this works so I’m doing this for now. The image is one of the two we embedded earlier. This works pretty simple, you create a variable for a flxsprite. Then you say that it is equal to the traits on the right hand side of that equation. The location is 0,0 which is the top left corner of the screen and the image loading is the one I made for the background. It’s uh…bright.

Add very simply “adds” it to the game. If you don’t add something it won’t be in the game. I’ve made this goof many times before. You also don’t need to add it right after setting it up. You could add it later, perhaps as a conditional. I’ll show you how that is done in a bit.

var title:FlxText = new FlxText( 0,  16, FlxG.width, "Victory Runner's Menu!"); //Creates and instantly assigns a value to a variable.
title.setFormat (null, 32, 0xFFFFFFFF, "center", 0x00FFFFFF); //Formatting the text.
add(title); //Adding it into the game.

This adds the top line of text. I made the “width” of the text the same as the width of the page which has the wonderful side effect of being perfectly centered when you set the format to be centered. I don’t think anything in this line is confusing, as you are typing you’ll see popups for what all the text here means. X, Y, Text Width, Text Message for the first line. For format I don’t quite remember what everything means but again, not too complicated. Anyone with questions can leave a comment below and I’ll respond within 24 hours or so.

var vrbutton:FlxButtonPlus = new FlxButtonPlus(FlxG.width / 2 - 150, title.y + 40, StartGame, null, null, 300, 200);
var vrbPNGimg:FlxSprite = new FlxSprite(0, 0, vrbuttonPNG);
vrbutton.loadGraphic(vrbPNGimg, vrbPNGimg);
add(vrbutton);

This is our button. I originally was going to show you how to use the built in FlxButtonPlus functionality without embedding an image but the stupid thing doesn’t seem to work properly at the moment. The highlight text and normal text both show when you load (fixes on hover). So instead I created an image and made it obnoxiously big because its the only button we’ve got!

The image for the button is 300 by 200. So for the X coordinate I had it go to halfway across the screen and then I moved it to the left half the width of the image. This puts it smack dab in the center because math.

The Y coordinate is a little more clever. You can actually use the coordinates of other objects in the coordinate values for objects (as long as they are created before the object referencing them is created). In this case I have the game say “Put this object 40 pixels below the Y location of the title text”. Real simple!

Next it calls the function “StartGame” which we’ll be going over in a bit. I don’t send any text with that function call so the next part is a null. It also has no text so I set that to null as well. Finally I tell Flixel that the image I’ll be using is 300 by 200.

Next we create a variable for the embedded image. This is because you can’t use loadGraphic with a class, it must be done with a FlxSprite. Because reasons.

After that we tell the game to load that image for both the normal state and the hover state. If you wanted you could make two images so that when people hover it changes. Maybe in the next guide I’ll show how to do that but really its as simple as creating two flxsprites and then assigning each one to the two different spots.

Finally we add it to the game!

var instructions = new FlxText( 0,  FlxG.height - 64, FlxG.width, "Click the button to continue.");
instructions.setFormat (null, 32, 0xFFFFFFFF, "center", 0x00FFFFFF);
add(instructions);

Just as with the top text we are doing the same at the bottom. 64 pixels above the bottom of the screen!

Next we move into the function that is called by that button! Since the game being made is our next few guide posts I’ve created a simple function to show how custom functions work.

public function StartGame():void
{
var temptext:FlxText = new FlxText( FlxG.width / 2 - 70, 260, 150, "Your button worked!", false);
add(temptext);
}

Simply enough when you press the button it calls “StartGame” which then runs from top to bottom through the code. You could use a return but we’ll uh…go over that some other time.

You’ll notice I’m not using vrbutton.x or vrbutton.y. Well this is because ActionScript (like apparently most languages?) is object based. Anything you do in an object that isn’t part of a public variable will only exist in that object. Basically all those things I made in the create class don’t exist as far as StartGame is concerned. Because of that I had to do math.

How horrible.

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

Finally we have a little bit of stage alignment (which you could ignore but I do it because I’m hosting this online). And we have super.update(); called because otherwise nothing would happen and that would be real damn boring.

That’s that! Presuming you don’t forget these two little ditties…

} // end class
}// end package 

Yours will work too!

Anywho, coming next I’ll explain FlxTilemaps and will even provide a handy excel sheet for making your own! Thanks for visiting and hopefully soon you too will be making all sorts of fun stuff. Franky by now you might already be experimenting with other guides and be on your way!

4 Comments on Rico’s ActionScript 3 Game Making Guide [Anyone can do it.] ~ (PT.2) Making a Menu!

  1. disqus_IB8YRY2lbF

    This is great! This is first thing I’ve seen that’s down to earth and practical!!!!

    • Glad you liked it. Unfortunately I’ve been a bit busy lately and I’ve actually switched to the more complicated “haxeflixel”.

      But I’ll try to finish up this guide regardless as its somewhat universal.

Comments are closed.