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.

Well, I decided to check my version of Flex Builder… turns out I hadn’t updated to Flex Builder 3.0.2 yet. I know that it’s been out for a few months now, and I updated Flex Builder on my PC at work, but for some reason I forgot to update it on my MacBook Pro.

Well thankfully, updating Flex Builder is a very easy thing to do.

1. Help > Search for Flex Builder Updates.
   
2. Flex Builder will check to see if there are any updates.
   
3. Make sure you select the Flexbuilder 3.0.2 update.
   
4. It downloads.
   
5. Then opens up this panel, click OK, and follow the steps.
   
6. It makes you close out your copy of Flex Builder, and your web browser.
   
7. Come on little installer, you can do it.
   
8. Woot.
   
9. And my problems all went away.
   

If you are behind a corporate firewall or Adobe Updater is blocked for any reason, you can update Flex Builder following the steps on the Adobe Flex updater website.

Jeff goes in depth about all the really cool shortcuts within Flex Builder and Eclipse.

It’s a must see in my opinion. He has some tips in there that I didn’t know about, such as “Working sets”.

Great work Jeff!

After doing a bit of research, I learned this error occurs when trying to run Flash Player 10 code in the Flash Player 9 runtime. I thought Flex Builder would handle this for me automatically when I pointed it to the 3.2 SDK.

So here is the fix and your tip for the day.
Within Flex Builder:

1. Select your AIR application in the Flex navigator
2. From the menu choose, Project > Properties
3. Choose “Flex Compiler”
4. Add “-target-player=10″ to your Additional compiler arguments
5. Click OK

This isn’t limited to Adobe AIR, you can set the target player of your Flex applications as well.

To be honest with you guys, I’ve never really been a huge fan of Fireworks. I’m a Photoshop guy, and I have been since version 5.5 (hooray ImageReady). However, at our last SeaFlex meeting Marty gave a quick introduction into Flex skinning using Fireworks. My eyes were opened! So here is the basic run down of creating Flex skins using Fireworks CS4.

1. Within Fireworks go to Commands > Flex Skinning > New Flex Skin
   
2. Select the components you want to skin.
   
3. Skin to your heart’s desire.
   
4. When you’re finished, go to Commands > Flex Skinning > Export Flex Skin
   
5. I created a new folder called testSkin and saved to that.
   
6. Now in Flex Builder. File > Import > Skin Artwork
   
7. Browse to the folder we just exported our assets to.
   
8. Make sure the image to component mappings are correct.
   
9. And…. you’re done.
   

Amazing.

:: UPDATE ::

Marty just posted a PC (and more in depth version) of the skinning your Flex applications with Fireworks. Read it here!

One thing that has become second nature to me is the use of the Open Resource shortcut in Eclipse (and therefore Flex Builder). This handy little shortcut is a life saver.

For all the pcs: ctrl + shift + R
For all the macs: ⌘ + shift + R

This panel allows you the type in the resource you want to open, even if it is open already, and will bring it to focus. It’s amazing! Use it, love it, cherish it.

One not so well documented feature of Flex Builder is the use of the libs directory. By default, when you create a new Flex Project, a libs directory is created. So say for example, you want to create a project, and you are planning to use the Cairngorm framework.

All you need to do is copy Cairngorm.swc into your libs directory, and you’re good to go.