Pushbutton Engine – Setting Up Your IDE

In this article I’m going to give you a quick overview of how I set up Pushbutton Engine (PBE) for game development. Don’t worry if you’ve not done anything with PBE before as I’ll be guiding you through the main features over the coming articles.

NOTE: Those of you who have already had a look at PBE will note that the initial articles in this series are similar to the introduction and initial examples within the PBE documentation. For brevity and completeness I’ve opted to start at the very beginning for those who haven’t used PBE before and it made sense to create my own versions instead of bouncing readers off to alternative resources before they get going.

First up let’s talk IDEs
Personally I use Flash Builder, but you can use Flash Professional CS5 – both of which I’ll be looking at today. If you use an alternative IDE like Flash Develop or FDT setting up PBE shouldn’t be too hard to sort out. Given the slant towards ActionScript in game development you are more than likely going to be spending the majority of your time in a text editor of some description – which is fine if you are a Flash Builder user as it has a great ActionScript editor. Flash Professional users, depending on which version you are using, you may want to stick with the built in ActionScript editor or if you are using Flash Professional CS5 take advantage of the new integration with Flash Builder – the choice is yours.

As we move forward in these articles I will be talking more about the actual construction and development of games using PBE as opposed to IDE specific nuances. One thing I will highlight right now though, is that we will be looking at ActionScript 3.0 code. If you’re not up to speed with AS3 yet there are numerous resource on Adobe.com to help you make the switch. Game development is a perfect opportunity to jump on-board the AS3 train.

However, we all had to learn to walk before we tried to run, so with this in mind let’s look at how to set up our environment so we can create games using Pushbutton Engine.

Flash Builder
With Flash Builder you have two options. You can choose either a Flex based project or a pure ActionScript one – It’s up to you which one you decide to go with (the majority of the set up is identical). One thing I will recommend is that if you are looking to develop for multi screen deployment then I’d suggest opting for a pure ActionScript approach – or if you do want to use Flex for your web and desktop versions, split the project in to core functionality (used across all variants) and then specific projects for each target platform.

Before we get to tied up with development best practices let’s look at how you set up both, starting with a Flex project.

1. Create a new Flex project and call it PBE_FX_Tutorial
2. Download and extract the latest version of Pushbutton Engine (the URL is at the bottom of this post)
3. Once you’ve unpacked the zip open the bin folder in the folder created by the zip
4. Inside you should find PBEngine.swc as shown in the image below
5. Copy this to the libs folder in your Flex project (I’ll explain why in a moment)

Setting up a pure ActionScript 3.0 project in Flash Builder is identical to the steps above except you will need to create a libs folder in your project root and add that to your project as a linked SWC folder. To do this right click on the project entry and select Properties from the context menu

In the steps above I recommended that you copy the PBEngine.swc in to the libs folder in your project. Some prefer to just link it from wherever it was unzipped on their machine  but I would raise that as a potential issue.

Take this scenario: You are working on a large scale game using PBE and as part of a team you need to make sure that the content is put under version control. By simply linking to the SWC location on your machine not only does this present a problem as the path isn’t likely to be identical on everyones machines (think about how Mac OS X paths everything by user). It also means that anyone who is new to the project needs to then go and find the correct PBE SWC. This in itself could lead to different versions being used on the same game by different developers. So for ease of ramping up and making sure the project is self contained I always copy the relevant SWCs in to the libs folder to avoid these types of issues.

Once you’ve added the PBE SWC to your project you now need to update the compiler arguments so that certain metadata tags used by Pushbutton Engine are included when you compile your game.

1. Right click on the project entry in the Package Navigator panel
2. Select Properties from the context menu
3. When the properties dialog opens select the Flex Compiler entry
4. In the Additional compiler arguments field append the following to it (these are somewhat optional in my opinion and only really needed if you use metadata): –keep-as3-metadata+=TypeHint,EditorData,Embed
5. Click the OK button to apply your changes and close the properties dialog
6. That’s it. You’re all set

Flash Professional CS5
Flash Professional is just as easy to set up. Like Flash Builder, you have two options on how you develop your games using Flash Professional. You can either do all of your coding etc directly in Flash Professional or if you are using Flash Professional CS5, you can take advantage of the built in integration with Flash Builder and use that to write your code in. Like everything in life the choice is your which one you opt for – I’m happy using either.

To set up Flash Professional (I’m using Flash Professional CS5 here, but the steps are almost identical for CS4 and CS3 – although the dialogs may look slightly different), to use PBE you need to create a new FLA file and save it in to a directory somewhere on your machine (you know where you want to save it so far be it for me to dictate where it should be).

As I used a stepped procedure for Flash Builder I’m going to use the same process for Flash Professional. First up let’s set it up so you are using just Flash Professional.

1. Create a new ActionScript 3.0 FLA and save it to your chosen directory with the file name of PBE_FL_Tutorial.fla
2. Once the file is saved open the directory it was saved to and create a folder called libs (as you can see in the image)
3. Copy the PBE SWC in to this new libs folder

Now you have the libs folder and the PBE SWC added to the directory you just need to associate the SWC with your FLA file. Switch back to Flash Professional and with the newly saved FLA file still open select the ActionScript Settings entry from the File menu (File > ActionScript Settings…). You’re going to need to add a couple of bits of information here. Firstly you need to add the libs folder. Once that is done you can then associate the main ActionScript document class to the FLA. Luckily for us you can do both from within this dialog. First up the libs folder

1. If you look at the bottom half of the dialog you will see a large area that is divided in to three tabbed sections – Source path, Library path and Config constants
2. Select the Library path tab if it isn’t already selected
3. In the area below you should see two entries. One for the main ActionScript 3 libs directory and one for the TextLayout engine
4. Just above them to the right hand side you should see a set of icons (as shown in the image below) . As you can see I’ve highlighted the folder icon
   
5. To add the libs folder just click this folder icon and navigate to the libs folder, select it and click OK. Once you have done this it will appear like the entry in the image above

Before you click OK to apply these settings there is the matter of the document class to resolve. Pushbutton Engine is very ActionScript orientated so most of your development will take place in external classes. To kick this all off you need to provide the FLA with a base document class. If you look at the top of the ActionScript Settings dialog you will see the document class entry field. In here you need to put the fully qualified package name of the class you wish to use as the document class for this FLA. Bear in mind that the package path is relative to the FLA itself. To make it simpler we’ll just place our ActionScript class in the folder as the FLA.

1. In the Document class field enter the following value: PBE_FL_tutorial (you can name the class anything you wish, but for consistency I’ve used the same name as the FLA)
2. Once you have entered the value click the pencil icon to the right of the input field
3. In Flash Professional this will display an additional dialog asking you to indicate whether you want to open the new ActionScript class in Flash Professional or Flash Builder. Select Flash Professional and click OK
4. Click OK to close the ActionScript Settings dialog
5. With the dialog closed you should now see your new ActionScript document class
6. Save the file in the same directory as your FLA – making sure to name it the same as the value you entered in to the document class field a few moments ago
7. The new class extends from MovieClip, but generally PBE document classes extend from Sprite (it has a lower memory footprint) but the choice is yours if you wish to change it or not.

So that’s pretty much all you need to know to get Flash Builder or Flash Professional CS5 ready to start using Pushbutton Engine for game development. In the next article we’ll be looking at how you create objects and add them to the game.