Posts tagged PushButton

Developing games with PushButton Engine – Using the Console

Nov 25th

One really cool feature that we have built into the PushButton Flash Game Engine is a console.

Using the Console

The only thing you need to do to include the Console into your project is call PBE.startup().

package
{
	import flash.display.Sprite;
	import com.pblabs.engine.PBE;
 
	public class HelloConsole extends Sprite
	{
		public function HelloConsole()
		{
			PBE.startup(this);
		}
	}
}

Once your game is running, to access the console press the default hot key, which is the Tilde (~) / Grave (`) key.

As of this post, the latest revision of the PushButton Engine is revision 702. In this version there are some commands registered by default:

help – List known commands.
clear – Clears the console history.
listDisplayObjects – Outputs the display list.
showFps – Show an FPS/Memory usage indicator.
verbose – Set verbosity level of console output.
version – Echo PushButton Engine version information.

Quick Tricks

The console supports a few shortcuts to make your life easier:

The console is not case-sensitive, so don’t worry if you put showFps or shOwFPS, the same command will execute.
You can use the up and down arrows to move through your command history.
By pressing enter on an empty command line, you can add new lines. This is helpful for adding space between commands to make it easier to read.
You can use the “name” property on a DisplayObject to make meaningful names show up in the listDisplayObjects command.
Different Log Levels are colored by default, to change the colors edit com.pblabs.engine.debug.LogColor.

Creating custom commands for the console

The PBE console also supports the ability for the developer to add their own commands.

package
{
	import com.pblabs.engine.PBE;
	import com.pblabs.engine.debug.Console;
	import com.pblabs.engine.debug.Logger;
 
	import flash.display.Sprite;
 
	public class ConsoleCommand extends Sprite
	{
		public function ConsoleCommand()
		{
			PBE.startup(this);
			Console.registerCommand("test", onTestCommand, "This is a test command.");
			Console.registerCommand("testStrict", onTestStrict, "Test strict parameters.");
		}
 
		protected function onTestCommand(... args):void
		{
			Logger.print(this, "onTestCommand: "+args);
		}
 
		protected function onTestStrict(str:String, num:Number):void
		{
			Logger.print(this, "You passed in the string: "+str);
			Logger.print(this, "You passed in the number: "+num);
		}
	}
}

Parameters are passed in sequence using spaces. So to run the test command, I would open the console, and then type “test a b c 1 2 3″. This would then call the onTestCommand method and pass in an array with 6 elements.

Below is an example of what using custom commands in the console looks like.

Changing the Console HotKey

Some of our good friends over in the Netherlands use different keyboard layouts, so they requested the ability to change the hot key binding to another key.

package
{
	import com.pblabs.engine.PBE;
	import com.pblabs.engine.core.InputKey;
	import com.pblabs.engine.debug.Console;
	import com.pblabs.engine.debug.Logger;
	import com.pblabs.engine.debug.UIAppender;
 
	import flash.display.Sprite;
	import flash.display.StageAlign;
	import flash.display.StageScaleMode;
 
	public class TestConsole extends Sprite
	{
		public function TestConsole()
		{
			PBE.startup(this);
 
			UIAppender.hotKey = InputKey.C.keyCode;
			Console.registerCommand("test", onTestCommand, "My test command");
		}
 
		protected function onTestCommand(... args):void
		{
			Logger.print(this, "onTestCommand: "+args);
		}
	}
}

WARNING!!! When changing the hot key to another key, the input textfield doesn’t escape the new key binding. So you must remove focus from the input field to use the hot key to close the console.

More information on this can be found in issue 98.

What’s coming?

I do have plans on adding either tab-complete or a drop-down auto complete list into the console which will match avaliable commands.

Another thing that I’m currently working on is code-named Tumbler. It’s and Adobe AIR version of the console which has additional features to assist in debugging and troubleshooting your games.

It’s a proof-of-concept at the moment… but if there is enough interest in it… I may spend more time on it.

Console, PBE, PushButton

Developing games with PushButton Engine – Part 1 – Using Flex and Flash Builder

Oct 26th

Posted by Nate Beck in Actionscript

2 comments

So I know I haven’t posted in quite some time. Between work, BugQuash, MAX, contributing to PushButton Engine, my country’s 500th anniversary to plan, my wedding to arrange, my wife to murder and Guilder to frame for it, I’ve been swamped.

But tonight… I break my blog silence. As I just mentioned, I’ve been contributing to the PushButton Flash Game Engine. I’m now going to show you how to set up Flex Builder 3 or Flash Builder 4 in a way that allows you to develop games on PushButton Engine, as well as how to work on the core engine itself. I’m breaking this down into very small pieces so that everyone can follow along. So it’s going to be a long post with lots of pretty pictures.

After writing this post, it ended up being longer than I hoped. So I’m going to write a series of posts about developing games using PushButton Engine. This post will focus only getting set up inside Flash and Flex Builder. The plan is to add other IDEs in as well, for example FlashDevelop, FDT, etc…

Step 1 : Download the PushButton Engine source code.

[note]
If you are not familiar with Subversion or you need a primer to the basics of contributing to or working with open source projects please check out my “Getting Dirty with the Flex SDK” post, more specifically the TechWed Presentation.
[/note]

WARNING!! For these steps to work, you must use at least revision 602 of the PushButton Engine.

Download the PushButton Engine core from Google Code. Since I am a developer in the engine, I have checked out trunk and all of the branches. My working copy is located in /pbe (or C:/pbe on Windows). I will use that location throughout the rest of this post. Make sure that if you choose a different location that you sub it in wherever I use “/pbe”.

So on OS X, to checkout the source code, open up Terminal and type in the following lines:

cd /
svn checkout http://pushbuttonengine.googlecode.com/svn/ pbe

Step 2 : Import the PBEngine Library project within Flex/Flash Builder.

Open up Flex Builder (or Flash Builder), right click in the Flex Navigator and choose Import. (You can also use File > Import > Other).

Open up the “General” folder and choose “Existing Projects into Workspace” and click “Next”.

Click the “Browse” button next to “Select root directory”.

In revision 600 of the PushButton Engine I added “FB3″ and “FB4″ directories underneath “trunk/development”. These directories have a Flex Library project skeleton within them that can be imported directly into Flex Builder.

If you are using Flex Builder 3, use the FB3 directory, and if you’re using Flash Builder 4, use the FB4 directory.

Click Finish.

You will see a Flex Library project in the Flex Navigator now. You will also have an error, don’t worry, we’ll fix that in the next step.

Step 3 : Setup the a Linked Resource for PBE

So here is the error that you will see:
configuration variable ‘compiler.source-path’ value contains unknown token ‘PBE’

The project skeleton uses something called a “Linked Resource”, so that it can find the PushButton Engine source files. To set this Linked Resource, you do the following:

Open up Flex Builder’s preferences.

Under General > Workspace > Linked Resources… Click “New…”

Click on the “Folder…” button and navigate to the PushButton Engine “trunk” folder, “/pbe/trunk” (C:/pbe/trunk on Windows).

Hit “OK” and you should see PBE listed in the Linked Resources now.

Clean the project to incorporate and rebuild all of the changes.

If you see PBEngine.swc underneath the bin folder, you are good to go! Nice work!

:: UPDATE ::

There have been file renames and other changes in the PushButton engine since this post. If your SWC is failing to build do the following.

In the Flex Navigator, right click on the PBEngine Flex Library project. Click Properties. Go to “Flex Build Library Path”, under “Classes” uncheck [source path] src and recheck it. If you are using Flash Builder 4, you can simply select “Include all classes from all source paths”. Any other questions… post a comment and I’ll answer them.

Step 4 : Create your game!

For this example I’m going to create a VERY simple Hello World game to show that we have everything working correctly.

Right-click in Flex Navigator and choose “New” > “ActionScript Project”.

Give it a name of “HelloGame”, and click Finish.

Now, to use the PBEngine Library within our HelloGame project, we need to create a link between the two.

To do this, right click on the “HelloGame” project and choose “Properties”.

Choose “ActionScript Build Path” from the list, and then click on “Add Project…”

You should see “PBEngine” in the list.

If you don’t see PBEngine, or you get a message that tells you, “There are no Flex Library projects in your workspace”, make sure that a) you have created a PBEngine Library by following the previous steps and b) the project is not closed.

Select “PBEngine” and click “OK”. You will now see PBEngine listed in the Build path libraries box.

Now that the two projects are linked, you can start using classes right out of the PushButton Engine. Code completion works, and everything compiles. Woot!

Great, now let’s write our impressive Hello World game.

Here is the source:

package {
	import com.pblabs.engine.PBE;
	import com.pblabs.engine.debug.Logger;
 
	import flash.display.Sprite;
 
	public class HelloGame extends Sprite
	{
		public function HelloGame()
		{
			PBE.startup(this);
			Logger.print(this, "Hello Nate!");
		}
	}
}

Run or Debug the game. At first you will see a blank screen, that is expected… Press the ~ (tilde or `) key, and the PushButton Console should come up.

The console has some commands by default: help, version, showFps and verbose (1 || 2)

You can add your own custom commands to the console to assist you while developing your games… but that is a post for another time.

Any questions, be sure to hit us up over on the PushButton Engine Forums or in the freenode IRC channel: #pbengine.

Actionscript, Flash, Flash Builder, Flex, Flex Builder, games, PushButton