This is the fourth part of our tutorial series by Intern Sina on creating an AIR application for free on a PC using FlashDevelop, and deploying it as a native app on an iOS device like the Apple iPad, iPhone or iPod Touch.

Jump to other parts in the series:

• Part 1 – Sign up for an Apple iOS Developer Account
• Part 2 – Obtain your Signing Certificate & Mobile Provisioning Profile, and create your App ID
• Part 3 -Use FlashDevelop to build your mobile AIR app

In this section of the tutorial, the rubber meets the road. You’ll make all the finicky adjustments to FlashDevelop and the AIR bundling files to get your Hello Planet app up and running on your testing device.

Point FlashDevelop to the Merged SDK Folder

Now that your (cr)app is successfully up and running, you have to make a few tweaks and adjustments to FlashDevelop. You’ll start by telling FlashDevelop all about that merged SDK folder you created in Part 3.

1. In the Project panel on the right, you’ll see a file called AIR_iOS_readme.txt. Double click that file to open it.

   This txt file lists a number of settings needed to get your ipa file working. The ipa file is the Holy Grail- the native app file that you’ll send to your testing device to see everything working properly. A window pops up with a bunch of options.

2. Click the Project Properties button at the top of the Properties Panel (alternately, you can use the menus to navigate to Project>Properties).

   

3. Change the version of your AIR SDK from 2.7 to 3.0 because (at the time of this writing), that is the latest version.

   

4. Click on the SDK tab, and click Manage.

   

5. On the next screen you will see list of installed Flex SDKs. Click the ellipsis (…) button at the end of that line. An InstalledSDK Collection Editor window pops up.

   

6. You’re going to point FlashDevelop to the location of our recently-downloaded Flex SDK (the same folder that contains both the Flex SDK and AIR SDK that you created earlier in this tutorial). First click the Add button, and then click on the Path line to get another ellipsis. Click on THAT ellipsis to browse your computer.

   

7. Once you have clicked the ellipsis button, a Windows File Browser appears. Navigate to the merged SDK directory. Select that folder and click OK.

   

8. Click OK again to exit the InstalledSDK Collection Editor window.
9. Click Close.
10. In the drop-down menu, you should see the Default option. Click on the drop-down list and choose the SDK location you just told FlashDevelop about.

    

11. Click Apply.
12. Click OK. Voila! Your SDK is now setup for your FlashDevelop Project.

    Let’s just test it out quickly to see if it works. The code you pasted in the previous tutorial prints out the words “Hello Planet” within your app. Well, I’m going to change mine to say “Sina is Cool”, just because I can, and also because I AM COOL. (You may be tempted to replace “Sina” with your own name. Please don’t, because uh … your code won’t work.)

    Your resulting app should look like this:

    

    A beautiful sight, isn’t it?

    (At this point, Sina actually is pretty damned cool. – Ed.)

Delete the Extra Icons Folder

Now you have FlashDevelop set up to create mobile-formatted AIR apps. Your app compiles, and you have your Mobile Provisioning Profile and your .p12 Signing Certificate waiting in the wings. All you need to do is combine all these amazing files together to create the Holy Grail .ipa file.

An .ipa file is like the program file – the Windows executable (.exe) – that you need to test your iPhone/iPad App on a device, and ultimately upload it to the Apple App Store.

The creators of FlashDevelop 4 made a minor error when they created the Mobile App template: the template generates a duplicate icons folder that will cause a conflict when you try to bundle your .ipa file. You need to get rid of this extra folder to make sure your .ipa file to builds properly.

1. Look in the right sidebar that lists your files and folders. You’ll see a folder called bin. (This is one of the folders that FlashDevelop created for you automatically when you created your project.)
2. Click on the little plus sign beside the bin folder to expand it. You will see a folder called icons tucked inside. Right-click the icons folder and click Delete. Problem solved.

   

Integrate Your Cert Files

The book includes interviews from the developers of these fine titles:

• Canabalt
• Sword and Sworcery EP
• Infinity Blade
• Angry Birds
• Words with Friends
• Plants vs. Zombies

It really is a remarkable collection of stories, and a very current must-read book for you if you’re currently embroiled in, or are considering, iOS development.

Ponycorns started life as an online Flash game, but now enjoys success on mobile platforms. For a lesson on how to port your Flash games to iOS, check out Flash to iOS: A Step-by-Step Tutorial right here at Untold Entertainment.

This is the third part of our tutorial series by Intern Sina on creating an AIR application for free on a PC using FlashDevelop, and deploying it as a native app on an iOS device like the Apple iPad, iPhone or iPod Touch.

Jump to other parts in the series:

• Part 1 – Sign up for an Apple iOS Developer Account
• Part 2 – Obtain your Signing Certificate & Mobile Provisioning Profile, and create your App ID
• Part 4 – Modify your project settings and test your app on an Apple device

Luke Loses His Hand

Part 2 of this tutorial was like The Empire Strikes Back. It was the crisis moment in the story of deploying a Flash project to the Apple iOS platform. It was dark, it was difficult, and Han Solo wound up frozen in carbonite. Part 3 is redemptive: with all that command line and certificate red tape out of the way, you can finally build our AS3 app using FlashDevelop. Watch closely, friends: you may spot some ewoks.

Install Flash Develop

As I mentioned earlier in the series, FlashDevelop is a FREE, PC-only coding environment that is used throughout the industry and loved by many. If you haven’t installed it, head here to download the latest version.

FlashDevelop is an IDE (Integrated Development Environment) where you can create many different types of applications from scratch. The most amazing thing about FlashDevelop is that you don’t actually need to buy Adobe’s Flash Professional software to create Flash (swf) content. FlashDevelop has amazing, time-saving features like importing code libraries on the fly, and numerous awesome templates. At the time of this writing, the latest edition of FlashDevelop is 4.0.0. This version of FlashDevelop contains a template for Mobile AIR applications which you can use for iOS and Android development. In this tutorial, you’ll use the iOS version of the template.

Create a Merged SDK Folder

There are two SDKs (Software Development Kits) you’ll need to deploy Flash content to the iOS platform: Flex and AIR. Depending on the version of FlashDevelop you install, these two SDKs may already be included in the download. You’re going to download them both anew and put them in a single folder. That way, if you mess anything up, you can take off and nuke the site from orbit instead of messing up your main FD install. It’s the only way.

1. Download the latest AIR SDK (which, at the time of this writing, was v3.0)
2. Download the Flex SDK.
3. These two packages download as .zip files. Extract them wherever you like on your computer – just make sure you know where you put them.
4. Once you have both SDK’s extracted to separate folders, copy everything in the AIR SDK folder into the Flex SDK folder. Windows will ask you if you want to overwrite certain files. Say “yes” to everything.

   

   You now have a folder with the Flex SDK and the AIR SDK merged into one. This is a Good Thing™.

Point FlashDevelop to the Flex SDK

In order to compile (build and execute) your app, you have to point FlashDevelop to the merged SDK folder that you just created.

1. Open up FlashDevelop and hit F10 or go to Tools->Program Settings in the menus.

   

2. In the Program Settings menu, click on AS3 Context.
3. Find the Language section, and the Flex SDK Location line within it.

   

4. Click the ellipsis button at the end of that line, and navigate to the merged SDK folder.
5. Click Close to commit the change.

Set Up Your Mobile AIR Application

Once you have downloaded and installed FlashDevelop, open it up and you should see it in all its glory:

To begin with, you’ll need to create a new FlashDevelop project, which is a group of folders governed by a file filled with metadata about your project.

1. Create a new project by clicking Project -> New Project in the menu.
2. Now you will see a screen with a multitude of options. These are all project starter templates that FlashDevelop has for you to use. The one you want is the AIR Mobile AS3 App. Select this template, choose a location on your hard drive to save it, give a name to your project, and hit OK.

   Note: A package name is not required but the option is there if you’d like to use it.

   

   After you hit OK, FlashDevelop creates a number of folders and files for you, including:

   • The .as3proj file, which is a FlashDevelop project file filled with metadata that keeps track of various aspects of your project.
   • The bin folder. This is where your finished files end up.
   • The lib folder, where you can put your “construction” files and artwork.
   • The src folder, which contains your .as AS3 code files.
3. Once you’ve created your project file, FlashDevelop starts you off with a blank screen. To open up your code, click on the src folder in the Project sidebar on the right. (The Project sidebar lists your computer’s actual directory structure so that you can access your Actionscript files quickly and easily.)
4. Inside the src folder, double click the Main.as file to open it. This is your project’s point of entry, where you can start writing the code for your app.

   

5. Push the F5 key on your keyboard, or the click the little play button at the top-middle of FlashDevelop to compile and run your project.

   

   The first compile will take little bit of time, but any compile after that should be quick, because the compiler builds on an as-needed basis, compiling only your most recent changes (as opposed to Flash Professional, which compiles your ENTIRE project every single time. Bleh!). Once you run your new project, the FlashPlayer should pop up and you should see a blank screen. Luckily, this is exactly what we want. As of right now, this is your App.

   

Hello, Planet

This is nice and all, but let’s try to the write a simple message on screen so that when we are testing, we know it actually works. Let’s write “Hello Planet” on-screen.

1. Just below the green commented line where it says //entry point in your Main.as file, copy and paste these lines into your code:

   var tf:TextField = new TextField();  
   var format:TextFormat = new TextFormat();  
   format.font = "_sans";  
   format.size = 48;  
   tf.defaultTextFormat = format;  
   tf.text = "Hello Planet";  
   tf.width = stage.stageWidth - 20;  
   tf.x = 10;  
   tf.y = 10;  
   addChild(tf);

   

2. Click the compile button (or press F5). Did it screw up? Good. There are a couple more things you have to do before you are ready to compile without errors.
3. In your code, click to place your cursor carat on the word Textfield and hit Ctrl+Shift+1 on your keyboard. The word turns blue. If you scroll to the top of the class, you’ll notice that there is an extra import line at the top of your code. CTRL+SHIFT+1 is a special feature of FlashDevelop that does code completion. In this instance, CTRL+SHIFT+1 automatically handles your import statements for you. You need to import the TextField code with this statement if you want your TextField to work.
4. Use CTRL+SHIFT+1 on the TextFormat word and you should see this:

   

5. Now click Compile (or press F5).

   

   Thar she blows!

   (It works, but it’s no Angry Birds. – Ed.)

Bust Out the Hardware

This is moving along nicely. You:

• Installed FlashDevelop, a free and open-source IDE for creating Flash and AIR content
• Downloaded and sunk the latest AIR SDK and Flex SDK into a single, merged folder
• Pointed FlashDevelop to the Flex SDK to use its superior compiler
• Created a new FlashDevelop project using the Mobile AIR application template
• Wrote and compiled a new Hello Planet AIR app that you can deploy to a testing device

In the next part of the tutorial, you’ll fine-tune FlashDevelop and modify a number of settings and batch files to create the magical, mystical .ipa file, and you’ll see that file running on your testing device.

Continue to Part 4

This is the second part of our tutorial series by Intern Sina on creating an AIR application for free on a PC using FlashDevelop, and deploying it as a native app on an iOS device like the Apple iPad, iPhone or iPod Touch.

Jump to other parts in the series:

• Part 1 – Sign up for an Apple iOS Developer Account
• Part 3 -Use FlashDevelop to build your mobile AIR app
• Part 4 – Modify your project settings and test your app on an Apple device

Drudgery

Without a doubt, this section of our tutorial series on bundling your Adobe AIR App for Apple’s iOS platform is the pits. You have to use a complicated command line interpreter, you have to juggle what may feel like a million different certificates and profiles, and you have to jump through a dizzying array of hoops just to get everything set up … and you’re not even going to start building your app at all! But trust me: once you’ve cleared these hurdles, the rest of the process is gravy.

The first goal of this tutorial is to create a signing certificate, which is used very much like a hot brand on cattle. It’s the digital signature of you or your company that identifies an app as your own. We need to use a program called OpenSSL to create this signing certificate.

Install Open SSL

In order to turn your future AIR project into a native app, you need to create two important files: a Signing Certificate and a Mobile Provisioning Profile. If you are working on a Mac, you actually use a program called Keychain to do some fancy voodoo magic and get the certificate you need. We are working on a PC and we do not have that luxury, so there are a couple of confusing steps that we must go through.

The first thing you have to do is go to http://www.slproweb.com/products/Win32OpenSSL.html. Scroll down, and then download the Visual C++ 2008 Redistributables and install the resulting file. Next, download the Win32 OpenSSL v1.0a Light file and install that after you have installed the first package. These two files will help you create the Signing Certificate Request you so richly deserve.

Be sure to keep track of where you installed those last two elements. Next, visit this site:

http://help.adobe.com/en_US/as3/iphone/index.html.

These are Adobe’s help files for generating your signing certificate and then converting that certificate into a .P12 file. If you get lost in this tutorial, that page will be your safety net.

On that Adobe support page, you will see some instructions for Mac machines. Ignore them. Scroll down to the Windows instructions and give them a once-over.

The instructions say that you have to install Open SSL. You’ve already done that. Open a command prompt window. You can do this by going to your Start button and typing in cmd in the search field. (You can also hold the Windows key on your keyboard and hit the “R” key (for “Run”), then type cmd and hit Enter.)

Once you are in the command prompt, travel your way to your Open SSL bin folder. Depending on where you installed it you will have to travel to a different path than in this example. (For your sake, i hope you installed Open SSL in a location that you can remember!)

If this is your first time using the command prompt, here’s a quick primer on the commands that will help you get around:

• cd This command means “Change Directory”. If you are in a directory and you want to go into one of its sub-directories, use this command plus the directory name (example: cd directoryName)
• cd.. This command will pull you up one level in your directory structure
• dir Type this command to see a list of all of the files and folders within your current directory
• dir /w The /w (wide) switch spreads a directory listing across multiple columns. This is useful for seeing all the folder names at a glance, instead of in one big long scrolling list.

You may have some problems getting some of the following commands to work. A fine commenter (and Ontario resident!) named Dan Zen mentioned on the Adobe guide’s comments section that you may need to input set RANDFILE=.rnd in your command prompt before the following commands will work properly.

Generate a Signing Certificate Request File

With all of that taken care of, you can start inputting some commands to create your Signing Certificate Request file. Once you have that file, you’ll use it to ask Apple for your proper Signing Certificate file that you’ll use to identify your app.

1. Punch this command into your command line interpreter and hit the ENTER key when you’re finished:

   openssl genrsa -out mykey.key 2048

   You should see this response:

   

2. Next, type (or highlight the line, right-click, choose “Copy”, and right-click/”Paste” in the command line interpreter):

   openssl req -new -key mykey.key -out CertificateSigningRequest.certSigningRequest  -subj "/emailAddress=yourAddress@example.com, CN=John Doe, C=US"

3. Now, before you hit ENTER you’ll want to edit a couple of things. First, replace “John Doe” with your own name or company name. Then replace the “yourAddress@example.com” email with your own email. Then press ENTER.

   You should get a message similar to this:

   

   You just generated the Signing Certificate Request file that you’ll use to ask Apple for your Signing Certificate. The Signing Certificate Request file is located in the bin folder of your Open SSL install. It has a .certSigningRequest file extension and should look like this:

   

Obtain a Signing Certificate for Development

You have to upload your Signing Certificate Request file to the Apple Provisioning Portal to get your signing certificate.

Note: There have been instances where this upload does not work with Google Chrome. Just to be safe, use another browser like Firefox.

1. Navigate to the iOS Provisioning Portal after logging in with your developer account and click on Certificates.

   

2. Click Request Certificate.

   

   Note: If you are a team member and/or you have not paid the annual developer fee of $99 dollars, then you cannot request a Signing Certificate. Only the Team Admin – the person who has paid the development fee – will be able make this request.

   On the next screen, you will upload the Signing Certificate Request file that you generated in the previous section.

   

3. Click the Browse button and navigate to the bin folder located within your OpenSSL folder.
4. Once you have selected the Signing Certificate Request file, click Submit. Your next screen should show this:

   

5. Just hit Refresh a couple of times on your browser and you should eventually see this:

   

6. It’s your Signing Certificate! Go ahead and download it. Just to make things easier, you can save that certificate in the bin folder in the Open SSL folder, where your Certificate Signing Request file is sitting.

Convert the Signing Certificate to a .p12 File

Are you having fun yet? Yeah, me neither. We are making good progress though. The next step is converting that Signing Certificate to a p12 certificate, because Apple loves certificates.

1. From the Adobe help page, visit the link describing the process of converting a developer certificate to a p12 file. You get a list of more commands that you’ll have to punch into your trusty old command prompt.

   

2. Copy the first command (highlight the text, right-click and select “Copy” from the context menu):

   openssl x509 -in developer_identity.cer -inform DER -out developer_identity.pem -outform PEM

3. Open up your command prompt as I showed earlier, and navigate to the bin folder of your Open SSL directory.
4. Once you’re there, paste in the first command (right-click and select “Paste” from the context menu), and press ENTER.
5. Skip ahead to Step 3 of the Adobe help guide and copy that command. (The command in Step 2 is for Macs only.)

   openssl pkcs12 -export -inkey mykey.key -in developer_identity.pem -out iphone_dev.p12

6. Once you punch in the command, enter a password and then verify that password. Make sure the password is something that you will remember. (Save it in a .txt file in that folder if you’ve got a lousy memory like me – Ed.) When you are typing in your password, the command prompt does not give you the luxury of seeing dots or asterisks to indicate how many letters you are typing in. Rest assured that the command is accepting your input.

   Note: You may get an error mentioning a “random state”. Just type in the command set RANDFILE=.rnd and it should fix the problem for you.

7. Go into the bin folder in your Open SSL directory and you should see your .p12 file. Hooray!

   

Create an App ID

Now that you have the precious file you need, it’s finally time to create your Mobile Provisioning Profile. You’ll start by setting up a unique ID for the app you’re creating.

1. Navigate back to the Provisioning Portal in your web browser to create an App ID for your app. Log in, click on Provisioning Portal, and click on App IDs.

   

2. Click New App ID.

   Note: If you have not paid the developer fee, or if you are just a team member of the Team Admin, you will not see this option. Ask your Team Admin to complete this step.

   

3. On the next screen you’ll start by writing a Description for your app, which can be anything you want. (This is what the player will see when he sees your app in the App Store. Obviously, there’s a whole marketing concern here that’s outside the scope of this tutorial. Since we’re just building a test app, i recommend you punch SOME CRAZY NONSENSE in there for your description. Take THAT, marketing. -Ed)

   Within the Bundle Seed ID (App ID Prefix) you will have various options, depending on your account status. If you are the Team Admin, you’ll have a “Generate New” option. Team Members will only see a “Use Team ID” option. (If this is not your first App, you could also choose the Bundle Seed IDs for previous project). Either way, leave it at the default.

   The Bundle Identifier lets you create a specific package for your App. The standard way to make this package is to reverse the name of your website domain. I used com.sina.ipadtest. (Our team uses com.untoldentertainment.whatever – Ed.)

   Alternately, you can use a generic Bundle Identifier by just putting an “*” in the field.

   Note: There have been cases where the asterisk does not work for some people. It is a safe bet you make a specific namespace like the examples above.

   

4. Click Submit.

   Voila – you have now created your App ID! On the next screen you will see all of the app profiles you’ve created.

   

Create a Mobile Provisioning Profile

Now that you have an App ID, you can now create your Mobile Provisioning Profile. This is the crowning touch to everything we’ve done in this tutorial so far. The Mobile Provisioning Profile glues your developer(s), your Signing Certificate, your app ID and your testing device together. Once you have this file, you’ll be able to test an app on your device.

1. Within the Provisioning Portal website, click Provisioning in the sidebar.

   

2. Click on New Profile.

   Note: You only see this option if you are the fee-paying Team Admin.

   

3. Give your provisioning profile a Profile Name.

   

4. Choose the Signing Certificate(s) that you want to use with this profile.
5. Use the drop-down list to indicate the app for which you’re creating this profile.
6. Finally, indicate the testing device you want to test it on.
7. Click Submit.

You’ll be taken to a screen that says your Mobile Provisioning Profile is pending. Just click your browser’s refresh button a couple of times until the Downloadbutton appears, and download your precious, hard-fought profile. Make sure to save it in a location you’re likely to remember.

Are We There Yet?

That was a big pile of hoops to jump through just to test an app on your device, and we haven’t even begun building the app yet! Here’s what you just accomplished:

1. You used the command line and OpenSSL to create a Certificate Signing Request file.
2. You sent that file to Apple. Apple responded by enabling you to download your Signing Certificate file. This file identifies you as the developer of your app.
3. You converted your Signing Certificate to the .p12 format.
4. You created an ID for your app.
5. You created your Mobile Provisioning Profile, the glue that holds all these elements together and enables you to test your app on an iOS device.

The good news is that you DO NOT need to repeat the steps to create your Signing Certificate for additional apps. Now that you have that file, you’ll use it to sign all of your iOS apps from here on in. Similarly, you won’t have to re-enter your developer ID or device ID for future projects (unless, of course, you gain a new team member or device). The App ID and Mobile Provisioning Profile are the two pieces that are unique to your app – you WILL need to repeat those steps for additional projects.

The next part of this tutorial series will cover the process of creating your actual Adobe AIR app using FlashDevelop, bundling it up with this mess of certificates and profiles you just built, and deploying the app to your testing device.

Continue to Part 3

This is the first part of our tutorial series by Intern Sina on creating an AIR application for free on a PC using FlashDevelop, and deploying it as a native app on an iOS device like the Apple iPad, iPhone or iPod Touch.

Jump to other parts in the series:

• Part 2 – Obtain your Signing Certificate & Mobile Provisioning Profile, and create your App ID
• Part 3 -Use FlashDevelop to build your mobile AIR app
• Part 4 – Modify your project settings and test your app on an Apple device

Dead Wrong

There’s a lot of FUD floating around about Flash these days. Ever since Steve Jobs took to the mic and sounded the death knell of at least the perception of Flash, there’s been heaping gobs of misinformation about what you can and can’t, should and shouldn’t do with Flash. i chalk it up to the fact that death is news. It’s BIG news when Michael Jackson dies, BIG news when Steve Jobs dies, and equally big news if you can be among the first to report on the death of a technology or company – RIM, Flash, Palm, HP – take your pick. If it bleeds, it leads.

This hyperbolic and sensational misreporting is particularly damaging for those of us who have made our living developing with Flash and Actionscript. Back in 2000, when i first got into Flash, i chose it because the alternative was HTML. HTML appeared and performed completely differently depending on a number of different factors:

1. The platform (Mac, PC or Linux)
2. The screen resolution (640×480, 800×600, 1024×768, etc)
3. The browser (Netscape, Internet Explorer, Safari)
4. The browser version (HTML could render completely differently from IE6 to IE7)

Meanwhile with Flash, i could build something inside the little Flash Player box, and it would look and behave reasonably identically across platforms, resolutions, browsers, and browser versions. (Subsequent versions of the Flash player complicated things a smidge, but we were still WORLDS away from the pain of HTML). What’s more, as a visual person, i could actually lay things out within the tool, instead of coding them abstractly and waiting to see how the browser would render them. If i wanted something to appear over there, i picked it up and put it over there. No futzing around with padding or align tags for hours.

The push towards HTML5 doesn’t scare me – more accurately, it makes me feel ill. It’s a step backwards. Without proper tooling, i see myself banging my head against the wall picturing absolutely everything in codespace (rather than concretely laid out in front of me in designspace), and programming all kinds of exception cases so that my content performs properly depending on platform, browser and version. You know what? No thanks.

Prying Flash from my Cold, Dead Hands

As long as the tools for other technologies stink, and as long as i can keep making and monetizing projects in Flash, i’m going to stay the course until there’s a compelling technological /creative/workflow reason to make a jump. Untold Entertainment has deployed two games written in Actionscript (Sissy’s Magical Ponycorn Adventure and Heads) across two different mobile platforms (Apple iPad and the BlackBerry Playbook), and we’re just getting warmed up.

Here are the facts, at the time of this writing:

1. No one really wants to play a game in a browser on a phone. Native apps are where it’s at.
2. Yes, you CAN put Flash- and Actionscript-created content on an iPhone, in native app format.
3. You can even do it without having to buy Flash Professional or Creative Suite.
4. You can develop entirely on a PC until the very last step (uploading content to the App Store).
5. Untold Entertainment is about to show you how.

What You’ll Need

While buying Adobe’s tools is optional, you’ll still need to spend a bit of money (or mug the right people) to pull this off. Here’s what you’ll need:

1. An Apple Developer account, which is $99 USD/year. Once you start down this path, you’re in it for the long haul … if you let your developer account lapse, they pull all your products off the store. For realsies.
2. A Mac (not free) running the latest version of Xcode (free).
3. An iOS device (optional, but obviously recommended).
4. FlashDevelop v4 or better (free, PC-only)

Introducing Sina

Sina Kashanizadeh is a Sheridan College computer programming student and an intern here at Untold Entertainment. He’s done all the legwork in this process, and has written this step-by-step guiding on porting your Actionscript projects to iOS. Take it away, Sina!

Flash on iOS? So You Want to Be a Hero…

With the mobile world expanding at a crazy rate you may have had the crazy idea to try making an App yourself and putting it on the iPhone. Well, you’re a brave soul, because it can be a confusing task. This is why I have scoured the internet and composed a step by step tutorial of this process. This tutorial would not have been possible without the fantastic people that maintain FlashDevelop and the wonderful community behind it. I would also like to thank Lee Brimelow and Adobe for putting out some great tutorial videos that helped me out a lot. Last but not least, I would like to thank CodeandVisual.com for putting up a fantastic comprehensive guide that inspired me to move forward whenever I had trouble writing this tutorial.

I just want to be clear that this tutorial is not the “be-all, end-all” of this process. There are many different ways of transferring your Flash App to iOS, and the problems I cover are specific to my method. Also, the process I cover is PC-specific.

Getting Started

Before we begin, I would like to recommend a very good video resource by Adobe Evangelist Lee Brimelow, in which he explains the basics of adding an app to the App Store when using Flash. If you do not know how this process works, I highly recommend this video, as it breaks down the somewhat painful process of adding an AIR App to the App Store when using a PC (thanks again, Lee!). The good news is that if you go through this once, you’ll understand the ins and outs of the process. You only have to do the most painful parts once.

The video covers a myriad of stuff but the basics boil down to this: Your end goal is to create an .ipa file, which is what you’ll upload to the App Store. To do this you will require:

• An App
• An iOS developer ID from Apple ($)
• An iPad or iPhone ($)
• A Mac ($, but required for one step only … borrow one from a friend!)
• A Signing Certificate
• A Mobile Provisioning Profile
• YOUR SOUL

Sounds like fun? Well it isn’t, but let’s get cracking anyway!

Any Club that would Have Me as a Member

As I mentioned above, you’ll need a developer ID from Apple. Head over to the iOS Dev Center and register for “free”.

Go through the steps of signing up and the email verification and you will acquire an Apple ID. Now, the unfortunate thing is that you get the Apple ID for free, but if you want to develop anything with it on a device – even a silly test app that you will never release – you will have to pay $99 a year. You’d better be positive that your Angry Birds clone will be worth at least a hundred bucks a year in revenue. You can sign up for a free student account, but again you can’t really do anything with it unless you drop some cash. If you are helping someone develop an App for the iPhone/iPad and they are paying the developer fee, they can add you as a partner to their project.

Adding a Device to Your Developer Account

If you want to test and ultimately launch this App, you will need an Apple device such as an iPhone, iPod Touch or iPad. You will also need to register your Apple device with your Apple ID. Follow these steps:

1. Go into the iOS Developer website and log in with your new account info. Here, you will see the iOS Provisioning Portal. Click on it to see further options.

   

2. click Devices in the sidebar.

   

3. Click Add Devices.Note: if you are a partner developer with a team member profile, you will not be able to add a device. The option will only appear for the master account holder.

   

4. On this screen, you can add up to 100 devices to your account. Start off by adding your Device Name. Nothing fancy here – just enter something that will help you identify it – ie “Sina’s iPad”, or “iPhone what i stole from that guy that one time”.
5. Enter the Device ID (40 hex characters). This is the serial number that is associated with the device that you are trying to register. To find this Device ID, open iTunes while your device is connected. On the main screen, you will see all the information about your device, including a field called Serial Number. It doesn’t look clickable, but click on that field anyway and the number changes to a hex code. That’s your device ID.

   

6. Once you’ve filled in those details, click Submit and the device will be added to your Developer account. Now you can build an Adobe AIR application and test it on your device.The next tutorial will take you through the process of requesting and creating a Signing Certificate, converting that certificate to the p12 format that Apple requires, and generating a Mobile Provisioning Profile for your new app.

   Continue to Part 2

When Untold Entertainment Inc. turned three last year, we were reeling from the fallout of the global economic collapse. It’s been a slow, difficult recovery, and we still have a lot of work left to do, but i’m happy to say we’ve nosed out of the tailspin. This was a landmark year for Untold; we are poised to have an absolutely incredible fifth year going forward. If last year was our Empire, this year is our Jedi. Bring on the Ewoks, baby.

Here’s a look at the Year That Was.

2010

August

Last fiscal ended on a dark note. We were struggling through Spellirium, our post-apocalyptic puzzle adventure game, as various production problems saw the budget sapped with very little to show for our efforts. The year ahead had us planning to complete service projects in the hope that we’d bank enough margin to continue working on the game.

September

My book was published! Unity 3D Game Development by Example: A Beginner’s Guide is a great introduction to game development, computer programming, and Unity 3D itself, which is a super-powerful game engine for creating on a wide variety of platforms. Thanks to you all for buying a copy, or for recommending the book to your friends.

Fall

We launched Jinx 3: Escape from Area Fitty-Two on YTV.com. Jinx 3 was the first game to use UGAGS, the Untold Graphic Adventure Game System. It supported multiple playable characters, an inventory system, a subtitle system, game variable control, and a “puppet” guidance system, which enables the developer to write commands to build in-game cutscenes. Jinx 3 was the first UGAGS game we developed, but the second one to launch, after Heads.

i spoke about UGAGS at Gamercamp Level 2.0, a Toronto convention celebrating the joy of video games.

October saw the publication of a now-infamous article about the Vortex Game Development Competition, where the previous year’s winners were revealed to have never worked on the winning game.

i experimented with a feature called Linkbait Tuesdays, where i used the Linkbait Generator to spit out randomized titles for blog posts. It wasn’t much appreciated by my readership, and didn’t appreciably increase blog traffic, so i killed the feature.

On Hallowe’en, we launched our second free games portal called ZombieGameWorld.com. If you know the song about the old woman who swallowed the fly, you’ll understand our challenge with these portals. We built WordGameWorld.com in order to attract a word game-playing audience, so that we could control the site’s ad inventory and find an audience for Spellirium. When the site suffered from flagging traffic, i decided to build a network of game portals; ZombieGameWorld.com was ostensibly created to help drive traffic to WordGameWorld.com, which should drive traffic to Spellirium.

To round out the fall, i grew a beard to win hockey tickets, despite not enjoying hockey. i spoke at an interactiveontario luncheon. And i wrote an article for Mochiland.com on the disgraceful refusal by contracting companies to credit their Flash game developers.

Winter

As the cold weather set in, i took a position at a private college teaching Unity 3D game development. i had hoped for a better experience than i had at Hervé Velasquez School for the Digitally Inclined, but no such luck: halfway through the course, which was dubbed Programming II (the students had supposedly been taught Flash/Actionscript for four months prior to my arrival), i had to dial everything back and re-teach programming basics to them. And by basics, i mean stuff like “What does the ‘=’ symbol do?” and “What is a variable?”

The class was only eight students, but i had no fewer than two of those students’ parents call or email me to ask why little Billy was getting low grades on tests. YaRly.

In this, i further proved the thesis in my contentious What’s Wrong with Ontario Colleges articles (Part 1 and Part 2). Helicopter parenting and failure aversion have created a generation of non-functional kids, which i later dubbed The Most Useless Generation. My diagnosis is that many college undergrads have escaped high school without ever understanding How to Be a Student (an article i wrote while teaching last winter, which i’ve only just posted now that i’ve put some distance between myself and the situation).

In the interest of helping young people be more successful, i offered My Prescription for (More) Successful Students, which my students all ignored, and i wrote a serious of articles called Understanding Programming to explain programming basics, which my students also ignored. Oh well. As the saying goes, you can lead a horse to water, but sometimes you just have a retarded horse.

2011

Spring

In 2011, we launched an exciting blog series called Pimp My Portal, detailing our struggles to drive traffic to ZombieGameWorld.com and WordGameWorld.com. The hook here was The World’s Most Meager Marketing Budget, a pot of just $100 that i spent on Fiverr.com to buy testimonial videos to promote the site, the rationale being that search loves video. The Old Lady who Swallowed the Fly reared her ugly head again, as i found that i had no audience to watch the videos to go to the portal to go to the OTHER portal to find out about Spellirium. The Pimp My Portal series is ongoing.

Around this time, we were commissioned by The Centre for Skills Development and Training to produce a series of games to help teach workplace skills to 15-30-year-olds. The resulting game, Summer in Smallywood, enabled us to make a number of improvements to UGAGS, including auto-save, debug tools, navigation meshes, saved game profiles, and threaded conversations. We’re looking forward to working further with The Centre in the coming year to expand our educational gaming experience.

In March, i admit i was feeling a little bit desperate and squirrely. Work was trickling into the shop in fits and starts, and i was really wondering whether renewing our lease would be wise. Wild-eyed and hungry at GDC, i was overcome with the need to let the world know i am here, like the tiny Whos living on a speck on a clover stalk, who ultimately issue a resounding YOPP! to show the jungle animals that they exist (and to keep from getting boiled in beezlenut oil).

To that end, i pulled some shenanigans at the conference, which came to be known as the famous GDC Coin Stunt. The resulting press on most major online games sites greased the wheels for what was to be our greatest victory yet.

Over the years, we’ve found it so difficult to drive enough steady Flash game development work that we haven’t been able to bank enough time or enough money to do our own thing. To date, the only chance we seem to get is TOJam, an annual weekend-long Toronto game jam, during which we always produce a complete and original game. Indeed, nearly every title in the Original Games section of our portfolio is a TOJam game, completed in one weekend by me alone.

This year, we used UGAGS to create Sissy’s Magical Ponycorn Adventure. i worked on the game with my 5-year-old daughter Cassandra. It was no accident that i was wearing my “I have all the coins” T-Shirt in the TOJam group photo this year. After the game went live, it went viral, initially being featured on many of the same sites that covered the coin stunt. In the few months since its launch, the ponycorns game has gone on to become an international sensation (i just granted an interview to a Japanese newspaper this week!).

With the ponycorns game, we took a very important step to improving our viability as a dev studio by launching the game on the Apple iPad and the BlackBerry Playbook. On the third day of its launch week, Sissy’s Magical Ponycorn Adventure was featured by Apple in its New & Noteworthy section.

Ponycorns also drove us to develop our first alternate revenue stream based on our original IP. We launched the Untold Booty merchandise store with a number of different ponycorns-based SKUs, and have been very happy with the results.

Throughout the year, i remained active with the IGDA Toronto Chapter, organizing some well-received events including the speed dating-style Game.Set.Match, the Open Mic Night rant session, Straight Outta TOJam: Pint-sized Postmortems, and the Fund in the Sun workshop.

Through the spring, we developed a great puzzle/platformer game called Spladder, which currently runs on a number of kids’ broadcaster sites – YTV.com. TVO.org and CBBC.co.uk among them.

We launched a new games portal called TowerDefenseGameWorld.com and filled it with free tower defense games, because it’s difficult to prove a theory about a network of games portals lending each other traffic if you only have two portals. We also gave a major upgrade to ZombieGameWorld.com by expanding it to feature zombie games and goodies on other platforms.

i know an old lady who swallowed a horse. She’s dead, of course.

Summer. Future.

We’ve come full circle. Spellirium remains unfinished, but we’re finally spending time on it again. We poked Kahoots with a stick to see if it was still twitching. Thankfully, it is! We’ve made some creative changes to it to spare a fellow indie game dev company some unpleasant legal strife; look forward to a Kahoots-related announcement in the coming months.

i’m writing the 3.x update to my Unity 3D book, which will be ready shortly (send me an email and i’ll add you to our notification list when the update is released).

Going forward, our plan is to leverage the success of the ponycorns game to make major in-roads into game development and education for kids (see our article on CBC.ca). i’m preparing a pilot project with Cassie’s elementary school this fall. We’re preparing the unstoppable UGAGS engine for a business-to-business, and then consumer, release – expect it to have a kid-friendly interface. We’re polling people for their interest in an iPhone/iPod version of the game (send us an email!). i’ll be delivering my conference session Ponycorns: Lightning in a Jar at the Screens festival this fall, and at other conventions throughout the year. Ponycorns is being translated into Japanese in anticipation of the Sense of Wonder Night at the Tokyo Games Show.

Untold Entertainment’s fifth year will be filled with low-life panda bears, daily word puzzles, gamesByKids, and more great articles about game development and education, peppered with rude jokes and stolen LOLcat pictures. Thanks so much for your support, everyone! i’m really looking forward to writing an amazing recap next year.

To celebrate, we’re showcasing the work of some dyed-in-the-wool ponycorn fans.

Ponycorns at Anime North

Mike Barltrop is an educator who showed Sissy’s Magical Ponycorn Adventure to his high school students so they’d be without excuse – if a 5-year-old could pull off a game, he can expect a lot more from them. Mike enjoyed ponycorns so much that he painstakingly re-created a number of Cassie’s drawings and dressed up as the game for the Anime North nerdfest in Toronto:

To put Mike’s ponycorns passion into perspective, the game was released on May 25th. Anime North started the following Friday and ran the length of the weekend. And people at the conference recognized Mike’s costume. Awesomazing!

The Star’s Crayon Forgery Shenanigans

We spotted one piece of fan art that was no less hilarious than Mike’s costume, but unbelievable for a different reason. When the Toronto Star posted its story about the ponycorns’ meteoric rise to prominence, the online piece had two images in its gallery: a shot of Cassie playing the game, and THIS:

It doesn’t take a keen eye to see that this image is actually a forgery, created by an adult employed at the Star. When we saw this image on the site, we were a little baffled. We have a stack of original crayon art from the game that we could have sent to the newspaper at a moment’s notice. This kind of thing is in keeping with some of my other dealings with news media, like my interview with CityTV from a while back where they grabbed one tiny soundbite from me to prove the point they were trying to make, and completely discarded everything else i said. Hilarious! If you don’t already watch the news and read the paper with a cocked eye, i hope you’ll start today.

We asked the Toronto Star to correct the article, and the picture was removed in short order.

UPDATE

Now it’s ME doing the retracting. The wacky lads over at Shh-Mom.com have confessed to penning the offending artwork which, in its original context, isn’t offending at all. The folks at the Star must have grabbed it, thinking it to be genuine. i’m glad we got to the bottom of this. Has it restored my faith in traditional news media? No. Question everything!

Flannery’s Fanfic

We’re saving the best for last on Ponycorn P’toosday. 9-year-old Flannery, proud owner of a plush ponycorns mega-pack, sent us this fantastic storybook featuring the extended adventures of the ponycorns gang. Enjoy your face off!

Get Some

If this is your first exposure to ponycorns, pick up your copy on the iPad today! The game is also available on the BlackBerry Playbook and in your browser.

Untold Entertainment is excited to announce the latest addition to its network of free-to-play game collections with the release of Tower Defense Game World. Over 120 games are ready to play, with new additions posted every week. Tower Defense Game World is the newest member of Untold’s suite of free game networks, which currently includes Zombie Game World and Word Game World.

“Tower defense” is a game genre that has become immensely popular in the past five years. Most tower defense games have the player protecting a fortress or base from incoming “waves” of enemies. The player can purchase and place turrets that fend off the hordes of invaders. Through careful placement and upgrading, the player can emerge victorious with an unscathed fortress.

Tower Defense games have proven to be one of the most popular game genres available today, with varieties that appeal to casual gamers, core players, and everyone in between. Plants vs. Zombies by Popcap Games is one of the most well-known tower defense games. Tower Defense Game World offers a curated experience, bringing the best free Tower Defense games currently available into one website.

About Untold Entertainment

Untold Entertainment Inc. is a boutique game development studio in Toronto specializing in games and apps for kids, teens, tweens, and preschoolers. Untold developed Sissy’s Magical Ponycorn Adventure which was co-created by a five-year-old girl, and its upcoming post-apocalyptic puzzle adventure game Spellirium.

Our entry for TOJam 5 (the Toronto independent game jam) was Heads.

The jam theme was “missing”. Heads is about a fellow who wakes up one morning missing … well, his head. The first puzzle in the game sees you constructing a makeshift head before you can leave the house. From there, we introduce a somewhat novel mechanic where you can switch heads with other characters to use their abilities. The game was the second title we created with UGAGS – the Untold Graphic Adventure Game System.

Worth 1000 Words

Heads was one of the games on Untold’s “Games to Build” wiki. The intended scope was much larger than what we ended up with, but the advantage of creating Heads at a weekend game jam is that we finished it and got the idea out to the world. The innovation we attempted with Heads came directly out of the first UGAGS game we created, Jinx 3: Escape from Area Fitty-Two. Jinx 3 had a LOT of character dialogue and was very wordy. Heads was a reaction to that; we tried to create a game with absolutely no character dialogue whatsoever.

The resulting challenge was that everything we needed to communicate to the player required a new animation. The unique Heads style required us to draw every frame 3 or 4 times to achieve a Squigglevision-style effect. This all added up to a very time-consuming process that tested the limits of what we were able to pull off in a single weekend.

Acclaim for Heads

Heads won “Best Use of Theme” at the public TOJam Arcade exhibition. It was featured in the START video game show at the Ontario College of Art and Design. You can play Heads for free on the Blackberry Playbook.

Cassie drew all the pictures, wrote all the titles, and recorded the voice of the main character. She also came up with the NPCs (including Mr. Turtle, the Mean Tiger, and the villainous Lemon), and designed some of the puzzles (including the one where you [SPOILER ALERT] have to read a sign to justify your need for a coconut to throw at the Lemon).

Send Cassie to College?

i used Mochimedia’s ad service to inject ads into the game, which is fitting, because Mochi was a TOJam sponsor this year. i threw ads in there with the hope that the game might drum up a little bit of cash, which i will put toward the education fund that Cassie’s grandma started for her. Wouldn’t it be cool if Cassie’s game paid for college? (Sadly, it won’t happen. See the Pimp My Game series for more reasons why.) For kicks, i added a PayPal Donate button beneath the game.

Alert Child Services

Dragging your kid to a weekend-long game jam, eh? Before you call Children’s Aid on me, please understand that i didn’t actually keep Cassie captive at TOJam all weekend long. She came in with me at 9:30 Saturday morning, and was the most excited i’ve ever seen her. We’d been preparing her for MONTHS so that she’d be emotionally ready for TOJam. After the organizers expressed concern that my rotten kid would be running around the place pestering people and making noise (an entirely likely scenario, if you’re familiar with my insane children and my lousy parenting style), i spent every evening coaching Cassie.

Me: Remember, you’re the first little girl who’s ever made a game at TOJam. And everyone’s worried you’re going to run around screaming and making noise and wrecking things.

Cassie: (shocked face) No i won’t!

Me: *i* know you won’t. (totally lying here – i was as nervous about it as anyone) But you have to prove to everyone that little girls can make video games too. If you’re very well behaved, then next year if another little girl wants to come and make a game, the TOJam people will say “the little girl who made a game last year was SO wonderful, we’d LOVE to see more little girls making games.”

Cassie: i’ll be have. i will!

Yes, Cassandra, There Is a Game Jam

The morning of TOJam was like Christmas for her. i’m not kidding. In the days leading up to the event, she told everyone she knew that she was going to TOJam. Naturally, they had no idea what she was talking about, but the strangers in the elevator and in the grocery store smiled and nodded politely all the same.

By the end of the day on Saturday, Cassie had spent 10 hours at TOJam, and was begging me to let her stay overnight. She had put in about 6 hours of actual colouring work, and sunk at least another hour into voice acting later that evening at home, where it was quieter. i tucked her into bed and returned to TOJam late Saturday evening, and then pulled an all-nighter scanning her crayon drawings and integrating them with the game logic using UGAGS (the Untold Graphic Adventure Game System).

Family Jam

Sunday morning after church, the whole family joined me at TOJam with a bunch of instruments in tow. My wife Cheryl and the two little girls sat together on the carpet down a quiet hallway. Cassie grabbed the harmonica, i took the drum, Cheryl took the ukulele, and little Isabel used the thumb harp and the Happy Apple. We recorded some music tracks together. The one that made it into the game intro is just Cassie and Izzy playing together. It was really nice to have everyone involved like that. Here’s the family track that didn’t quite make the cut:

Sunday evening, the family regrouped at TOJam. The game, while still unfinished, was set up in a hallway where Cassie excitedly ran up to any interested passers-by, snatched the mouse out of their hands, and said “I MADE THIS! LEMMIE SHOW YOU HOW TO PLAY!”

i think it was a really valuable life lesson for Cassie to see that all her hard work and effort went into making a product that brought smiles to the faces of her players. The next step is to brave the hairy Playbook process to get it on the device so that Cassie can bring it to school for Show & Tell.

Correcting History

i really hope you enjoy Sissy’s Magical Ponycorn Adventure. In all of this, our goal as parents is to give our kids the kind of childhood we would KILL to have had. i can’t imagine how different my life would have been if i had made a real working video game with my father at age 5. In fact, i can’t imagine how different my life would have been if he hadn’t left when i was eight months old.

But no matter. Some day, the ponycorns will get him.

Thank you for sending me a Playbook. i like it very much. i didn’t very much like the steps involved to put my work on the device, though. It was the most needlessly complicated thing i’ve had to do in all my life. i’d like to see the Playbook succeed, but you need to put more effort into helping your developers succeed first.

Here are a few of the issues i ran into while porting my game Heads to your platform:

1. i had to download Many Things, and sign up for Many Accounts. Each Thing and each Account came with 15 pages of legalese with an “I Agree” button at the bottom. I Agree … that this stinks.
2. One of the Many Things i had to download was Adobe AIR 2.5. i followed the link on your site to Adobe AIR 2.6, which i downloaded instead. When i tried to follow your workflow, i was told that only AIR 2.5 would work, so i had to cast about the Internatz to find the 2.5 download, which wasn’t made immediately and obviously available on the Adobe site. If i’m creating something for your platform, everything i do should ideally be immediate and obvious.

   

3. i downloaded VMWare and your VMWare Playbook profile so that i could run a virtual Playbook. But the emulator stalled at the startup screen for a very long time. i checked message boards, and found two possible solutions:
   1. Leave it overnight.
   2. Alternatingly restart your computer or VMWare multiple times (some reports said “six or seven”) until it works.

   i opted to restart VMWare and my computer multiple times until it worked. This was very frustrating. i’m not the only one who experienced this problem, as evidenced by this web comic by my Twitter pal @IQAndreas:

   

   

   

   

   

   

   

   

   

   

   

   

   

4. In order to deploy my game to the virtual Playbook, i had to know its IP. To get that, i had to swipe the “development” option into the “on” position and punch in my password. i had to use the software keyboard to punch in my password, because my computer keyboard didn’t work. And worse than that, it took about 4-5 tries swiping the slider and punching in my password before the Developer hammer icon would appear on the home screen … for whatever reason, that slider kept undoing itself.

   

   Somebody call Jerry O’Connell, cuz this slider be busted.

5. When it came time to bundle my files together in a .bar file, i was dismayed to find that since i don’t use Flash Builder (but, rather, FlashDevelop), i would need to use the command line to continue. i hate the command line. HAATE it. i know that eggheads love it, and that you employ Many Eggheads at RIM, but you have to understand that even though the command line is useful and powerful and 1337 and everything, i absolutely can’t be arsed with it. Like, not at all. So knock it off.

   Here is what i had to type into the command line in order to bundle my project into a .bar file:

   C:\dev\BlackBerryTabletSDK\blackberry-tablet-sdk-0.9.3\bin\blackberry-airpackager -package MyGame.bar -installApp -launchApp MyGame-app.xml blackberry-tablet.xml MyGame.swf blackberry-tablet-icon.png -device 192.168.58.128 -password 123456

   This is not a fun thing to have to type. Know what i want to do? Click a button. Can you make it so that i just click a button? Buttons good, typing bad. It may not be 1337, but it also doesn’t eat up my entire afternoon.

6. i am currently rocking three Blackberry accounts: one to develop my game, one to sell my game, and one to talk about my game on your forums. This is Too Many Accounts. Know how many there should be? One. Know why? Because it’s easier. Know what’s not easy? You.
7. When i signed my application, i had to download a file that you sent to me two days after i emailed you and asked you for it. That’s Too Many Days. That’s because you also took two or three days to approve my vendor account. Why not do this in one step instead of two? Clearly, a vendor is always going to need the application signing file. See how you don’t make things easy, when you potentially could?
8. Then i had to use the command line (which, as we’ve already established, is bad) to create a file that i could send to you so that my computer could sign files. At least i think that’s what i was doing. Here’s what the command looked like:
   

   blackberry-signer -csksetup -cskpass DesiredCSKPassword

   Then i had to use the command line (bad. BAD!) to send you my .csj file to receive permission to sign my other file. i think. i’m not quite sure what was going on, because it was tough to interpret the command, which looked like this:

   blackberry-signer -register -csjpin PinEnteredWhileRequestingCSJ -cskpass PasswordEnteredWhileGeneratingCSK client-RDK-XXXXXXXXXX.csj

   Next, i had to create a .p12 certificate using this command:

   blackberry-keytool -genkeypair -keystore DesiredCertificateName.p12 -storepass NewPassword -dname “cn=MyCompanyName” -alias author

   Then i had to get you to sign the file using this command:

   blackberry-signer -verbose -cskpass CSKPassword -keystore CertificateName.p12 -storepass StorePassword BarFileNameForRIMToSign.bar RDK

   Then i had to sign the file myself using this command:

   blackberry-signer -keystore CertificateName.p12 -storepass StorePassword RimSignedBarFile.bar author

9. When i finally went to upload my file, in the web form you asked me for an additional icon in some bizarre size (243×717 or something like that). i went away and produced that icon, and by the time i returned, the web form had timed out. Know what would be easier? A checklist!
   

   YOU WILL NEED:

   • A swf
   • An xml file called whatever.xml – download it HERE!
   • A thumbnail icon – download a template HERE!
   • A second icon – download a template HERE!
   • A brief description of your application – max X words
   • A long-form description of your application – max Y words

   And HERE’S an image of how all this stuff looks when it’s in the Blackberry App World! We’ve LABELLED everything for you, so you know where the descriptions and icons appear and how they’ll look to the user.

   Really, though – how long does that kind of thing take to set up? An afternoon? Why does this not exist yet?

10. To add insult to injury, my game was initially rejected because it did not contain the icon.png. i figured i must have forgotten to include the .png filename when i created the .bar file, so i went through all of those horrible steps again. For a second time, my game was rejected. Same reason.

    Know what the problem was? i hadn’t added this to the xml file:

    <icon>
        <image>whatever.png</image>
    </icon>

    N’awesome.

i didn’t enjoy doing this, and i don’t want to have to do it ever again. Know what i want? i want a big blank area where i can drag and drop my file, with a huge shiny juicy button that says “GO BITCH GO” which, when i click it, does all the bullshit i just described above. Please get your eggheads on that.

In addition to all of the brilliant software and hardware engineers you employ, you simply need to hire more people to evaluate this process. An egghead will tell you that using the command line is cool and awesome and that everyone loves doing it. A person will tell you the actual truth: using the command line blows, and you need to put that shit on a button.

Please let me know if and when you plan to put that shit on a button, and i’ll gladly continue developing for your device, because it’s pretty cool.

Sincerely,

Ryan Henson Creighton

President, Untold Entertainment Inc.

Check out this vector graphic of a sun. Sure, you can individually copy and rotate all those flames and then meticulously hand-position them, but life’s too short and you’ve got too much other awesome stuff to do. There’s a faster, easier way!

Step 1: Draw your graphics

To begin, I’ve just drawn a circle and a little flame graphic. I filled them both with a gradient so they look less junky.

Step 2: Symbolize your graphics

Select the circle and press F8, or click Modify > Convert to Symbol. Enter a name for your symbol – anything you like – and make sure the Registration point is in the center. Press OK when you’re finished.

Step 3: Create an Empty Movie Clip

Press CTRL+F8 or click Insert > New Symbol … to create an empty Movie Clip. Again, call it whatever you like and click OK. Then click the Scene 1 tab to jump back out to the main timeline.

Press CTRL + L or click Window > Library to bring up the Library. Click and drag the empty Movie Clip you just created and drag it to the Stage. The empty Movie Clip looks like a white dot.

Step 4: Align the two Movie Clips

Press CTRL + K or click Window > Align in the menus to bring up the Align panel. Click and drag to range-select both Movie Clips at once. Click the “Align horizontal center” and “Align vertical center” buttons (highlighted in red in the image) to align the center points of the two clips.

Step 5: Cut and paste the repeated element into the empty Movie Clip.

Select the artwork for the repeated element and press CTRL+X or Edit > Cut in the menus to delete it and copy it to memory in the clipboard.

Now, double-click the empty Movie Clip (the white dot) to edit it. If you accidentally double-click the circle, click the Scene 1 button to jump back out to the main timeline and try again. Alternately, you can double-click the empty clip from the library to edit it.

Finally, press CTRL+V or Edit > Paste to paste the repeated element artwork from the clipboard into the empty Movie Clip. Position the artwork where you’d like it to appear; in the case of our sun graphic, we’ll move the little flame to the edge of the circle. Click the Scene 1 button to jump back out to the main timeline when you’re ready.

Step 6: Prep the timeline.

Select the repeated element (in this case, the flame Movie Clip) and press CTRL+X or Edit > Cut to delete it and copy it to the clipboard.

Click the New Layer button at the bottom left of the Timeline window. Click on the first frame of the newly-added layer, and press CTRL+SHIFT+V to paste the repeated element in exactly the same place.

Step 7: Spin the clip.

Click on frame 30 of the main timeline in the newly-added layer. Press F6 or click Insert > Timeline > Keyframe to drop a new Keyframe there. You’ll see a black dot on frame 30.

Click on Frame 1 of the new layer. Right-click and select Create Classic Tween. An arrow with a blue background appears to indicate that Flash will interpolate the position, rotation, scale and color effects of this Movie Clip across the frame range.

Open the Properties panel (Windows > Properties or CTRL+F3). Select the repeated element Movie Clip. The context-sensitive Properties panel updates to show Movie Clip properties.

Under the Tweening heading, choose CW (clockwise) from the Rotate: dropdown. (You may need to click the little triangle to expand the Tweening section). This makes the repeated element rotate around its registration point for the duration of the animation span.

Step 8: Adjust the animation with Onion-Skinning.

Click the Onion Skin button at the bottom of the Timeline window to turn on Onion Skinning. Click and drag the grey animation range gizmo at the top of the Timeline window to stretch across the entire animation range.

Now you can clearly see how your repeated element is distributed around its registration point. If the distribution is too sparse, click the pink rectangular Playhead at the top of the Timeline window and hold down the F5 key (or repeatedly click Insert > Timeline > Frame if you’re a sucker) until the distribution is to your likely. If the distribution is too dense, press SHIFT+F5 to delete frames until it looks good. If you’re deleting frames, make sure you either lock the lower layer, or move away from Frame 1, or else you’ll delete the lower layer artwork!

The following images show how differing frame range lengths can affect the distribution of your repeated elements:

Step 9: Turn the interpolated frames into symbol instances.

Right now, those repeated elements may look exactly the way you want them, but they’re not “real”. What you’re seeing is just the motion trail of a single Movie Clip instance as it revolves through its animation.
To turn these phantoms into actual symbol instances, click and drag to select the entire range of animated frames, and press F6 to convert them all to keyframes. Now, each frame contains an actual “physical” instance of the Movie Clip.

Step 10: Gather the elements together on one frame.

Click the Edit Multiple Frames button at the bottom of the Timeline window.

Click the dot beneath the Lock column on the lower layer, to keep from messing with the graphics on the lower frame.

Press CTRL+A to select all of the (unlocked) repeated elements. The Edit Multiple Frames mode enables you to select all of the instances across the frame range.

Press CTRL+X or Edit > Cut to delete all of the repeated elements and copy them to the clipboard.
Uncheck the Edit Multiple Frames button. Click on the first frame, and press CTRL+SHIFT+V to paste the repeated elements in place.

Step 11: Tidy up.

Click and drag to select the animation range from frame 2 to the last frame. Press CTRL+F6 to delete all of the empty, blue animated keyframes. Press SHIFT+F5 to delete the frames so that your timeline is back to a single frame.

Click and drag the top layer below the bottom layer to swap their z-depth order. This put the repeated elements behind the circle. Looks pretty good!

This trick works for more than just straight lathe effects. You can animate a MovieClip along a path and add scale effects to it before F6-ing the whole affair. Check out the tail scales on this super-realistic dinosaur:

Here’s how to animate a bouncing ball convincingly using Flash CS5 (though these steps will work in most – if not all -iterations of the Flash software).

Step 1: Create the Ball

1. In the tool palette, click and hold the mouse button on the “stroke” swatch.

   

2. Select the strike-through swatch. Our ball art won’t have a stroke.

   

3. Optionally, click and hold the mouse button on the “fill” swatch and choose a colour for your ball. i went with classic cherry red (#0xCC0000).
4. Again in the tool palette, Select the Oval tool. If you can’t see it, press and hold on the Rectangle tool – the Oval tool is hiding in a fly-out. You could also press the “O” key on your keyboard.

   

5. Click and drag the mouse to draw a circle on the screen. Hold the SHIFT key to constrain the circle’s proportions so that you don’t end up with an oblong ellipse.

   

6. Click the selection (black arrow) tool. You use this one a lot, so why not learn the keyboard shortcut? It’s “V”. (Pointy, like an arrow. Get it?)

   

7. Either double-click the raw circle artwork, or range select it (drag a selection box around the artwork). It goes “fuzzy”. (And it wouldn’t be an Untold Entertainment tutorial without some mention of fuzzy balls.)

   

8. With the artwork selected, choose Modify>Convert to Symbol in the menu, or press the F8 key.
9. In the resulting pop-up, type “Ball” as the MovieClip’s name.
10. Choose the bottom-middle for the registration point. This is key to animating a bouncing ball properly!

    

On or around the Flash MX release, the Flash engineers added a feature where a MovieClip can have its registration point in a certain place (ours is at the bottom of the ball), but there’s a second point – an anchor point – that can move around according to the needs of our animation. i don’t know why the anchor point doesn’t move to the bottom of the ball when we clearly want it there. Anyway, the last bit in this section is to move the ball’s anchor point down to the bottom middle, where its registration point is.

1. Make sure that snapping is turned ON. The Anchor icon in the Tool palette should be depressed (cheer up, little icon – things can only get better). You can quickly toggle snapping with the shortcut CTRL + SHIFT + /.

   

2. Click on the Free Transform Tool. In addition to rotating, skewing and scaling things, this tool lets us move our anchor point around.

   

3. The anchor point is the white dot in the center of the ball MovieClip. Click and drag it to the bottom-middle of the ball. Since snapping’s turned on, it should snap into place.

   

With the anchor point snapped to the bottom of the ball, we can properly squash and stretch it. “Squash n’ stretch” is one of the principles of animation laid out by Disney’s Twelve Old Men in the indispensible book The ILLUSION OF LIFE: DISNEY ANIMATION.

If you’re interested in animation, i highly recommend studying that book and the Disney principles: arc of motion, squash n’ stretch, anticipation, secondary motion, follow-through … fantastic stuff!

Step 2: Rough-In the Animation

Thanks to the magic of computerized interpolative animation (AKA “tweening”), it’s a pretty quick job to get the ball bouncing. Getting it bouncing convincingly takes a tiny bit more effort.

So let’s rough it in first:

1. Click on frame 5 in the Timeline.
2. Click Insert>Timeline>Keyframe in the menu. If you’re going to do even a smidge of animation in Flash, you should really learn the Timeline shortcuts:

   – F5: insert a blank frame
   – F6: insert a keyframe
   – F7: insert a blank keyframe
   – SHIFT + F5: delete a blank frame
   – SHIFT + F6: delete a keyframe
   – SHIFT + F7: delete a blank keyframe

   

   Inserting a keyframe copies everything from the previous keyframe (the first one Flash finds travelling backwards along the timeline). In the case of our Ball MovieClip, Flash copies the ball’s position, rotation, scale, and colour effects. This is a Good Thing.™

3. Click on frame 10 of the Timeline, and press F6 to add another keyframe.

   

   Now we have three instances of the Ball, on frames 1, 5, and 10. Frames 1 and 10 will depict the Ball in its “up” state, and frame 5 will be the “down” state.

4. Click on frame 5.
5. Click on the Ball MovieClip, and move it down the screen. i moved mine about 90 pixels down, and my Ball is 50 pixels in diameter. Don’t worry about botching this step – you can easily adjust your animation later.
6. Click on any frame in the Timeline from 1-4.
7. Right-click and choose “Create Classic Tween” from the context menu, or choose the same option from the program menu – Insert>Classic Tween.

   

   Flash offers two different styles of interpolative animation: the new Motion Tween, for designers who want full spline control over every axis of an animation, and Classic Tween, for us old-schoolers who can’t be arsed. (Guess which kind of developer i am?)

8. Similarly, add a Classic tween between frames 5 and 10.

The first tween we created tells Flash to figure out the in-between drawings (“tweens”) from the Ball’s “up” keyframe and its “down” keyframe. Likewise, the second tween tells Flash to calculate the in-between drawings from the ball’s “down” keyframe to its “up” keyframe.

Play your animation by pressing the ENTER key on your keyboard, or better yet, click Control>Test Movie>Test in the menus, or hit CTRL+ENTER. Your Ball should animate up and down, crappily.

Our Ball is moving, but it’s not animating. The Illusion of Life isn’t there. We’re going to change that.

Step 3: Breath Some Life Into It

The type of ball we’ve got bouncing right now is very very stiff. It’s a cue ball or a bowling ball or a brass ball. It isn’t a very fun ball. It’s not soft or squishy. It has no personality. By adding a tiny bit of squash n’ stretch, we can eke a lot more verve out of it.

The squash n’ stretch principal is this: squishy, bouncy, rubbery things are more fun to watch on screen than rigid things. You’re “allowed” to squash or stretch something as much as you like, even to extremes, as long as the body’s volume stays the same. So if you stretch something up very tall, it has to simultaneously get very thin, or else it appears to gain mass, and it just won’t look right.

By the same token, if you flatten something by making it short, all that stuff has to seep out somewhere, so the shape has to simultaneously become very wide.

It makes sense to add a squash to the ball on the frame when it hits the ground, and maybe a slight stretch when it’s up in the air. Let’s do it:

1. Click on frame 5.
2. Click on the Free Transform tool.
3. Select the Ball MovieClip.
4. Drag the handles around to make your ball short and squat. Try to conserve the ball’s mass. For every inch that you flatten it, you’ve gotta squash it by the same amount.

Now test your movie.

Uh-oh … this isn’t good. Something doesn’t quite look right. Sure, the ball squishes when it lands, but … what’s going on?

The reason it doesn’t play well is that Flash is interpolating the squish from frame 1, when the ball is up in the air, all the way down to frame 5, when it hits the ground. Of course, the ball’s only going to squish when it actually makes contact with a hard surface.

Pres CTRL+Z or choose the Undo options from the Edit menu to undo the last few steps, until the ball on frame 5 is unsquished, and there are no Classic Tweens in the timeline. (If you undo too many steps, you can choose CTRL + Y or Edit>Redo to undo your undo

Step 4: Protect the Squish

In order to prevent Flash from interpolating the squish all the way through the animation, we need to “protect” the squish frame. We can do this by placing two keyframes, one on either side of frame 5. By doing this, we ask Flash to tween only the ball’s position on the way down, and only its position on the way up. Then, on the “protected” 5th frame, we squish the ball.

1. Place a keyframe on frame 6. This copies the ball in its “down” state from frame 5.
2. Press CTRL+C on the keyboard, or Edit>Copy to copy the ball in this position.
3. Place a new blank keyframe on frame 4.

   

4. Press CTRL+SHIFT+V or choose Edit>Paste in Place to paste the ball in its “down” position, exactly as it is on frames 5 and 6.
5. Re-add the Classic Tweens leading from frames 1 and 6.

   

6. Now that the squish frame is protected, you can go back and add the squish to the ball on frame 5.

It’s better with the squish, but it’s not perfect. Let’s try adding a stretch to the “up” positions.

1. On frame 1, stretch the ball out a touch using the Free Transform tool.
2. Since the animation loops, the first and the last frames have to match. Copy the ball from this frame.
3. Click on the last frame, frame 10.
4. Delete the ball from frame 10. This breaks our Classic Tween, and we get a dotted line leading to a blank keyframe.

   

5. Press CTRL+SHIFT+V or select Edit>Past in Place to paste the stretched ball. The Classic Tween is back to normal, now that it has something to animate towards.

Okay! Almost there! It’s looking better with that stretch. You may wonder why i’m not asking you to “protect” the stretch frames like we did with the squashed frame. That’s because while the ball shouldn’t squish until it hits the floor, it actually should lengthen as it travels up through the air.

The worst thing about our animation right now is the timing. The ball moves pretty robotically, and it has a real “computer animated” feel to it. In order to soften this up, we’ll apply some timing to the animation.

Step 5: Apply Timing

To make the ball a little more phyiscally believable, we need to slow it down on the way up. If you’ve ever seen super-slow-motion footage of someone hitting a baseball, or if you’ve studied Newtonian physics, you’ll know that the baseball actually comes to a dead stop as its energy is transferred to the bat. The bat, in turn, applies force in the opposite direction to the ball.

Similarly, there’s a point at which our ball hangs in the air and stops moving, before heading back down towards the ground. It decelerates (moves increasingly more slowly) as it reaches the apex of its bounce, and accelerates as it reverses direction and heads towards the ground.

We need to apply some easing to the ball to imitate this real-world behaviour.

Easing can front- or back-load a tween animation so that it’s slower or faster at the beginning or the end.

Here’s a picture of a tweened box animation with no easing:

The box’s in-between frames are evenly distributed between the start and end points.

And here it is with “Ease In”:

The box appears to move more slowly at the beginning of its animation, and it speeds up as it reaches the end point. We can see this is because the box’s in-betweens are bunched together at the beginning.

Finally, here’s what “Ease Out” looks like:

The box appears to slow down at the end of the animation, because its in-between frames are bunched together there.

So we return to our bouncing ball. We want the tween coming out of frame 1 to Ease In, so that it accelerates towards the ground. We want the tween coming into frame 10 to Ease Out, so that the ball slows down when it reaches the top of its bounce.

1. Click on frame 1.
2. In the properties panel, drag the number 0 next to the “Ease:” label all the way to the left, until it reaches -100 and the word “in” appears. You can also single-click on the number and it becomes an input field. Type “-100″ into the field and press ENTER.

   

3. Click on frame 6.
4. In the properties panel, slide the Ease: to the right until it reaches 100/out, or single-click the field and type “100″, then press ENTER.
5. For the finishing touches, i decided to slow the squish down a bit. First i added a frame on either side of the squish:

   

6. … and then i added Classic Tweens coming into and going out of the squish.

   

Test your movie.

The combination of easing and squash n’ stretch give the ball a lot of spunk and life! Instead of a ball that looks like it was animated by a robot, we’ve got a spunky, squishy object that’s a lot more fun to watch.

Seriously, if you want to attend TOJam and you haven’t signed up yet, i don’t know why you’re over here reading this crummy blog. Space is limited. Go sign up now. Like, right now. i’ll wait.

Party of One

This’ll be the first TOJam that i haven’t done all by my lonesome. After creating Two By Two, Here Be Dragons, Bloat., and Heads single-handedly, i’ve finally roped someone into spending an entire weekend with me in a room full of sweaty nerds building video games. And better than that, she’s a girl. How did i do it?

i’m her legal guardian.

This year, i’m teaming up with my five-year-old daughter Cassandra to create a game called Sissy’s Magical Ponycorn Adventure, which is a magical adventure game featuring ponycorns. (At this point, i usually have to stop and explain to people what a “ponycorn” is, which dismays me … a ponycorn, clearly, is a single-horned pony – a pony/unicorn. A ponycorn. You see? Was that so difficult?)

Cassie, who is a great little artist, will be drawing the game’s pictures in crayon, and i’ll be scanning them in and trying to shoehorn them into a sensible game experience. Because the handicap is so high on this one, i won’t be building the whole thing from scratch. i didn’t approach my first TOJam this way … i was determined to build Two By Two from “scratch”, starting with nothing and using Flash to build the game from the ground up.

Having proven that i can do it, over the years i’ve grown less and less dogmatic about TOJam. For last year’s game, Heads, i used UGAGS (the Untold Graphic Adventure Game System), as a sort of proof that the time and money we spent building the engine wasn’t a total waste. (It wasn’t! Heads was our very first release on the Blackberry Playbook, and we’ve gone on to use UGAGS in other projects). When i got thinking about it, even using Flash is a bit of a cheat. i didn’t write that software, and it does a lot of heavy graphics lifting for me. i also didn’t build the computer, or smelt the metals used in its creation. There’s only so much “scratch” that you can start from.

So this year, Cassie and i will be using the Citrus Engine to make our ponycorn-themed puzzle platformer game. i’m not even starting from scratch with the Citrus Engine – i’ll be re-skinning an existing game that i completed for a client. i’ll even be using some artwork that Cassie already drew months ago, because it’s adorable. (“What’s that, honey? An alien? A slug? A jelly bean?” “No – it’s you and me and Mommy.”) As is required for any weekend game jam, we’re keeping our ambitions reined way in; if we come out the other side of this thing with a title screen and one functional level, i’ll be happy.

i’ve also got Cassie slated to do some voice acting for the game, which will toally rock. Unless someone’s planning to one-up her, Cass will be the youngest developer ever to attend and work on a game at TOJam.

And i’ll be the sexiest elf in the room.

i Killed a Guy

End of story.

New Header

Alright, no – but that would have been interesting.

i’d been aware of Unity 3D, a game engine, right from its early days. i was working at a kids’ media conglomerate and we were researching development tools for a new kids MMO. Unity was used to develop Cartoon Network’s FusionFall MMO. The drawback was that the software only ran on a Mac.

A year later i was at GDC, and Unity had announced a PC version. i saw them on the show floor, and tried comparing them with Torque 3D. At that time, reps for the two companies were doing a lot of mud-slinging, and a lot of FUD was bouncing around between the booths. So when i returned home, i asked a simple question on a LinkedIn forum: Unity or Torque? The answer was overwhelmingly in favour of Unity, to the tune of hundreds of responses. i knew i was on to something.

Get Me Summa Dat

i wanted to use Unity, but there were still a few barriers in the way. One of them was removed in short order when Unity moved to a free model. But there was still the problem that both 3D Studio Max and Maya, 3D software crucial to developing assets for Unity games, were $4000 a seat (after Autodesk had killed the $2k entry level version of each product). $Four large is a lot to swing on software for a small studio like mine.

Still, i could tell Unity was special, and i wanted to be involved. So i started tweeting about it. i kept a watch through Tweetdeck on the #Unity3D hash tag, and if any interesting info floated by, i retweeted it. i set up a new blogbook here called Unity Nuub, which would hold interesting articles and links related to the software. i downloaded Unity and goofed off with the software a little bit. i played Unity games. My interest was piqued, but my activity level was low.

Where There’s a Will…

Around that time, a small publisher out of the UK called Packt was putting out the very first book on Unity 3D, by Will Goldstone. The publisher contacted me and asked if i wanted a free review copy in exchange for a review on my site. i said “sure”. How did they find me? Presumably through Twitter, i’d made a connection between myself and Unity, and i must have come up in a few Google searches.

A short time afterward, David Barnes (@fbindie) from Packt wrote me up saying they wanted to do a few more Unity books. What types of books did i think they should publish? i gave him my feedback. His next question, which left me a bit breathless, was: “Do you have any interest in writing any of them?”

Dusting off the Bucket List

i don’t know about you, but i’ve always wanted to be a published author. That was always just … something i had on my list, along with “fly a helicopter” and “marry rich”. Sadly, few of our childhood fantasies end up coming true … my wife is flat-ass broke, and we all know helicopters don’t exist. Once i was ten years into the games industry, i had resigned myself to the fact that i would probably never be a published author, so i put it out of my mind.

But here it was: an offer to write a book. A book on something i knew nothing about.

i was upfront with David. “i really have no idea how to use Unity.” He looked up my bona fides: trained in 3D Studio Max in college, worked 10 years as a game developer working with Flash, had a rockin’ blog packed with dick jokes and Actionscript tutorials (but mostly dick jokes.) He said a cookbook might be beyond me, but i could probably write a decent beginner book.

i told him i’d need some time to get up to speed on the software. i’d never made a game in Unity. i’d never done anything in Unity, for that matter. (But neither had many other people, really – the software was only 3 years old, and only 1 year out of the gate on the PC. Unity was news to a lot of people.)

David asked me point blank: “How long will it take you to learn Unity well enough to write a book about it?”

Gripping my desk chair and chewing my lips as i answered his email, i typed “Well, i suppose by the time i finish writing a book on it, i’ll know the software pretty well.”

And off we went.

The Luckiest Boy in the World

Are you hating me right now? Maybe you’ve read my other article, TENure, about how i was hired as a game developer despite not ever having made a game before? Maybe you want to wrap my face around your foot?

Who do you think should have written the second-ever published book on Unity? A Unity expert, i suppose! Well, can that Unity expert write? Does that Unity expert have the considerable time and energy for a book? And better yet, will that Unity expert remember what it was like to NOT be an expert? i don’t know about you, but i’ve spent a lot of money over the years on books by subject matter experts who move way, way too quickly. My mandate was to write a beginner book that beginners could truly get through. And not just Unity beginners: game development beginners. For example, there’s a heading in the book that says “What is code?”, and another section that briefs the reader on how 3D models are put together.

The Backlash

i caught a lot of flack from my colleagues while writing my book. They considered themselves Unity experts, i suppose, and why not? They had actually finished some games with it. i remember one particular tweet that went something like this:

Colleague: i’m going to do open heart surgery, but i’ve never trained to be a doctor.

Of course, his error was in comparing Unity to open heart surgery. Unity reminds me a lot of Flash … and not even Flash CSX, but Flash 4 back when i started in 2000. It strips out the whole mystery of writing code to draw stuff on the screen. If you’ve had any experience with XNA and wished you could actually see and manipulate your 3D models, you’ll find Unity a real treat.

Put another way: if coding to the metal is open heart surgery, working with Unity is cutting a heart out of construction paper using safety scissors.

Gag Me

If writing a beginner-friendly book was my first mandate, my secondary goal was to write a technical manual that wasn’t so damned serious as everything else i’d read. You’re learning how to make video games. Why does everything have to read like a Terms of Service agreement?

i’m a fan of an O’Reilly series called HeadFirst, which is filled with cartoons and crossword puzzles and pictures – the idea being that if you are engaged on multiple levels in a variety of different ways, you’ll retain the material better than straight-up reading block after block of text. (You can probably tell by now that i’m a big fan of breaking up text with bullet lists and pictures)

i’d love to work on a HeadFirst book one day. For now, as Packt is a small and relatively new publisher, i had to eschew the stock photography and crossword puzzles. But what i could do, and what David requested i do, was to pepper the text with humour. David wanted the same sense of humour i forcibly inject into this blog to bleed into the book.

One of the book’s technical reviewers apparently didn’t get the memo. Throughout the drafts of the first two chapters, he filled the page up with comments like “please cut the humour – this is a technical manual, not the Muppet Show”, and “Well I never!” i think i even counted one or two “harrumphs” in there. It was like Packt had hired that wealthy dowager whose house the Three Stooges paint to review my book.

i re-connected with David. This reviewer seemed pretty peeved. Did i really have to go through the whole book and strip out all of the witty asides and punny paragraph headings? That would be like taking the red nose and seltzer bottle away from a clown. And then giving him colon cancer.

It got cleared up in short order. i’m not sure Packt even kept that reviewer on for the remainder of the project, and in the end, humour won out.

Currying Favour

Packt maintains a staff in India, who were responsible for copy-editing the book. You may have heard about the cultural growing pains of outsourcing work to foreign countries? While it was far from a nightmare, i did find myself going to bat more than once for various cultural references or turns of phrase that didn’t make sense to my editor from Mumbai – especially whenever i bent the rules of grammar, spelling, and punctuation for the sake of the yuks.

For example:

Worst. Game. Evar.

was corrected to read

Worst Game Ever

i had to do the legwork to explain that, well, there’s this character on the once-popular teevee program The Simpsons, you see, and he enjoys comic books …

Explaining why the word “evar” had to be spelled that way was even more of a challenge. Many of our email volleys ended with “just leave it cuz it’s funnier that way.” After she edited “cuz” to “because” for spite, i usually won out. ;)

The result is a book that i’m very, very proud of: one that makes a great introduction to Unity, 3D graphics, game programming and design, and in a way that encourages the reader to start small, finish something (even if it’s terrible!), and slowly build up those skills until he’s ready to release his opus. Unity 3D Game Development By Example is well worth buying. And the best news of all? i even managed to sneak in a few dick jokes.

Carpe Judex

My grandfather worked as a bailiff in Thunder Bay Ontario. Once day in the courtroom, there was a man brought in who had a dispute with his wife. In the middle of the hearing, he stood up and drew his gun. He shot and killed his wife, the judge, and his lawyer, before turning the gun on himself. The last two men standing were my grandfather and the court stenographer.

Thunder Bay needed a judge. My grandfather the bailiff, who to my knowledge had had no formal judiciary or legal training, was appointed to the position. He became a popular judge of young offenders, and there’s a building in Thunder Bay across from the University that’s named after him.

Many colleges and Universities now offer programs in video game development, as well as golf course management, creative writing, and even stand-up comedy (!). Don’t let the burden of a lack of training or experience get in the way of what you want to do. Get a job making video games even though you’ve never made one. Write a book, even though you’ve never written one and don’t know the subject matter. Perform open heart surgery even though you’re not a “doctor” (whatever that means). Recognize when the swirling twin tornadoes of chance and opportunity settle on your house, and get swept up. Otherwise, you’ll be lying on your death bed wondering what might have been.

And let’s hope to God you’re not in for heart disease.

i love two things in this world: taglines, and deadpan humour. And … oh, and physically fit young ladies with no moral compass. They’re pretty good too. But taglines and deadpan humour, in lieu of such ladies, are pretty darn good.

By taglines, i’m talking about the punchy slogans and sayings which (often punnily) augment a product name. Ferinstance:

Randall’s Ski and Snowboard Shop: This Time, It’s Seasonal

Galaxy Scoops: In Space, No One Can Hear Ice Cream

That type of thing. The tagline for Spellirium, our upcoming post-apocalyptic adventure/word puzzle game, is

Spellirium: It’s the End of the Word as We Know It

(i thought this one was downright clever, thank you kindly.)

i wrote a tagline for ZombieGameWord, too:

ZombieGameWorld.com. Check your braaaaaains at the door.

Hilarious. i could write these things all day. Seriously. Someone give me a job writing taglines all day, and i’ll die happy. (And early. Possibly from something i caught from a young lady with no moral compass).

Erm … i’m getting sidetracked here. What am i doing? Coming up with taglines for young ladies with no moral compass?

Young Ladies with No Moral Compass: Guess Ho’s Coming to Dinner

No – wait. We were talking about ZombieGameWorld, weren’t we? Alright. Steady on.

Gimme Five

So i love taglines and deadpan humour, and i decided to combine them BOTH in my plan for Internet domination, which involves buying video testimonials from people on Fiverr.com. Many of the Fiverrers will shoot a testimonial by reading your script, which struck me as awesome. Not only are they gonna say nice things about the site, but i’m going to tell them which nice things they’re gonna say? For five bucks?? Unbelievable! Talk about having no moral compass.

Uh … Line?

i got to work writing scripts for the Fiverr folks willing to shoot testimonials. i tailored each script to that person’s unique – ahem – talents, in the hope that their acting chops would be decent enough to get a few good jokes out of them. (i was to be somewhat disappointed, as you’ll see in the next few articles)

The scripts i wrote were all dead-pan and straight-laced. A crucial part of the ZombieGameWorld brand is that it assumes the zombie apocalypse is either going to happen, or has already happened. It’s never a question of “if” the walking dead are going to infest polite society – only a question of “when”, and “how many bullets am i gonna need”?

So these scripts all involved the actors mundanely discussing how the world’s changed now that the zombie apocalypse is upon us. The trouble is that i had each person end by saying the site name and tagline, “ZombieGameWorld.com: Check your braaaaains at the door.” When the “actors” say this line, it kind of breaks the immersion that they’ve built up throughout the video. It’s like ending each video with “JUST KIDDING! JAZZ HANDS! AH CHA CHA CHA CHA CHAAAAAA! *WIIINK!* BA-DUM CHING!” It’s more than a little obnoxious.

The Punchline

My remedy to this was to find a Fiverr.com voiceover artist to record the tagline, which i then appended to each video. My intent was that the “sanctity” or honesty of the deadpan bit would remain intact, while the sting at the end would sort of let the audience off the hook. They do this in on-air ad spots all the time. There’s probably a term for it, but i don’t really run in those circles so i don’t know what it’s called.

The guy i found to record the tagline is named Eric Saint John, who’s entirely too talented to be giving his voice away for next-to-nothing. i can only imagine he’s using Fiverr as a promotional tool to drive brand awareness (much like i am!) And i think it worked. Not only am i profiling Eric St. John in this post – i’d definitely consider using him again for a longer-form production.

Here’s Eric’s gig that i bought on Fiverr:

And here’s a video of him in action on another person’s order (along with some tips for aspiring voice over actors):

Here’s what i asked him to do:

Eric did not deliver what i wanted, but he delivered exactly what i asked for! He did one take in the Dracula voice i was describing, which helped me to realize i wasn’t actually thinking of that voice. i still don’t know how to describe the voice in my head or where it came from. But Eric gave me exactly what i requested. He’s like a machine. It’s scary.

Here’s the boatload of takes he delivered for five bucks:

UPDATE: As fate would have it, i was queuing up old movie trailers to watch with my daughters, and when i hit the trailer for Little Monsters with Howie Mandel, i realized the trailer guy in THAT clip has the voice i was trying to describe to Eric:

Anyone know whose voice that guy’s doing? i’m a stickler for trivia.

The Final Cut

In the end, i decided to use Eric’s slightly radio-guy-esque second take. i fooled around with the ZombieGameWorld logo to give it a little more spunk, and grabbed a sound effect from my collection to tie it all together. This is what i ended up with:

Pretty decent for five bucks! And now i’ve got a good-looking, good-sounding tagline that i can add to all of the videos i order on Fiverr.com.

The Numbers

Now let’s take a look at how the marketing effort is going.

The World’s Most Meager Marketing Budget

Original investment: $100

Spent:

• ZombieGameWorld tagline voiceover – $5

Remaining: $95

Game Portal Balance Sheet

(includes ZombieGameWorld.com and WordGameWorld.com)

Traffic

(period spanning March 1 2010 – February 22 2011)

WordGameWorld: 5604 Visits, 5.39 Pages/Visit, 3.00% Bounce Rate, 3:49 Avg. Time on Site
ZombieGameWorld: 3121 Visits, 3.85 Pages/Visit, 30.99% Bounce Rate, 5:17 Avg. Time on Site

Prepare Ye the Way

The ZombieGameWorld tagline isn’t meant to be a standalone piece, so i didn’t post it to many video sites – and therefore, i can’t report on whether or not it brought any traffic to the portals. In the next article, I’ll add the tagline to the end of a bona fide Fiverr testimonial and upload it live to the world, to see how the World’s Most Meager Marketing Budget stacks up against my earlier efforts.

Stick with me, for it involves bewbz. (Talk about young ladies with no moral compass.)

If no one knows about your website, how do you change that? i knew that blog technologies like WordPress are beloved of Google and other search engines, and that blog content gets indexed hungrily by search spiders. i also knew that people like playing games. i thought that just by virtue of the fact that i had a game portal containing tons of free word games, people who were searching for free word games would naturally come across my portal.

Erroneous assumption #1: people are searching for free word games.

Erroneous assumption #2: people who like word games play them online.

Erroneous assumption #3: my free word games site, WordGameWorld.com, would somehow magically float to the top of Google’s search results, ahead of all the other web sites that offered free word games.

i originally built WordGameWorld.com because i was working on a revolutionary word game called Spellirium. i thought that by building a site packed with other people’s word games, i’d see a number of brilliant benefits:

1. i’d find and capture the audience appropriate to my game
2. i’d own the portal’s advertising inventory, so i could drive that audience to my game for free (without having to pay advertising costs on another site)
3. in adding word games to the site in a curated fashion, i’d become very well-apprised of the best and worst that word games have to offer, which would inform my design decisions on Spellirium

The fatal flaw in my plan was this: i had a developing product (Spellirium) that i wanted to drive quality traffic to. To do that, i began developing a second product that i needed to drive quality traffic to, in order to forward that quality traffic to my first developing product.

So what’s the solution? Develop a third product and repeat the mistake? No. Fool me once, shame on you. Fool me twice, and i must be some sort of friggin’ idiot or something.

Um …

It appears that i must be some sort of friggin’ idiot or something, because that’s exactly what i did. Around Hallowe’en in 2010, we launched ZombieGameWorld.com to zero fanfare. … what was i thinking? Misguided as i may have been, this was my thought process:

1. Word games are not the most popular genre on the Internatz, and the people who play them may not play them in the browser.
2. The people who DO play free games in the browser are young and male, and may well be active or aspiring game developers themselves.
3. Young males like games that are violent or have tits in them, so i should choose content that matches their tastes.
4. i can’t stand the results when amateur Flash game artists draw tits, so it had to be violence.
5. Snag: Untold Entertainment has a company policy against violent video games.
6. Fortunatly, the company’s third tenet provides a loophole:

Untold Entertainment stands on these principles:

…
3. Non-violence in gaming (barring the presence of zombies)

Aha! We have a winner.

Schlock and Awe

Whereas WordGameWorld.com was a curated site, meaning we hand-picked only the best word games to include, i figured that zombie audiences were a different breed. Zombie fans have learned to live with low-budget b-movie schlock for decades, and if there’s one arm of the game industry ecosystem that screamed “low budget b-movie schlock”, it was free-to-play web-based Flash games. So i decided that ZombieGameWorld.com would not be curated – we’d just throw any old piece of crap on there.

i derived the whole concept of having multiple niche game portals from some interesting market behaviour i’d observed in the Flash game scene: Developer “JimmyJo” created a game called “AwesomeForce”. It came and went, as most Flash games do. And then JimmyJo developed “AwesomeForce 2″, which was a slight improvement over its predecessor. Curious players went back and played AwesomeForce 1 just to compare. No skin off their noses – the game is free to play. JimmyJo kept developing sequels. By the time he developed AwesomeForce 7, he found that the collective gameplays on his entire AwesomeForce series were boosted each time he released a sequel.

i wondered if it was possible to get the sequel/franchise boost from game portals? Maybe players who came across WordGameWorld.com wouldn’t dig it, but we’d have a series of badges pointing him to ZombieGameWorld.com, TowerDefenseGameWorld.com, and a number of others. And if there’s one thing i know about improving site rankings, its that sites get more search love they more they link to other quality sites, and are linked to by other quality sites.

So that’s where my head was at. Here’s how it played out:

Abysmal traffic on WordGameWorld.com. Not zero, but abysmal. The site debuted in March 2010, nearly a year ago, and was promoted on this blog and through the Spellirium newsletters that i sent out detailing progress on the game. Here’s the kind of scratch i was making through my portals via Google Adsense:

i won’t pretend i know how to interpret all these stats … all i knew is that i wouldn’t be earning my $20k advertising revenue to start sponsoring games any time soon. i wasn’t even close to earning the $33 a month to cover hosting! My portal strategy was creating a net loss, and i had to DO something about it. What interested me was that it appeared that i was actually making respectable money from the scant players i did have, and that if i were to scale traffic up (even to the numbers i pull on UntoldEntertaiment.com), i could see a few hundred bucks of revenue a month – more than enough to cover hosting, and perhaps even enough to start sponsoring some games.

A Penny Saved is a Penny Wasted

Conventional marketing wisdom says the solution is this: scrape together a $10k marketing budget and start advertising. But if you were me, would you spend $10k on a few sites that are earning you 25 cents a day?

Just as i was very reluctant to spend a lot of time and money building a Flash game that may not break even on sponsorships and ads, i similarly didn’t want to blow a lot of cash promoting a site when my perceived risk of squandering that cash was so high. Instead, i decided to brainstorm some low-cost, grass roots marketing plans.

The first of these plans was hatched by my wife: advertising on Meetup.com.

Meetup is a lot like the Events feature on Facebook, except that it costs its organizers money. For about $75 a year, you can host your own Meetup group to schedule real-life shindigs in your area. My wife belongs to a number of Mommy Meet-up groups, which women use to arrange playdates for their kids. She mentioned that Meetup groups are sometimes sponsored by companies, whose ads appear in the Meetup groups’ sidebars. Barrier to entry, she suggested, could be as low as $20, which goes a decent way towards paying for a Meetup group’s annual fee.

In order to maximize my WordGameWorld.com ad’s exposure, i started looking for large groups, where the participants may be interested in playing word games. i settled on an online dating service geared toward nerds of every stripe. The company runs groups for gay nerds, green/eco-nerds, and straight-up classic nerd nerds. Their customers are looking to meet people while playing board games and programming Arduino microcontrollers, so they can presumably go home with each other after the event and bump nerd uglies. (with the lights off, one would hope)

This nerd dating company has many outfits across America. The one i targeted was the 700-member-strong Chicago group. i emailed the group’s organizers and made my bid: $20 toward the group’s annual fee in exchange for running a WordGameWorld.com badge on the group page sidebar.

Some weeks later, i received a phone call from the company head to work out some technical difficulties with the ad. During that call, she explained to me that her company was actually a very large organization, and that the Meetup groups represented a small fraction of their enterprise. She also alluded to the fact that she had many more opportunities for advertisers to get involved.

To my mind, all this translated to “your 20 bucks is paltry – can we gouge you for more?” i did my best, in business-to-business speak, to explain that i was running a tiny little shop, that i was just dipping my toe in the paid marketing waters for the very first time, and that i needed to keep costs low. i don’t think i went into detail about my quest to break even on a $33 monthly hosting charge … i wanted to appear lowly, but not pathetic. i left her with some non-committal responses on her request to take more of my money, and off we went.

Her email response was chipper, but disappointing (emphasis mine):

Hey Ryan,

So nice to talk with you earlier and hope we can find some ways to partner more in the future.

We’ll apply the $20 to a term of two months, beginning from the date we posted your logo on November 11 and ending January 11, 2011. Let us know if you’d like to continue after that or sponsor additional groups that we run in Chicago and Minneapolis.

Thanks and happy Friday!

Yeah … ssssssssuper. Happy Friday indeed.

A Fool and His Money

Lessons learned:

1. Make sure you know what you’re buying before you spend the money.
2. You can’t afford to advertise on the front page of the New York Times, so scale down your ambitions.
3. Once you scale down your ambitions small enough – say, to $20 – you apparently still can’t afford to advertise, because the world contains no shortage of people who will take your money: as much of it as they can, as often as they can.

i learned this same lesson when i tried to license a well-known song from a famous band for my Spellirium game trailer and couldn’t afford the $65000 license fee, and then scaled my ambitions down to license a song from a Victoria BC-based band that plays subways and Vancouver Island cultural festivals and i STILL couldn’t afford them.

The ad ran for a month on the nerd dating Meetup group, yielding these results:

That’s right: only four nerds – gay, green, or otherwise – visited the site from the Meetup group. i could have seen a better result if i had paid five people four bucks apiece to play a single lousy game on the site. The group is around 700 nerds, so that means my ad is enticing 0.5% of them to click on my ad. Conversely, if i post a link in an article on this blog, i get about a 15% click-through rate (thank you, btw!).

(Notice that my advertising strategy is technically out-performing my “free” cross-promotional strategy from zombiegameworld.com, but when the numbers are this tiny, you can’t really hang your hat on them.)

Friends, if you want to do something on the cheap, you’ve got to be crafty about it.

The next entries in the Pimp My Portal feature are about getting crafty. They’re about how i tried to get away with spending the least money possible to get the biggest bang for my buck, all in the name of trying to break even at $33/month. Stick with me … it’s going to be fun!

One of the most popular series of articles i’ve ever written was called Pimp My Game. It was an experiment in game monetization, back before i’d ever released a game of my own. i wanted to know how much money i could earn distributing a game, so that i’d know the amount of money i could invest in development in order to break even, at the very least.

The results were … abysmal. The Pimp My Game feature predates a number of tools and tricks that have made it far more possible for Flash game developers to earn money on their creations – most notably Flash Game License and microtransactions (GamerSafe/HeyZap/Mochi Coins).

Even with those services, it struck me that the amount of money required to develop a game of significant scope and scale to catch the attention of the average portal-goer, versus the relative risk of not landing a large enough sponsorship or earning cash back through scant ad rev share, was not a racket i really wanted to be in. Untold Entertainment makes custom games as a service for a number of clients, and i feel we’re paid appropriately for our efforts. i’ve never developed a game for a client on the off chance that they’d pay money for it.

i’ve been told numerous times, not least of all by the Flash Game License operators themselves, that game sponsorships can get up into five figures, with $20 000 being thrown around most often by people trying to impress me. Who’s paying these sponsorships? The buyers are mostly game portal owners.

The Cake is a Lie

What’s a game portal? It’s a websites that aggregate games and sandbags them with assloads of ads.

So a portal can pay out $20k to sponsor a game. What’s in it for the portal? Usually, portals require the game developers to incorporate the hyperlinked portal logo in the game pre-roll, and possibly other promotional hooks – a “more games” button on the title screen leading back to the portal, portal-specific high scores – that sort of thing. The idea is that players play these free Flash games, which are distributed far and wide to tens of thousands of sites, and the players may purposely (or inadvertently) click somewhere in the game to be brought to the sponsoring portal. Sponsors will often pay extra cash for exclusivity rights.

And how does the portal make enough money to pay a sponsorship? Unless i’m missing something, the most significant source of revenue for a game portal is advertising. There are some smaller, secondary streams – for example, Mochimedia kicks 10% of Mochi Coins sales to the portal when players spend Mochi Coins in games hosted on those portals, and Mochi also cuts the portal in for a small percentage of Mochiads revenue, but there we’re talking about fractions of fractions of pennies. The bread and butter of any games portal is advertising.

If You Can’t Beat ‘Em …

At this point i began eyeing the portals themselves with keen interest. $20 000 for a sponsorship? Again, unless i’m missing something, that must mean that at some point, a portal earns more than $20k in advertising. And game portal advertising revenue is passive income, that elusive majestic money creature that i’m constantly persuing. You just have to throw up a portal, stick some games on there, surround the games with ads, and kick back while waves of money roll over you like a stinky cash tsunami. “Beautiful”, i thought. “Let’s do this thing.”

Here are the steps i followed to set up my first portal, WordGameWorld.com:

1. Register the domain name – $10
2. Pay for hosting. i’m paying $33/mo to a company called 1&1 to host a VPS (Virtual Private Server), which is essentially like having my own (underpowered) web server computer. i originally started renting the VPS so that we could power Interruping Cow Trivia using the multiplayer ElectroServer software. You can probably get away with paying a regular web host less than $10/mo to host a portal.
3. Install WordPress, which is very popular free blog software. The Untold Entertainment blog you’re reading now runs on WordPress.
4. Purchase a WPArcade theme and plugin. These guys license a WordPress theme (skin) that makes your site look like a game portal. The plugin they provide enables you to enter the game distribution rss feed address from MochiMedia and, with the click of a button, inject ten thousand free Flash games into your portal site.
5. Set up a Google Adsense account. This was the trickiest step – at first, Google denied my registration because WordGameWorld.com had zero traffic. WordGameWorld.com was live for a long time with no advertising, until i got a hot tip from a Twitter friend that once Adsense approved one of my sites, i could use Adsense ads on other sites that i owned. i leveraged the traffic on UntoldEntertainment.com to get my account approved, and then placed the ads around the WPArcade WordPress theme using their tool.

Step 4: Proft?

At this point, i had contractors come in to widen my front door in anticipation of the deluge of cash that would no doubt come blasting into my living room from men with money guns, all owing to this most brilliant idea of mine. It wasn’t long before i figured out that setting up a game portal is easy … driving traffic to it ain’t.

For the remainder of this series, i’ll document my madcap methods i used to try to drive traffic to my game portals. My journey takes me from dating services for gay nerds, to bikini-clad women in Brazil, to the very bowels of The Internatz itself … all in the name of making money off the backs of the free Flash game developers that i never want to become. i promise it will be lurid, sleazy, and informative. But mostly lurid.

It took a lot of back and forth and futzing to finally convert the artwork properly, and when i finally found the solution, i realized i had known it all along and had merely forgotten it (because i don’t do this type of thing often). So i’m recording the solution here for posterity; the next time i have to do this, a Google search will turn up my own blog :) It actually wouldn’t be the first time that’s happened.

i’ll keep you on tenterhooks and take you through the frustrating conversion process, just so that you can swear along with me and nod your head and say “yep – that’s happened to me.”

Export Image

The ability to export artwork to .ai format has actually been removed from Flash Professional as of version CS5, and has been replaced with the Adobe .fxg format, which works as expected. The .fxg format even converts gradients properly, which have been a longstanding asspain for the past 10 years. If you’re running CS5 or better, export to .fxg and you’re done. If you’re trapped in CS4 or below, here’s what you may have tried:

1. File > Export > Export Image
2. Choose Adobe Illustrator (*.ai) from the drop-down filetype list
3. Punch in a filename, and click “Save”
4. Open the file in Illustrator

The first roadblock you encounter may be this message:

Can’t open the illustration. The illustration contains an incomplete or garbed object description.

Offending operator: “”

Adobe_Illustrator_AI5 / initialize get exec
%%BeginEncoding: _pixelmic … feh. i can’t be arsed to look up the accented characters to type the rest.

i’ve ranted at length before about the error messages eggheads put into their software products. How on Earth is joe average user – and an artist, at that – supposed to react to and troubleshoot a message like this?

Obviously (?), all the egghead wanted the artist to do was this:

Select the single movieclip and press CTRL+B to break apart the object into separate objects. Now, when i go through the export process and bring the file into Illustrator, i get this:

The reason why the colors are desaturated and grey-looking apparently has to do with the Flash .ai export routine deciding to convert RGB artwork to CMYK artwork. i don’t know why it does this, but it’s not helpful. But at least the artwork is in Illustrator in vector format, right?

At this point, you could pick through every piece of vector art and tweak the color by hand … if you’re a sucker. Instead, let’s get on to the reason you’re here: the actual solution to this non-working nonsense.

WMF FTW!

The secret is to export as a Windows Metafile. Mac people, i don’t know if you have this option. If not, i’m not sure how to help you … but once you counter-intuitively export as a .wmf file instead of an .ai file and bring THAT into Illustrator, voila: your artwork is beautifully preserved with its RGB colors intact.

As i mentioned, the one drawback is that gradients don’t survive the crossing. This character’s cell phone casts an alpha gradient glow across her face, which shows up as a flat white polygon in Illustrator:

.fxg format will fix that. If you’re not ready to upgrade your software, this might entail an ugly hand-conversion process of all your gradients … unless someone else has discovered the esoteric conversion secret to preserving gradients? Anyone?

Big thanks to Gavin Friesen, my Art Director back at Corus, for originally cluing me in to this solution.

For more Flash AS3 Tutorials and a pile of other useful stuff, check out our Flash and Actionscript 911 feature.

Here are a few glossary terms that kinda sorta carry over from Flash to Unity:

MovieClip == GameObject (but more accurately, Symbol == Prefab. Much like a MovieClip/Graphic/Button in Flash, whatever changes you make to a Prefab in Unity will replicate to all instances of that Prefab)

Scene == Scene (but Scenes in Flash are generally useless and glitchy … Scenes in Unity are the bee’s knees)

Library == Project panel

Properties panel == Inspector panel

Timeline == A-NOTHING!! (except that there IS a timeline that allows you to animate GameObjects. The resulting animation is stored in an .anim file inside your Project panel. You can apply an animation to any GameObject in your Scene, so animations are curiously reusable)

Instance names == tags … sorta (but unlike in Flash, you can have multiple GameObject instances with the same tag)

Layers == layers (but Unity does not display its layers in anything nearly as nice as the Flash timeline)

In Understanding Functions, we learned that Functions are a way to bundle code statements together into a tight little unit that we can invoke (or “call”) any time we like, and as often as we like. There are two very important features to learn about Functions: Arguments and Return Values. We’ll figure out Arguments in this article.

Til You’re Blue in the Face

Arguments aren’t as unfriendly as they sound. They’re just additional pieces of information we can send to a Function during a Function call. You’ll remember that a Function call looks like this:

doSomething();

Quite often, we need to pass additional information to Functions to make them super-useful. Let’s imagine we have a text input field where the player can enter his name. The player types in his name and clicks a button, and the game says “Hello, John” (or whatever the player’s name is). The dynamic, or changing, part of that Function is the player’s name. Here’s how that Function might look if it was “hard-coded”:

function sayHello()
{
    trace("Hello, John.");  // ain't nothing dynamic about this
}

Note: Unity javascript people will want to start the function name with a capital letter as a best practice, and use either print or Debug.Log in place of trace.

This is okay, but the problem is that every time we call (run, execute, do) that Function, it’s going to say “Hello, John.” What if the player’s name isn’t John? Well, we need to make that part dynamic, because it changes.

Dynamic!

Let’s set up our Function so that we say “Hello”, and then tack on a variable that holds the player’s name:

function sayHello()
{
    trace("Hello, " + playerName);
}

(When working with Strings, the + operator glues two strings together.)

It’s getting better, but we have a new problem: the code interpreter is going to see playerName and think “playerName? What the heck is that?” Then it’s going to freak out and the Earth is going to crash into the Sun, and we don’t want that.

We need to declare and define the playerName variable somewhere. But instead of just declaring playerName any old place, we’re going to tell the sayHello Function which playerName we’d like it to say. We’re going to set our sayHello Function up so that it has a parameter. We do that between the round brackets in the Function declaration:

function sayHello(playerName : String)
{
    trace("Hello, " + playerName);
}

Parameters go between the round brackets in a Function declaration. In the continuing tradition of seeing our blocks of code as visual elements, check this out:

When we structure a Function this way, we say that the sayHello Function accepts one parameter, which is called playerName. The type of playerName is a String (a list of letters and/or numbers). Notice that even though this is kind of like a variable declaration, we don’t need to use the var keyword.

Exact Change Required

i like to think of parameters as the payment that a Function accepts. The sayHello Function takes one argument and stores it in its first parameter. Since the first parameter is of type string, we need to “pay” it a string. If we pay any other datatype (int, float, number, boolean, array), the compiler will throw an error.

Here’s how we “pay” a string to the sayHello Function:

sayHello("Murphy");

Freeze frame! Let’s become the Pac Man-like code interpreter and follow the logic of this statement for a moment.

The interpreter gets to this line and recognizes it as a Function call, thanks to those round brackets at the end.

It also sees – hey! – the programmer has passed an argument to the Function inside those round brackets. So Pac Man puts that in his suitcase, hops in the DeLorean, and travels off in search of the sayHello Function.

When he finds it, before he starts chewing through the statements in the statement block (between the curly braces), the Pac Man-like code interpreter drops off the argument into the waiting playerName parameter bucket, between the round brackets of the Function declaration.

Now the parameter called playerName has a value of “Murphy”. Since “Murphy” is a String, and since the sayHello Function demands exact change (one argument of type String), we’re good to go!

With payment resolved, the code interpreter chews through the statements in the statement block (between the curly braces), reaches the bottom of the Function, and hops back in the DeLorean to pick up where he left off, back at the end of the Function call.

Because the value of the variable playerName is the String “Murphy”, the result is that the console/output window says Hello, Murphy. It will say Hello to whatever name we pass in as an argument.

Breakamage Pt.1 – Wrong Datatype

It’s really important to break code and cause errors, so that when you’re in a jam on a project and an error comes up, you’ll know what it means and how to deal with it.

Try tweaking the sayHello Function call so that you pass an int (integer/whole number) instead of a String:

sayHello(42);

42 is not a String. Your first clue is that it’s missing those double-quotation marks around it. Since the sayHello Function DEMANDS exactly one string as payment, the compiler throws an error.

This is what that error looks like when we use ActionScript 3:

Scene 1, Layer ‘Layer 1′, Frame 1, Line 1 1067: Implicit coercion of a value of type int to an unrelated type String.

i really take exception to the way eggheads write error messages. They could stand to be a LOT more clearly written. But here’s what this error is trying to say: “implicit coercion” means you’re trying to force something to be something else, and ActionScript 3 can’t manage it. In this case, you’re trying to force an int (42) to become a String when Pac Man delivers the goods to the sayHello Function, and the compiler is having a minor freak-out. That’s your clue that you may have passed a mismatched type as an argument to a Function.

This is the error message that the same mistake will cause in Unity javascript;

Assets/NewBehaviourScript.js(4,10): BCE0017: The best overload for the method ‘Tutorial.sayHello(String)’ is not compatible with the argument list ‘(int)’.

Ugh! You eggheads are killing me. Forget what an “overload” is and focus in on the part that (sorta) makes sense to you right now: something is not compatible with the argument list. You can see quite clearly that one is a String, and the other is an int. That’s your clue that you’ve botched the argument type. Go back and patch this up, and you’ll be golden.

Extremely Argumentative

So is that it? Can Functions only accept one argument? No … they can actually accept multiple arguments. Be sure to comma-separate them, like this:

makePizza("pepperoni", "mustard", "tree bark");
 
function makePizze(topping1 : String, topping2 : String, topping3 : String)
{
 
}

B..but … do they all have to be the same datatype (String)? Heck no! You can mix and match. The only rules are that you need to pass the arguments into the Function in the same order as the parameter list, and you need to pass the same number of arguments the Function requires. The Pac Man-like code interpreter unpacks these one at a time in order. So let’s pretend there’s a function that takes a String, an int and an Array (in that order):

function initPatient(patientName : String, age : int, aPhobias : Array)
{
 
}

As long as we pass in a String, an int and an Array, in that order, it works:

var theName : String = "Shaggy";
var theAge : int = 17;
var aThePhobias : Array = new Array("like, ghosts", "like, zombies", "like, creepy-crawly things");
initPatient(theName, theAge, aThePhobias);

That’s fine. But as soon as we mix up the order, there’s trouble:

var theName : String = "Shaggy";
var theAge : int = 17;
var aThePhobias : Array = new Array("like, ghosts", "like, zombies", "like, creepy-crawly things");
initPatient(theAge, theName, aThePhobias);
 
// ERROR!  Totally long-winded explanation that could really be made a lot more clear, but eggheads aren't about making other people's lives easier (unfortunately).  In short, argument type mismatch.

So far so good? You may have noticed that i made the names of the variables i passed into the Function as arguments conspicuously different than the names of the parameters i accepted in the initPatient Function. This is because i wanted you to see that there is a difference between these two things, and that there CAN be a difference. When you call a Function and pass it some arguments, the variable names you pass in don’t matter … it’s the values stored in those variables that Pac Man takes with him on his journey.

Breakamage Pt.2 – Wrong Number of Arguments

Just as sending in the wrong type of argument will throw an error (ie paying a quarter when the Function wants a nickel), the compiler will throw an error if you pass in the wrong number of arguments.

In this example, we have a Function that accepts one argument, but we try to pass it two arguments:

function eatBacon(numberOfStrips : int)
{
    trace("OM NOM NOM!  I just ate " + numberOfStrips + " strips of delicious bacon.");
}
 
eatBacon(57, "i can haz heart attack"); // ERROR!!

The function wants only one argument, but we’re sending it two. Here’s what the error looks like when we use Actionscript 3:

Scene 1, Layer ‘Layer 1′, Frame 1, Line 6 1137: Incorrect number of arguments. Expected no more than 1.

Thankfully, this is one of the clearest error message i’ve ever seen an egghead write.

This is what the error looks like when we use Unity javascript (changing trace to either print or Debug.Log and using a capital letter to begin our Function name):

Assets/NewBehaviourScript.js(8,9): BCE0017: The best overload for the method ‘NewBehaviourScript.eatBacon(int)’ is not compatible with the argument list ‘(int, String)’.

That’s the same error we get when there’s an argument type mismatch, so the Actionscript eggheads did a slightly better job of communicating the problem than the Unity eggheads did. The important thing is that you learn to recognize why Unity or Flash are throwing the error so that you can fix it quickly and get on with your project.

Note that you’ll throw an error even if you “overpay” a Function. If a Function wants exactly two arguments, and you give it nine, you’ll get one of these errors.

But Wait – There’s More!

There are two more advanced topics when it comes to passing and accepting arguments – optional arguments, and Rest arguments. They’re useful, but not crucial. We’ll be sure to cover them in future articles.

For now, get some practice passing arguments to your Functions, and writing parameters to store those articles. The fate of the free world may depend on it! Or whatever.

For more Flash AS3 Tutorials and a pile of other useful stuff, check out our Flash and Actionscript 911 feature.

Bang on De Drum All Day

Here’s a secret about programmers: they are inherently lazy. The less typing a programmer can do, the better. Programming is all about dreaming up complex tasks that programmers don’t want to do, and delegating those tasks to a computer so that the programmer can blow off and watch cartoons the rest of the day.

Many programming structures are designed to make a programmer’s life easier. And a programming rule of thumb is generally that if you have to type something twice, there’s an opportunity to make your code more efficient.

Functions make your code more efficient. Let’s imagine a game where we need to create a bunch of monsters. If you’ve read Understanding Loops, you know that you can set up a loop to run an action multiple times. i’ll use a combination of pseudocode (in comments) and real code to demonstrate:

// Make 50 monsters.
var totalMonsters:int = 50;
var i:int = 0;
for(i=0; i<totalMonsters; i++)
{
    // make a monster
}

So far so good. But there are a few other things we have to do with these monsters we create. We need to put each one on a hill. Then we need to dress each monster up in a Power Hat. Next, we need to hide a key to each monster’s hilly domain. Let’s modify the loop:

// Make 50 monsters.
var totalMonsters:int = 50;
var i:int = 0;
for(i=0; i<totalMonsters; i++)
{
    // make a monster
    // put the monster on a hill
    // put a power hat on the monster
    // hide a key
}

Mmmm … we’re almost there. Now we need to create a portrait for that each monster and put it inside the castle, so that when the hero defeats a monster, the portrait gets a big checkmark on it. Then we need to create a magic gem that will kill each monster. Each gem needs to be buried somewhere underground. Finally, we need to create a villager for each monster in the game. Each villager will give you a clue as to where to find the monster-killing gem.

// Make 50 monsters.
var totalMonsters:int = 50;
var i:int = 0;
for(i=0; i<totalMonsters; i++)
{
    // make a monster
    // put the monster on a hill
    // put a power hat on the monster
    // hide a key
    // create a portrait
    // put the monster's face on the portrait
    // put the portrait inside the castle
    // create a gem
    // bury the gem underground
    // create a villager
    // give the villager a gem clue
}

Oh man. This loop is getting real ugly, real fast. There’s so much STUFF in there. It’s getting out of control.

If we take a close look, we see that we’re running a few tasks that can be grouped together. All the monster stuff goes together. All the key stuff goes together. The gem stuff goes together. The villager stuff goes together. That’s four separate bundles of tasks that, like a pile of sticks, we should be able to wrap up with twine in a tidy little package.

I Have a Tiny Little Package

That’s one of the things Functions do for us: they allow us to group related tasks together into a little package, and we can refer to that package over and over again without having to repeat any lines.

A Function declaration looks very much like a variable or array declaration. Instead of the var keyword, we use the function keyword. In ECMA-based languages like Actionscript 3, Unity javascript and C#, functions are followed by round brackets. Then you open up a statement block between curly brackets, just like in a For Loop or a conditional (If) statement:

function doSomething()
{
   // statements go here
}

Note: If you’re using Unity javascript, best practice is to begin a function name with a capital letter.

So doSomething is our function name. That’s a custom name that we came up with. It makes a lot of sense to use verbs (action words) when naming your functions. We’ll see why in a moment.

Let’s carve out the statements involving the monsters and put them in their own function:

function initMonsters()
{
    // make a monster
    // put the monster on a hill
    // put a power hat on the monster
}

(the “init” here is short for “initialize”, which means “set it up”)

Now, back in the loop, we can substitute those three statements with a Function call. A Function call always uses the name of the function, followed by round brackets, with a semi-colon to end the statement. Take a look:

// Make 50 monsters.
var totalMonsters:int = 50;
var i:int = 0;
for(i=0; i<totalMonsters; i++)
{
    initMonsters(); // We removed these three statements and put them in their own function.
    // Now, we just call the function.
 
    // hide a key
    // create a portrait
    // put the monster's face on the portrait
    // put the portrait inside the castle
    // create a gem
    // bury the gem underground
    // create a villager
    // give the villager a gem clue
}

In common programming parlance, this is called calling a Function.

To understand how a function call works, we need to put ourselves back in the role of our code interpreter, which is a lot like Pac Man.

Pac Man hits the first statement in the loop. It’s a function call. So he jumps out of the loop to wherever the Function is declared, and chews through all of the statements in that Function. When he reaches the bottom of the Function, he bounces back to the loop again, and resumes chewing through code at the very next line.

This works very nicely. Now we can go through and offload all of our chunks of functionality into their own Functions. When we write it all up, i looks something like this:

// Make 50 monsters.
var totalMonsters:int = 50;
var i:int = 0;
for(i=0; i<totalMonsters; i++)
{
    initMonsters();
    initKeys();
    initPortraits();
    initGems();
    initVillagers();
}

Look how much easier to read that loop is now. It’s very clear that we loop 50 times, and each time we make some monsters, some keys, some portraits, some gems, and some villagers. The details for each process are buried in their respective functions. Now, when we look at the initKeys function, we only have to worry about tasks related to initializing those keys.

This bouncing around that the Pac Man-like code interpreter does is the reason why i say that Object Oriented Programming (OOP) is like taking multiple plane flights through time portals.

There are two more very important things to learn about functions: Arguments and Return Values. These are detailed in two additional articles. Once you read through those, you’ll know almost everything there is to know about Functions, and you’ll be ready to start putting that knowledge into practice by building your own stuff!

For more Flash AS3 Tutorials and a pile of other useful stuff, check out our Flash and Actionscript 911 feature.

Now that we understand loops, and we understand arrays, we’re ready to smack their featureless plastic genitals together like we’re making Barbie have babies.

Arrays really come alive with Loops. By using an Array’s length property as the loop limiter, we can step through every element in an Array one by one.

Here’s what that looks like in code:

var myArray:Array = new Array("Nigel Tufnel", "Derek Smalls", "David St. Hubbins");
 
var i:int =0;
for(i=0; i<myArray.length; i++)
{
    trace(myArray[i]); // This prints each element in the array, one by one, to the console/output window 
}

Note: If you’re using Unity javascript, try print or Debug.Log instead of trace.

If you truly understand Loops, this shouldn’t be too challenging for you. Instead of using some arbitrary value like one thousand as our limiter, we’re using the array’s length property, which is the number of elements in the array. This property is dynamic, so that any time we add things to our array, or take them away, length is updated for us. We don’t have to rely on a hard-coded value (which means a number that doesn’t change).

The code snippet shown above traces out each element in the array, one after the other:

• Nigel Tufnel
• Derek Smalls
• David St. Hubbins

This is because on every iteration of the loop, our iterator variable called i is increased by one.

i begins life with a value of 0. On the first run through the loop, the code interpreter resolves myArray[i] to myArray[0]. The first element in the array, at index 0, is “Nigel Tufnel”, so that’s what you’ll see in the output console.

On the next iteration, i gets jacked up to 1. The element at index 1 in the array is “Derek Smalls”, so that’s what prints out.

Finally, in the third and final round, we print out “David St. Hubbins”, because myArray[i] resolves to myArray[2]. The element at index 2 of the array is “David St. Hubbins”.

After that, the interpreter bounces back to the top of the loop. i is incremented to 3. We check the limiter:

i < myArray.length

Because i is 3 and myArray.length is also 3, this line resolves to 3 < 3. Since 3 is not less than 3, the answer here is false. And because the answer is false, the code interpreter is not allowed to go through the loop any more. It happily exits the loop and starts chewing through the code beneath the bottom closed curly brace that ties up the loop.

Protip: If you’re a stickler for speed, it’s marginally faster to store myArray.length in a variable, to prevent your interpreter from having to do the length calculation on every iteration of your loop. Here’s what that looks like:

var myArray:Array = new Array("Nigel Tufnel", "Derek Smalls", "David St. Hubbins");
 
var i:int =0;
var len:int = myArray.length;
for(i=0; i<len; i++)
{
    trace(myArray[i]);
}

We store myArray.length in a variable called len, and then refer to that variable in the limiter section of the loop header.

For even more of a tiny speed increase, do away with the new keyword and declare the array like this:

var myArray:Array = ["Nigel Tufnel", "Derek Smalls", "David St. Hubbins"];

Who Cares?

This is all still pretty pointless. When are you ever going to use this when programming a game? Well, for the rest of the article, i’ll lay some real-world examples on you to give you an idea of how to maximize the wonderful union of Loops with Arrays.

Think of any situation in a video game when you have a list of similar things. In a first person shooter, you need to keep track of all the bullets that get fired. Makes sense to create an array to store all of those bullets. You can add bullets to the list and remove them from the list using the Array class methods we looked at in the Understanding Arrays article.

Most games run on one giant loop, with an Update process and a Draw process. Update figures out where everything should be, and Draw renders those things to the player’s view. If you want to update the positions of all the bullets, you may need to use a For Loop to loop through your collection of bullets and move them one tiny bit. Then in the Draw process, you loop through your list of bullets and render them to the screen. When you repeat these processes quickly enough, you get the illusion of animation.

Very often, you’ll use a loop to create the initial array of objects, and then more loops later to pick through that list. Here’s an example of two functions. One initializes all of the monsters, and the other kills all of the monsters (assuming the player just used the “Kill All Monsters” megabomb power-up).

var aMonsters:Array; // this array is a bucket that can hold many things: namely, monsters.
 
function initMonsters():void
{
     aMonsters = [];  // Defines an empty instance of the Array class.
     var totalMonsters:int = 50; // this is a variable (bucket) that contains the number of monsters we'd like to begin with
     for(var i:int = 0; i<totalMonsters; i++)
     {
         aMonsters.push(new Monster()); // Creates a new instance of the Monster class, and adds that instance to the aMonsters array.  
         // If that's confusing to you, we can split this up into two separate lines:
         // var monster:Monster = new Monster();
         // aMonsters.push(monster);
     }
}
 
function killAllMonsters():void
{
     var len:int = aMonsters.length; // store the length of the aMonsters array in a variable called len.
     // By doing this, we speed up our loop ever so slightly.
     for(var i:int = 0; i<len; i++)
     {
         var monster:Monster = aMonsters[0]; // stores a reference to the first monster in the array
         monster.die(); // calls some sort of death method on the monster instance
         aMonsters.shift(); // removes the first element of the array.  The aMonsters array gets shorter and shorter every time we loop, as we remove monster after monster.  By the end of this loop, the aMonsters array is empty.
     }   
}

Note: If some of the initialization stuff here looks a bit spooky, try reading the Understanding Classes series. Hopefully you’re catching what i’m throwing regarding loops and arrays, even if the class stuff is a little unfamiliar.

For Unity javascript: Everything here is almost identical … the main difference is that methods like push begin with capital letters.

Those double-slashes, by the way, are comments. They are ignored by the compiler, and are added to clarify the code.

Get Carded

Here’s another example. Let’s say we’re programming a card game. We can use an array to store our deck of cards. Each element in the array is a card. We use one loop to build the deck. Then we shuffle the deck. Finally, we use a loop to deal some cards onto the table, using the Array.shift() method to deal off the top of the deck. This removes the cards from the array one by one, and adds them to a different array called aCardsOnTable.

var aDeck:Array; // declare an array to hold all the cards
var aCardsOnTable:Array; // declare an array to hold the cards that we deal out
 
function buildDeck():void
{
    aDeck = []; // create an empty instance of the Array class and store it in a variable called aDeck
    var totalCards:int = 52; // we want 52 cards in the deck, so that's how many times we'll loop
    for(var i:int=0; i<totalCards; i++)
    {
         aDeck.push(new Card()); // we instantiate the Card class, and add the new card instance to the aDeck array.
         // Once again, if we're doing too much in this line for you to follow along, here's a longer version of the same code in two steps:
        // var card:Card = new Card(); // create the card instance and store it in a variable
        // aDeck.push(card); // add the card instance to the aDeck array
    }
    shuffle(aDeck); // this is a custom function that you'll probably have to write yourself (just like the Card class).  It randomizes all of the elements in the array.
}
 
function dealCards():void
{
    aCardsOnTable = []; // define aCardsOnTable as an empty array
    var numCardsToDeal : int = 5; // Let's deal 5 cards to the table.
    for(var i:int=0; i<numCardsToDeal; i++)
    {
         aCardsOnTable.push(aDeck.shift()); // pulls the first element out of aDeck, and adds it to aCardsOnTable
         // That's a bit of shorthand.  Let me blow that line out into separate steps in case you're having trouble following it:
         // var topCard:Card = aDeck.shift();  // use shift to pull out the first card in the aDeck array, and store it in a variable called topCard
         // aCardsOnTable.push(topCard); // add the card we removed to the end of the aCardsOnTable array.
    }
    // When we finish with this loop, there are 5 cards in the aCardsOnTable array,
    // and 47 cards left in the aDeck array.
    // This is a great way to deal out cards!   By removing a card from the aDeck array each time using shift(), we ensure that we'll never deal the same card twice.
}

Those previous two examples are very similar. Here’s another real-world example that’s slightly different.

Looping Through Movieclips on the Stage

Super eggheads like to lay out their GUIs (graphical user interfaces – buttons and windows and text boxes and junk) entirely in code. i don’t prefer to do it that way, because i’m a very visual person, and i like to see my interface laid out on-screen. i like to be able to poke, prod and nudge things around visually.

So often, i’ll have a bunch of buttons on the stage. The buttons all have instance names. i’ll put those instance names in an array, and then loop through the array to add standard buttonMode, rollover and rollout effects to all the buttons in one shot. Here’s how that looks, presuming i have the buttons “phyiscally” on my stage and named properly:

 
 
// i call the initBtns function somewhere in my code
 
function initBtns():void
{
    var aBtnNames:Array = ["btnPlay", "btnQuit", "btnCredits"]; // we store the instance names of my on-stage buttons in an array
 
    var len:int = aBtnNames.length; // Let's dynamically loop through as many buttons as we have in the array.
    for(var i:int=0; i<len; i++)
    {
         activateBtn(this[aBtnNames[i]]);
         // Here's a slower, possibly clearer way to say that:
         // var btnName:String = aBtnNames[i]; // Refers to the i'th element of the array
         // var btn:MovieClip = this[btnName] // Refers to a movieclip instance on stage with that name
         // activateBtn(btn); // Passes the reference to that button to the activateBtn function
    }
}
 
function activateBtn(btn:MovieClip):void
{
     // This is standard stuff i want all of my buttons to do:
     btn.buttonMode = true;
     btn.mouseEnabled = true;
     btn.mouseChildren = false;
     btn.addEventListener(MouseEvent.MOUSE_OVER, rollOverBtn);
     btn.addEventListener(MouseEvent.MOUSE_OUT, rollOutBtn);
}

Of course, an even better way to handle this button situation is to create your own custom button class, but we’re taking baby steps here. That’s the thing about code – these pieces we’re learning are like Lego blocks. There are tons of different ways to build a sculpture out of Lego. There are no “right” ways – only preferred ways. Use this Understanding … series to get a grip on all the blocks you have to play with, and then … it’s time to play!

For more Flash AS3 Tutorials and a pile of other useful stuff, check out our Flash and Actionscript 911 feature.

Credits are those long, scrolling pages of text at the end of the movie that you watch just to see if the filmmakers added a special jokey tack-on scene at the end of the flick. If you read closely, you’ll see that they are the names of people who worked on the movie, listed alongside their job titles. In film, there are credits for the big people – the executive producer, the director and the principal actors – all the way down to the little people – the sandwich grip, the second-line gaffer, and the assistant schloob.

If you look closely, you’ll begin to see credits everywhere. They’re tacked on to the beginning and end of teevee shows, they’re inside album liner notes, and they pop up at the end of your favourite home console or computer video games. But the one place you won’t find them is in online free-to-play Flash games – partly because Flash game developers decide not to put them there, and partly because developers are actively blocked from adding credits to their games by corporations with selfish interests.

Flashsploitation

More than just being a token kind gesture recognizing the hard work and effort people put into an entertainment product, for mature industries like film, television and music, credits are actually a key cog in the machine. The CVs and resumes of performers and technicians rely on the credits system; often, your ability to land future jobs is based on the credits you’ve amassed on earlier projects. Because of this, there are unions and guilds strictly guiding the practice of giving credit, in order to protect entertainment professionals from exploitation.

The Flash game ecosystem is notorious for being packed with non-professionals, but we boast our fair share of pros. Many game developers do what’s called “service work” to pay their bills. A company will approach a known game developer, and will contract him to build a Flash game to certain specifications. My own company, Untold Entertainment Inc., is just such a developer. We survive on service work, largely building Flash games and Flash websites for clients like kids’ television production companies. If a prodco has a teevee show, especially if it’s targeted towards kids, they’ll also want someone to build them a web game to help promote and extend their brand. Companies like Cartoon Network, Nickelodeon, and Disney regularly contract Flash game developers to build their arsenal of online games.

If you wanted to find out which developers built these games though, you’re largely out of luck. Try fishing through the games on the sites i mentioned and look for production credits – even a single logo of the developer who built the game. With a few rare exceptions, you’ll come up empty-handed, game after game. Before founding Untold Entertainment, i worked at a media conglomerate serving a number of kids’ teevee stations. Throughout my time there, i made over fifty games. i was not credited for a single one.

Keep it Secret, Keep It Safe

Once out in the “real world”, i began to actively ask my clients for credits in the games i produced for them – a logo, at the very least. Credit is one way to boost morale and mutual respect among your developers, and beyond that – it just seems RIGHT, you know? When teevee and film are crediting their most important people down to the very guy who tapes the pylons to the road, it just didn’t seem right that the team or individual who created the entire game wouldn’t be recognized. And having my logo feature in the game somewhere could be a compelling driver for future business. All a prospective client need do is cruise through Cartoon Network’s site, for example, see my logo, and call me up with a contract offer.

Aye – there’s the rub. That’s exactly the situation that a client like Disney or Cartoon Network or Nickelodeon wants to avoid. They don’t want anyone else contracting out “their” developers. More competition for developers means that the devs will be more highly paid, and it may be more difficult for them to get their games made if the best devs are in higher demand.

No Promo

The second excuse i hear for not allowing credit is that these companies don’t want to let on that they didn’t do all the work themselves. There’s this strange macho corporate pride in pretending that all of their interactive work was done in-house – or at least, that’s the excuse they all give me. But a quick look through the credits of any special effects-laden film, for example, shows that individual effects shots are farmed out to numerous different special effects houses. This serves the special effects team in two ways: they can say they worked on Blockbuster 2: the Awesoming, and prospective clients can see their name in the credits, which both increases their brand recognition, and enables clients to contract them for new work.

But surely, a Flash game developer can at least SAY he worked on a given project, right? Actually, no. Many of these clients specify in the contract language that the game developer cannot even say he worked on the game. That means no screenshots on his site, and no link to the game. The developer must disavow any knowledge that the project ever happened, Mission: Impossible style. On one of my contracts, the client forbade me from ever mentioning i worked on the project. This became a sticking point, and when i fought for the right to promote, the client struck a bizarre bargain: i could promote my involvement in the project anywhere but online. Of course, the web is the only place i ever promote my work with Untold Entertainment.

It Doesn’t Ad Up

You could argue that the work we Flash game developers do for these companies amounts to advertising. Creating a game to promote The Family Guy or the Mickey Mouse Clubhouse shows is tantamount to creating an interactive advertisement online. And since teevee commercial spots don’t credit their creators, games promoting shows don’t need to either.

This argument falls down for two reasons: for one, there’s really no room in a teevee spot to credit the creators, but there’s plenty of room in Flash games, as they’re not temporally limited to 30 seconds. On the second count, advertising agencies promote their work all the time. Visit any agency website, and you’ll see the logos for the brands they’ve repped displayed proudly and prominently on the main page. Many sites actually do list credits for the commercials they created. Industry awards like the Clios list teevee commercial and print ad credits in full on their websites.

Credits are important. They serve as proof that a developer completed the work he said he did. They help to increase a developer’s brand awareness, and they help new clients reach Flash game developers that they otherwise may not have known about. Clients who refuse to credit developers, and who actively block developers from promoting the work are preventing the industry from maturing in the name of their own selfish interests.

Resistance by Insistence

So what’s to be done? When I started hearing from new clients that they wanted to use me instead of my more well-known competitor, i asked what he’d done to lose their business. Their answer? “He started getting pushy about credit.” Asking for credit, or even demanding credit that is rightly due to us as developers, is apparently hazardous to your health. It can harm your business. It may even be possible to land new contracts simply by forfeiting your game credit. Clients really seem to go for that type of thing.

But you know what i say? Screw that. The solution is for ALL Flash game developers to demand the credit they are due on ALL projects. Even if you’re not in this fee-for-service racket, you should add a Credits link to the main page of your Flash game as a matter of course. You need to create a logo and preface your own game with it – or simply use your own name (e.x. “A game by Ryan Henson Creighton”) Build your personal brand so that if clients come calling, you’ll have established a credit expectation in all of your games.

If ALL Flash games have a credits page (just as ALL teevee shows, movies, album liner notes, gallery installations, operas, stage plays, and nearly every other mature form of artistic expression or entertainment already has), then it will be simply unspeakable for a client to ask that you remove your name from the game. You can also support the IGDA in their efforts to create a Credit Standards guide, and point your clients to that guide during contract negotiations. For our part, Untold Entertainment now requires credit and promotion rights on all of our contracts – otherwise, we simply don’t take the job. If we as developers band together and demand recognition for our creative efforts as they do in so many other entertainment industries, together we can drag online games kicking and screaming from adolescence to adulthood.

Credits: this article was written by Ryan Henson Creighton, assistant schloob.

Escape from Area Fitty-Two is the sequel to a pair of great original graphic adventure games on YTV.com (YTV is like the Nickelodeon of Canada). The first two games, A Dark and Stormy Night and Miracle in the 34th Dimension, were featured Hallowe’en and Christmas games, respectively. They were created by Toronto-area game design phenom Michael Lalonde, whose work you’ll see in a lot of kids’ games made here in the city. Michael is also the creator of Orneryboy, which is a bit like Garfield, if Garfield were a multi-tentacled Lovecraftian demi-god in a zombie-filled world imagined by the love child of Edgar Allen Poe and the creator of the Care Bears. i like to call it “pop occulture”. (Content warning: Orneryboy is for older readers. Ask your parents first, kids.)

So working from characters created by Michael, a concept by Michael, and an aesthetic i lifted from Michael’s first two games, i went for broke and created the biggest Jinx adventure yet. (Michael would be spinning in his grave right now, but despite an occasionally pallid complexion, he’s very much alive. :) Audience expectations were very high, and given the nearly ten year release date gap since the second game in the series, we were very worried that the game would never be made. But last year, YTV pulled through, commissioning the second sequel and making a lot of fans and new players very happy.

Jinx 3 features three playable characters that you can switch between on the fly, a waypoint system for greater freedom of movement, and a bunch more puzzles and cutscenes than you found in the first two games. i would really like to have added voice-over, because Jinx 3 is pretty text-heavy. Maybe YTV will commission a Special Edition?

Here’s a fan-made walkthrough of the first half of the game from teh uTubez, if you want to watch someone else play it:

Note: The choppiness in the video is due to the fan’s screen capture software. The actual game plays smoothly. The writer character’s disappearing head is due to the YTV site embedding the game at a different aspect ratio, which causes animation glitches.

Introducing UGAGS

Jinx 3 was the first game created with UGAGS, the Untold Graphic Adventure Game System, which is a code framework and set of tools we’re building to help us create these kinds of games more quickly and easily for ourselves and our clients.

Jinx Fans Only

Everyone else can stop reading right now, but if you’re a Jinx/Sitekick/YTV fan, you may be interested to know how this game ties together the mythology of a lot of the original content on YTV. Here’s a list of trivia:

WARNING: Here be spoilers!

• The game reveals where Dr. Frantic got the red vat of mysterious alien ooze that you see in his lab when you go back in time in the Friday/Sunday chapter of the Sitekick Saga … he STOLE it from Area Fitty-Two!
• The alien ooze comprises the black gelatinous ooze core of the Sitekick, offering a possible explanation as to how Sitekicks gained sentience (note: the current Sitekick redesign doesn’t allow you to open your robot to see the ooze core any longer, which is a shame)

  

• YTV released a casual downloadable game called They Came for the Ooze. It was a match-3 game featuring little aliens that look a bit like Sitekick. The game hinted that the aliens returned to Earth to reclaim their ooze, but it never explained how Dr. Frantic obtained the ooze in the first place. Now we know!
• Dr. Frantic gets the idea for the Sitekick from the design on the wall of the small room inside the hangar. The design was confiscated from the Gnat aliens, which may mean that the Gnat aliens originally designed the Sitekick.
• The metal plate on the back of Dr. Frantic’s head joins a new revelation: when Dr. Frantic walks through the X-Ray, he’s a robot!

  

  Holy crap – it’s like the X Files up in here!

• Michael’s original concept for the game had Dr. Frantic losing his head, and Jinx had to rewire him to put him back together. The idea didn’t make it into this version, but it would be really neat to see it in a sequel.
• Michael made a time management Sitekick Factory, where one of Evil Santa’s E.L.F.s (Evil Loyal Followers) had to build Sitekicks. At the end of Jinx 3, Dr. Frantic offers the E.L.F. a job, which is a reference to Sitekick Factory.
• Between Jinx 2 and Jinx 3, Michael created an animated short where a UFO kidnaps Jinx while Jinx is camping. The UFO was a repurposed asset from Michael’s quickie game Nero the Hero. It was reused once more in the hangar in Jinx 3.
• At launch time, there was a Sitekick code in the small room inside the hangar. Get it while it’s still active!
• DID U KNOW? Jinx is never referred to with a gender-specific pronoun, which leaves it up to the player to see Jinx as either a boy or a girl
• There’s nothing under the sheet when Jinx walks through the X-Ray (another of Michael’s great ideas!)
• It’s tricky to catch, but when the E.L.F. walks through the X-Ray, he has a cupcake in his tummy. i threw that in there because i know Michael has a thing for cupcakes.
• Dr. Frantic gets his hovercar from the hangar, which he uses again in the Sitekick Saga – Wednesday chapter to battle the rampaging Monster Sitekick. One early idea was to have the characters all escape in their own hovercars.
• The inventory items are consistent and carry over from game to game.

YTV.com has a rich creative history packed with some fantastic original content. It would be great to see Corus, YTV’s parent company, exploit some of that IP worldwide. i think it would be a hit! Meantime, Jinx 3 was a fantastic project to work on – a real labour of love – and an itch i’ve been wanting to scratch for nearly ten years. i think it’s the funniest game i’ve ever written. Hope you enjoy it! (Now go let YTV know you want to see the much-rumoured sequel to Freaky Friday! :)

ZombieGameWorld.com is the newest portal in Untold Entertainment’s growing Game World Network, a group of sites packed with free-to-play web games catering to niche audiences. The key difference between ZombieGameWorld.com and WordGameWorld.com is quality: WordGameWorld.com is a curated site, where we hand-pick only the best or most enjoyable word games available online.

But we’ll throw any old piece of trash on ZombieGameWorld.com. Our reasoning is that zombie fans historically have a lower quality bar than the rest of us. With a few notable exceptions, their favourite movies and books are largely low-budget schlocky affairs where concept trumps execution. An audience accustomed to consuming entertainment that’s a little rough around the edges may be interested in the more … strained attempts of amateur game developers trying to cobble together a zombie game. The Featured section of the site highlights the rare online zombie games that are good-looking and great fun to play.

All new game content is cross-posted to the ZombieGameWorld.com Facebook fan page, as well as the ZombieGameWorld Twitter feed. The Twitter feed adds zombie-related news that gets cross-posted back to the main site.

Future plans for the site include community-based game-on-game elimination battles, badges, and possibly even an online loyalty system. The current model is advertising rev share through MochiAds and Google Adsense. Our immediate business goal is to earn enough ad revenue to cover hosting – both ZombieGameWorld.com and WordGameWorld.com are currently operating at a loss.

If you know zombie fans, or you have a GREAT idea for how we can promote the site without spending any money or digging up any corpses, i’d love to hear from you! Leave a comment and tell me if you think ZombieGameWorld.com has any potential, or if we’re just not using our braaaaaains.

Of course, the cover is still a work in progress. i’ve made a few suggestions to the publisher of what i’d like to see. For example, here’s a mock-up of the cover with a cat singing karaoke:

i’ve written a FAQ for the book. At last, all your burning questions will be answered:

What is Unity 3D?

Unity 3D is a game engine that’s been around for only a few years, but is rapidly gaining steam. It’s a tool that enables you to create your own 3D (or, with effort, 2D) games. You can deploy your games to the browser. That’s right: after a quick ~3MB plugin download, people can play your full 3D game right inside the browser, without having to download and install an .exe. If you want people to visit your portfolio site and play your games instantly, Unity 3D is the tool for you.

Can I Only Deploy to the Web?

No – the main Unity engine allows you to create standalone game files that will run on PC and Mac. If you purchase additional licenses, you can target the iPhone/iPod/iPad and WiiWare. Upcoming support has been announced for Android and Xbox Live Arcade (but keep in mind that you’ll still have to be a developer in good standing with Nintendo or Microsoft to develop for their consoles – it’s not a path you’ll likely take if you’re a hobbyist.)

How Much Does Unity Cost?

There are two versions of the core engine. Unity is free, while Unity Pro costs. Unity lacks a few features of Unity Pro, most notably real-time shadows and video playback support. (note: this lack of features is definitely not something that would get a beginner in much of a twist.) Games created with Unity are prefaced with a Unity-branded splash screen. You can check out a Unity license comparison grid here.

Beyond those restrictions, you’re free to make as many games as you like with the free version of Unity without paying a single cent to the engine authors. This is in contrast to UDK (Unreal Development Kit), Unity’s main competitor, which starts clawing back cash at (comparitively) alarming rates if you sell a certain number of copies.

I like Flash. Will I Like Unity?

Oh, yes! There are many similarities between the two programs. The biggest difference is that Flash is a content creation tool that people manhandle to the point where you can make games with it, while Unity 3D is a dedicated game engine. That means that it includes a lot of game systems right out of the box: physics, collision detection, 3D rendering and particle systems, to name a few.

Check out our Five Common AS3 to UnityScript Translations article in our Unity Nuub section.

What’s in the Book?

Unity 3D Game Development by Example contains lessons, code and art assets to build four very simple games in the engine: a keep-up game, a catch game, a memory game and a space shooter. These lessons are written in very plain language with lots of analogies and plenty of pictures, so that readers who have never coded or used a game engine in their lives will be able to get these projects off the ground. Certain elements, like the three countdown clocks in Chapter 7, are presented as standalone pieces that you can integrate into your games as you like. The book teaches you how to build standard game bits – title screens, buttons, timers, collision scripts, sound effects triggers, and endgame scenarios – that you can remix into your own projects.

Is This Book Appropriate to Use as a Text Book for my College or High School Game Design Program?

Absolutely. Please contact Packt Publishing for volume sales.

Is It Available As an e-Book?

Yes.

I Enjoy Murdering Trees. Is It Available as a Book Book?

Yes.

What Language is the Book Written In?

English, currently. All code examples are in javascript. Unity supports three different languages: javascript, C# and BOO. i chose javascript for the book because most of the online examples and tutorials i’ve come across are in javascript. It’s probably the best choice for a beginner.

What’s the Difference Between This Book and Unity Game Development Essentials by Will Goldstone?

Will’s also written a great beginner book – the first Unity 3D book on the market – that you should definitely check out. Will’s book contains one large open-world project with a number of smaller activities inside of it. My feeling was that open-world games open a whole can of worms that could potentially overwhelm someone new to Unity (what happens when you walk out into the water? What if you get stuck inside a volcano?). My focus was on keeping things simple and manageable, so that you can start with a very controlled and fully-functional project, and ramp up from there as your skills increase.

What’s the Difference Between This Book and an Riding Down an Exhilharating Waterslide on the Back of a Unicorn?

Not much.

Preface and Chapter Listing

By request, here is an excerpt from the book’s Preface:

“Game Developer” has rapidly replaced “firetruck” as the number one thing that kids want to be when they grow up. Gone are the days when aspiring developers needed a university education, a stack of punch cards, and a room-sized computer to program a simple game. With digital distribution and the availability of inexpensive (or free) games development tools like Unity 3D, the democratization of game development is well underway.

But, just as becoming a firetruck is fraught with perils, so too is game development. Too often, aspiring developers underestimate the sheer enormity of the multidisciplinary task ahead of them. They bite off far more than they can chew, and eventually drift away from their game development dreams to become lawyers or dental hygienists. It’s tragic. This book bridges the gap between “I wanna make games!” and “I just made a bunch of games!” by focusing on small, simple projects that you can complete before you reach the bottom of a bag of corn chips.

What this book covers

Chapter 1, That’s One Fancy Hammer!, introduces you to Unity 3D—an amazing game engine that enables you to create games and deploy them to a number of different devices, including (at the time of writing) the Web, PCs, iOS platforms, and WiiWare, with modules for Android and Xbox Live Arcade deployment in the works. You’ll play a number of browser-based Unity 3D games to get a sense of what the engine can handle, from a massively-multiplayer online game all the way down to a simple kart racer. You’ll download and install your own copy of Unity 3D, and mess around with the beautiful Island Demo that ships with the product.

Chapter 2, Let’s Start with the Sky, explores the difference between a game’s skin and its mechanic. Using examples from video game history, including Worms, Mario Tennis, and Scorched Earth, we’ll uncover the small, singular piece of joy upon which more complicated and impressive games are based. By concentrating on the building blocks of video games, we’ll learn how to distil an unwieldy behemoth of a game concept down to a manageable starter project.

Chapter 3, Ticker Taker, puts you in the pilot seat of your first Unity 3D game project. We’ll explore the Unity environment and learn how to create and place primitives, add Components like physic materials and rigidbodies, and make a ball bounce on a paddle using Unity’s built-in physics engine without ever breaking a sweat.

Chapter 4, Code Comfort, continues the keep-up game project by gently introducing scripting. Just by writing a few simple, thoroughly-explained lines of code, you can make the paddle follow the mouse around the screen to add some interactivity to the game. This chapter includes a crash course in game scripting that will renew your excitement for programming where high school computer classes may have failed you.

Chapter 5, Game#2: Robot Repair, introduces an often-overlooked aspect of game development: “front-of-house” User Interface design—the buttons, logos, screens, dials, bars, and sliders that sit in front of your game—is a complete discipline unto itself. Unity 3D includes a very meaty Graphical User Interface system that allows you to create controls and fiddly bits to usher your players through your game. We’ll explore this system, and start building a complete two-dimensional game with it! By the end of this chapter, you’ll be halfway to completing Robot Repair, a colorful matching game with a twist.

Chapter 6, Game#2: Robot Repair Part 2, picks up where the last chapter left off. We’ll add interactivity to our GUI-based game, and add important tools to our game development tool belt, including drawing random numbers and limiting player control. When you’re finished with this chapter, you’ll have a completely playable game using only the Unity GUI system, and you’ll have enough initial knowledge to explore the system yourself to create new control schemes for your games.

Chapter 7, Don’t be a Clock Blocker, is a standalone chapter that shows you how to build three different game clocks: a number-based clock, a depleting bar clock, and a cool pie wedge clock, all of which use the same underlying code. You can then add one of these clocks to any of the game projects in this book, or reuse the code in a game of your own.

Chapter 8, Ticker Taker, revisits the keep-up game from earlier chapters and replaces the simple primitives with 3D models. You’ll learn how to create materials and apply them to models that you import from external art packages. You’ll also learn how to detect collisions between Game Objects, and how to print score results to the screen. By the end of this chapter, you’ll be well on your way to building Ticker Taker—a game where you bounce a still-beating human heart on a hospital dinner tray in a mad dash for the transplant ward!

Chapter 9, Game#3: The Break-Up is a wild ride through Unity’s built-in particle system that enables you to create effects like smoke, fire, water, explosions, and magic. We’ll learn how to add sparks and explosions to a 3D bomb model, and how to use scripting to play and stop animations on a 3D character. You’ll need to know this stuff to complete The Break-Up—a catch game that has you grabbing falling beer steins and dodging explosives tossed out the window by your jilted girlfriend.

Chapter 10, Game#3: The Break-Up Part 2, completes The Break-Up game from the previous chapter. You’ll learn how to reuse scripts on multiple different Game Objects, and how to build Prefabs, which enable you to modify a whole army of objects with a single click. You’ll also learn to add sound effects to your games for a much more engaging experience.

Chapter 11, Game #4: Shoot the Moon, fulfills the promise of Chapter 2 by taking you through a re-skin exercise on The Break-Up. By swapping out a few models, changing the background, and adding a shooting mechanic, you’ll turn a game about catching beer steins on terra firma into an action-packed space shooter! In this chapter, you’ll learn how to set up a two-camera composite shot, how to use code to animate Game Objects, and how to re-jig your code to save time and effort.

Chapter 12, Action, takes you triumphantly back to Ticker Taker for the coup de grace: a bouncing camera rig built with Unity’s built-in animation system that flies through a model of a hospital interior. By using the two-camera composite from The Break-Up, you’ll create the illusion that the player is actually running through the hospital bouncing a heart on a tin tray. The chapter ends with a refresher on bundling your project and deploying it to the Web so that your millions of adoring fans can finally experience your masterpiece.

What you need for this book

You’ll need to be in possession of a sturdy hat, a desk chair equipped with a seatbelt, and an array of delicious snack foods that won’t get these pages all cheesy (if you’re reading the e-book version, you’re all set). Early chapters walk you through downloading and installing Unity 3D (http://unity3d.com/unity/download/). A list of resources and links to additional software can be found in the appendix.

Who this book is for

If you’ve ever wanted to develop games, but have never felt “smart” enough to deal with complex programming, this book is for you. It’s also a great kickstart for developers coming from other tools like Flash, Unreal Engine, and Game Maker Pro.

What’s Next?

Got any more questions? Drop me a line in the comments section and i’ll answer them here.

The panel was moderated by Jason MacIsaac of Electric Playground fame, late himself of a small Ontario game studio from the Niagara region called Cerebral Vortex Games.

My fellow guests on the panel were (from right):

• Ian Kelso, head of interactiveontario
• Leslie Phord-Toy, a producer at UbiSoft’s new Toronto Studio
• Ryan MacLean, formerly of Pseudo Interactive and a founder of Drinkbox Studios (also both the second Mac and the second Ryan on the panel)
• Philippe McNally, from Longbow Digital Arts, who recently released their PC RTS Hegemony: Philip of Macedon

i was thrilled to see that the line-up for the talk was substantial. A Fan Expo staff member asked us if we were okay with people sitting on the floor when we ran out of seats. Of course, Ubi Soft was the big draw, as many of the audience members wanted to know how to get a job there working on their favourite triple-A console franchises. i made a point to mention that UbiSoft also developed the Nintendo DS Babiez/Petz/Horsez games, as well as a number of cash-in movie licenses that have failed to pull in the same acclaim as their more well-known blockbusters.

i’m doing my best to end this (apparently prevalent) notion that working in the video game industry is the ultimate fulfillment of this masturbatory Tom Hanks in BIG fantasy everyone has. Bills gotta get paid, and you may be asked to (gasp!) work on something you don’t like, such as a (shock!) video-heavy bank website instructing visitors on the various retirement products available to them (as we did last year).

Half-Remembered Q & A

i admit, i’m having a hard time remembering what went on at the panel. There was a girl in the second row wearing an incredibly distracting Slave Leia costume, so i think most of what i had to say was along the lines of “hummina hummina hummina.” (Slave Leia costumes don’t usually do it for me, but this one was worth strangling your hutt over.)

So the pro reporters will definitely cover the panel better, but here are a few questions and answers that i can recall:

Q:Why develop games in Toronto?
A:Lesley’s answer was no secret – Ubi was attracted by the tax credits and government funding. Ian hinted that interactiveontario and the government are trying to secure at least one more “whale” to move into the province. For the three small developers, the answer was “intertia”. Our families are here, we live here, and for folks like me who have young kids and ties to grandparents, it’s very difficult to seek our fortunes elsewhere. Ian added that the work they’re doing to attract big companies helps heal the brain drain; if Lesley were to leave UbiSoft (for example), he wants enough studio muscle here to retain top talent in the province.

Q:Does your choice of school make you more or less employable?
A:Ryan M seemed to be more impressed by educational pedigree, saying that it was not the only thing he looks for, but that it is an indicator of a qualified applicant. The only “good” Ontario schools mentioned were Waterloo, Sheridan, and University of Toronto. There are many, many schools that aren’t on that short top-of-mind list, including yours. Reflect on that.

i took a few digs at the International Academy of Design and Technology, saying that nearly everyone i’ve known from that school – both students and faculty – bad-mouthed the place (and forgetting that the moderator had been an instructor there – oops). Despite the school’s rock-bottom reputation, i’ve hired two programmers in my stint as a studio owner, and they’ve both been IADT grads. For me, individual excellence beats a school’s bad rep.

Q: Why aren’t more studios embedding themselves in schools to cherry-pick the best talent?
A:(no one really weighed in on this, but i gave it a shot at a local community college this year with disastrous results)

Q:How do you get a job in the industry?
A:The panel agreed that portfolios were really important. Ryan M said that demonstrated capability trumps a fancy CV. Philippe liked to see evidence of problem-solving ability. i said i’d much prefer a candidate with a portfolio of a few finished games he’d created himself, rather than a student project he completed with a number of classmates.

Q:Why don’t more companies take interns?
A:The three indies – Philippe, Ryan M and myself – said that interns were a risky proposition for small studios, due to the resources they demand. Leslie said that Ubi takes interns (theirs was in the front row taking pictures), but that the intern would have to have something valuable to commit to the organization.

One thing i didn’t get a chance to say was that people should be very wary of schools that offer internships. Picture it: you’re a college program head, and your school has guaranteed this placement program. You’ve got a few great students, a handful of middling ones, and two or three absolute morons who have barely managed to squeak by. Do you really want your school’s reputation stymied by those guys? Do you really want to risk damaging your relationship with industry by sending them out on a placement? No, you don’t.

Add to that the fact that there are very few shops in town, compared with the number of schools cranking out game-trained grads (Humber, Waterloo, George Brown, Durham, U of T, UOIT, Ryerson, Trios, Sheridan, Seneca, York, and Max the Mutt off the top of my head). Some schools churn grads as often as every six months. There’s a clear internship supply-and-demand problem here.

That’s why in my personal experience (and from what i’ve heard anecdotally from others), when you enroll at a school that promises a great placement program, they’re lying. It’s often a marketing ploy to get you in the door. You’ll certainly have to complete a placement to earn class marks, but you’ll have to hunt down the placement yourself. When i was a student at Seneca College here in Ontario, the school had two or three placements in industry for their favourite sons, and the rest of us scrambled. One girl got a job at her uncle’s trucking plant. i found an internship on my own at the Durham Board of Education, working in the computer lab with students in junior kindergarten. This was the final program requirement for 3D computer art and animation students.

The type of school you really want to attend is one that has high entrance standards, and that fails students early and often. There are very few that do this, but i heard an apocryphal tale that Sheriden will refuse to graduate a 4th-year student with a weak portfolio/art thesis presentation. (Note that Sheridan was on the panel’s very short list of prestigious schools.)

Q:How do you choose the right school?
A:Most of the panelists were too political to answer frankly. i don’t toe the same line, because i feel that many of the schools in this province – particularly the community colleges – are doing the industry and their customers a great disservice, and should be held accountable. i warned against schools with very new programs (which is most of them), because they often work out the kinks at the expense of their initial student intakes. i also took issue with schools whose teachers have very tenuous connections to industry. i was speaking to a colleague of mine not long ago, who suggested that every two years, the colleges should kick their instructors back out into industry to ensure they’re keeping their skills up to date.

Ian mentioned that organizations like io in other countries have partnered with (bullied?) schools into an arrangement where the trade association has to approve its course offering in order for the school to earn a passing grade from industry. As a prospective student, you just look up which schools the association recommends, and apply there. i like that idea, but i worry it’s prone to abuse in the name of politics and playing nice.

Party On and Be Excellent to Each Other

If there was one main takeaway from the conversation, it was to focus on personal excellence. The very best stand out, while everyone else falls to the wayside, as in all things. You wanna make games? Then the barrier to entry is so low, as Jason said and as Ian reminded us, that you should already be making games. Don’t wait on UbiSoft or some small indie shop to give you your big break. There’s a golden opportunity for you right here, right now that didn’t exist when the rest of us were getting our start.

The panelists spoke about a number of groups, technologies and resources. Here’s a non-exhaustive list:

Groups

• Hand Eye Society Where Toronto’s indie developers meet.
• IGDA Toronto Chapter This group places more emphasis on professional development than the HES.
• Artsy Games Incubator Artists who want to make games, but have no programming ability, get together to … make games! Closely tied to Jim Munroe’s efforts at the HES.
• TOJam The Toronto Indie Game Jam, an annual event where the city’s pros and hopefuls get together over one weekend to make games. A fantastic event.
• FlashInTO The Toronto Flash user group.

Technologies

• Unity 3D Create 3D video games in the browser, with a (comparatively) low learning curve.
• Adobe Flash A relatively inexpensive program for creating 2D and quasi-3D browser games. Lots of books and tutorials – join our ranks of over two million developers!
• Game Maker A free game creation tool, and the favourite of many indies.
• Scratch An easy-to-grasp game creation tool from MIT
• UDK The consumer version of the Unreal Engine. i don’t recommend this one because of its eventual high cost (despite an initially free download)

Resources

• Unity by Example, a book written by me that is coming out very shortly. It’s a great resource for new game developers that teaches you how to make small, simple games, and how to approach your game dev career so that you don’t give up on it. Send an email to info [the at symbol] untoldentertainment.com and i’ll send you a note once it’s available.
• MochiMedia, Kongregate, FlashGameLicense, HeyZap Four places (of MANY) to distribute and monetize games you create with Flash.
• Wooglie A unity game portal.
• TIGSource The de facto site for indies.
• Pimp My Game Our own series on making money (or not) with Flash games. Includes tons of sites that spill the beans about the financials on their games.

Were you at the panel? Do you have anything to add? Was there anything you wanted to ask that you didn’t get a chance to ask? Leave me a comment and we’ll have a great discussion.

Thanks to dendritejungle and Jason MacIsaac for the pics!

For Spellirium we had to develop a system that could determine the most efficient path between a series of nodes on a point. After some diligent research and careful consideration it became clear that the A* search algorithm was the way to go.

Now, I was familiar with the basics behind A* but had never actually implemented it. Thankfully though I had a copy of Keith Peter’s Advanced ActionScript 3.0 Animation which has a very nice chapter all about path finding and A*.

Before we begin, some prerequisite knowledge is required. In order to follow along with this you should have a knowledge of AS3 Classes and Interfaces. It is certainly possible to implement A* without knowledge of these concepts but in order to build a flexible, reusable solution, we will be using both. Check out our Understanding Classes in AS3 tutorials if you need help getting up to speed.

What is A* path finding?

According to the ever-so-useful Wikipedia, A* path finding can be described as:

(A) computer algorithm that (finds an) efficiently traversable path between points, called nodes…. A* uses a best-first search and finds the least-cost path from a given initial node to one goal node (out of one or more possible goals).

Sounds nice, but what does this mean? It means that A* chooses a node (or tile in a tile based world) searches through all the directly connected nodes and calculates a cost to travel to all of them. It then selects the node that has the lowest cost and uses it as the starting node for the next phase of the search. A* continues to do this until it reaches the destination.

To implement the algorithm it is first important to understand a few concepts:

• Node: This is a point along a path. In a tile-based environment you can think of it as a tile. The reason why we don’t call it a tile is because it can be used for non-tile based worlds. You will provide A* with a starting node and ending node. A* will then calculate all the nodes to get from the start to the end.
• Parent Node: When a node is tested in the algorithm all of its directly connected nodes (nodes that are traversable in a single step) are assigned that node as their parent. By doing so, we can easily work backwards through all of the parent nodes to create our path after we reach the destination node.
• Cost: Cost is assigned to each node based on two factors. Nodes with a lower cost are used over nodes with a higher cost. The two parts that make up the cost are: the cost to get to that node from the starting node and the estimated cost to get from that node to the end node. The cost of a node is usually expressed via 3 variables f, g and h.
• g: This is the cost to get to this node via the starting node. We know this value exactly because we can follow the parent nodes all the way to the start and add up their costs.
• h: This is the cost to get from this node to the final node. This value is estimated. It is not exact because we don’t know the path that we will take to get to the final node. Therefore we must estimate the cost and we do so using a function called a heuristic.
• f: This is the total cost of the specific node – it is calculated by adding g + h.
• Heuristic: This is the function that estimates the cost of getting from a particular node to the end node. The beauty of A* is that it supports a variety of heuristics, therefore you can try out different ones until you get the result you are looking for. Heuristic functions can differ based on their speed, efficiency and a variety of other criteria.
• Open list: This is a list of all the nodes that have been visited (in an iteration of the search) and have been assigned a cost. The node that has the lowest cost will be used to perform the next iteration of the search.
• Closed list: This is the list of nodes whose neighbors have been visited.

The Algorithm

Now that is out of the way we can move on to the actual algorithm. Before we actually begin coding, let’s just take a look at how A* actually works.

1. Provide a starting node and an destination node
2. Add the starting node to our open list (which should have been empty)
3. Start our search loop:
   • a. Pick the node currently in the open list with the lowest cost – we will call this node the current node. When we first run the loop this will obviously be our starting node.
   • b. If the current node is the same as the destination then we are done and we can move on to step 5.
   • c. Check every directly connected node. In a tile based world this would be up to 8 tiles. For our implementation we will provide a function that determines all the connected nodes. For each node that is connected:
     • i. If the node is not traversable (you can’t move to it because it Is occupied or for some other reason) or the node is already in the open list or in the closed list we can skip and move on to the next node in the list of connected nodes. Otherwise continue to ii.
     • ii. Calculate the cost of that node.
     • iii. Set the current node as the parentNode.
     • iv. Add the node to the open list.
   • d. Add the current node to the closed list.
4. Now return to step 3 (loop again) with the newly updated open list. (The loop should keep running until it hits the destination node)
5. We have found the destination node (hurrah!) Now we create a list of nodes that will be our path list and we will add the destination node to that list.
6. Add the parent node of the destination node to the path list.
7. Add the parent of the previous node to the path list, we will continue to do this until we have added our starting node.

We should now have a list of all the nodes that make up the best path from our starting node to our destination node.

The Implementation

Now that our theory is out of the way, let’s start writing some code. First we will start with our Node class. For this I will actually create an interface for your node:

public interface INode
{
	function get f():Number;
	function get g():Number;
	function get h():Number;
	function get x():Number;
	function get y():Number;
	function get parentNode():INode;
	function get traversable():Boolean;
	function set f(value:Number):void;
	function set g(value:Number):void;
	function set h(value:Number):void;
	function set parentNode(value:INode):void;
	function set traversable(value:Boolean):void;
}

This is a pretty straight-forward interface. It includes the variables for all the properties we discussed above (f,g,h and parentNode ). The other variables are fairly self-explanatory. X and Y obviously indicate the position of the node. We will use these values in our heuristic to estimate the cost of traveling from the node to the destination. The traversable variable is a simple Boolean that indicates if the node can be used in our path finding. If it is not then the algorithm will simply skip it when it is encountered. This is useful in a world where a node might be occupied by a prop (say a rock, tree or wall) or if there is another player/character occupying that space and you don’t want to support multiple characters on a single node. Implementing this in a class should be very easy.

Now we will build a class called Pathfinder. We will create the class only using static methods. Hopefully this will make it very flexible. It will not take much to turn this into a standard class but for our purposes static methods will do very well.

public class Pathfinder
{
	public static var heuristic:Function = Pathfinder.diagonalHeuristic;

Here, we define the heuristic function we will use to estimate the cost of traveling from a node to the end. In this example we will use the diagonal heuristic. At the end of this article, we will discuss some other heuristics and how to implement them.

Let’s move on to our actual path finding function:

public static function findPath(firstNode:INode, destinationNode:INode, connectedNodeFunction:Function ):Array 	{

Let’s examine the parameters:

• firstNode: INode – this is the first node in our path
• destinationNode: INode – The is the node that we are going to be traveling to
• connectedNodeFunction:Function – This is a function that will return an array of nodes that are connected to a given node.

Since each implementation might be different we abstract it out this way. After we write our class I will use a tile- based example to illustrate how this works, but your method might be different.

Lastly, the function returns an Array. This will contain all the nodes along the path.

Variable Setup

So now that is out of the way let’s do some initial work:

var openNodes:Array = [];
var closedNodes:Array = [];
var currentNode:INode = firstNode;
var testNode:INode;
var connectedNodes:Array;
var travelCost:Number = 1.0;
var g:Number;
var h:Number;
var f:Number;
currentNode.g = 0;
currentNode.h = Pathfinder.heuristic(currentNode, destinationNode, travelCost);
currentNode.f = currentNode.g + currentNode.h;
var l:int = nodes.length;
var i:int;

The first two arrays will hold our open nodes and our closed nodes. Then we have a variable currentNode which will keep track of the node we are currently on. We set this to be our firstNode since that is where we will start.

Next we keep a variable testNode:INode, which will be the node that will be a connected node of our current node.

Next we have g,h and f values we will keep track of for each node.

We then set the initial g value of the currentNode (which is also our first node) to 0 since it does not cost anything to get there since it is already our current location.

Then, we calculate the estimated cost to reach the end using our heuristic, and finally the final cost which is calculated by adding g + h (the starting cost plus the final cost).

Lastly, we have some variables that we will use inside of loops in our A* algorithm.

The Loop

Let’s move on to the actual loop.

while (currentNode != destinationNode) {
	connectedNodes = connectedNodeFunction( currentNode );
	l = connectedNodes.length;
	for (i = 0; i < l; ++i) {
		testNode = connectedNodes[i];
		if (testNode == currentNode || testNode.travesable == false) continue;
		g = currentNode.g  + travelCost;
		h = heuristic( testNode, destinationNode, travelCost);
		f = g + h;
		if ( Pathfinder.isOpen(testNode, openNodes) || Pathfinder.isClosed( testNode, closedNodes) )	{
			if(testNode.f > f)
			{
 
				testNode.f = f;
				testNode.g = g;
				testNode.h = h;
				testNode.parentNode = currentNode;
			}
		}else {
			testNode.f = f;
			testNode.g = g;
			testNode.h = h;
			testNode.parentNode = currentNode;
			openNodes.push(testNode);
		}
	}
	closedNodes.push( currentNode );
	if (openNodes.length == 0) {
		return null;
	}
	openNodes.sortOn('f', Array.NUMERIC);
	currentNode = openNodes.shift() as INode;
}

Whoa! There’s a lot going on there, so let’s try to break it down piece by piece.

while (currentNode != destinationNode) {

Start our loop. If our current node is the same as our destination then we are done and we can build our path!

connectedNodes = connectedNodeFunction( currentNode );
l = connectedNodes.length;
for (i = 0; i < l; ++i) {

So fetch an array of all of the connected nodes of our current node. Store the length and then loop through all of them.

testNode = connectedNodes[i];
if (testNode == currentNode || testNode.travesable == false) continue;

Test each node out of the connected nodes. If the node is the same as our current node or it is not traversable, move on to the next connected node.

Note: Your connectedNodeFunction might omit non traversable nodes which would make the above line redundant and unnecessary.

g = currentNode.g  + travelCost;
h = heuristic( testNode, destinationNode, travelCost);
f = g + h;

Ok, so now we are calculating the actual cost of our node. First, g:

g

In a tile based world, we simply add the cost of the currentNode to the travelCost to determine the cost of the tile. In some tile based environments, a diagonal move sometimes cost more than other moves. In this case you would need to determine if the testNode is diagonal to the currentNode and adjust the travelCost value accordingly.

In our case here at Untold, we had a situation where the cost of each connected node was not the same because the nodes could be spread out across variable distances. So in our case we changed the g calculation to use our heuristic between the currentNode and the testNode.

g  = currentNode.g + Pathfinder.heuristic( currentNode, testNode, travelCost);

Now, h:

h

This is where we use our heuristic. Our heuristic takes in our testNode and our destination node. We also supply the cost to the heuristic which will return a number. Again, we will go over the heuristic later.

f

Finally, we are at f. This is a straightforward calculation to determine the total cost of the node.

if ( Pathfinder.isOpen(testNode, openNodes) || Pathfinder.isClosed( testNode, closedNodes) )	{

Here, we use some simple utility functions to determine if the node is in either our open list or our closed list. If it is, then we should only adjust its f,g and h value if its current cost (f) is greater than the cost we just calculated.

	if(testNode.f > f){
		testNode.f = f;
		testNode.g = g;
		testNode.h = h;
		testNode.parentNode = currentNode;
	}else {
		testNode.f = f;
		testNode.g = g;
		testNode.h = h;
		testNode.parentNode = currentNode;
		openNodes.push(testNode);
	}

If the node is not in either the open list or in the closed list, then we definitely want to assign it the values we just calculated. We also want to add it to the list of open nodes and make sure its parent is set to our currentNode.

We are now done our loop and can add our currentNode to our list of closed nodes.

closedNodes.push( currentNode );
if (openNodes.length == 0) {
	return null;
}
openNodes.sortOn('f', Array.NUMERIC);
currentNode = openNodes.shift() as INode;

If there are no more open nodes, then no path is available between the provided nodes, so we return NULL.

Otherwise, sort our open nodes based on their cost and use the one with the lowest cost as our new currentNode.

If a path is available, the currentNode will eventually be the same as our destination node, and the while loop will exit. At this point, we will be ready to build our path and end our function which we do with a single line:

return Pathfinder.buildPath(destinationNode, firstNode);

Of course this means we need a function called buildPath(). Luckily, it is quite simple and looks like this:

public static function buildPath(destinationNode:INode, startNode:INode):Array {
	var path:Array = [];
	var node:INode = destinationNode;
	path.push(node);
	while (node != startNode) {
		node = node.parentNode;
		path.unshift( node );
	}
	return path;
}

In this function, we simply keep moving through all the parent nodes of the provided nodes and put them at the front of a new array we return to the caller.

The Heuristic

We are almost ready to test out our class with an example but as promised we will first discuss our heuristic.

There is a wide range of heuristics used to calculate an optimum path. The methodology is based on a variety of criteria. Different heuristics return different results and you will need to find the one that is best for your case. Right now, we’ll examine three simple heuristics, but don’t be afraid to go out and find your own.

Now, I was familiar with the basics behind A* but had never actually implemented it. Thankfully though I had a copy of Keith Peter’s Advanced ActionScript 3.0 Animation which has a very nice chapter all about path finding and A*.

Manhattan: This heuristic is the most simple. It ignores any diagonal movement, so if your world does not allow for diagonal movement it might be a good fit. It simply adds the total number of rows and columns between the two provided nodes.

public static function manhattan(node:INode, destinationNode:INode, cost:Number = 1.0):Number {
	return Math.abs(node.x – destinationNode.x) * cost + Math.abs(node.y + destinationNode.y) * cost;
}

Euclidian: This heuristic simply draws a straight line between the two provided nodes and returns its length. You might recall the Pythagorean Theorem from math class? Well, here it is in action.

public static function euclidianHeuristic(node:INode, destinationNode:INode, cost:Number = 1.0):Number {
	var dx:Number = node.x - destinationNode.x;
	var dy:Number = node.y - destinationNode.y;
	return Math.sqrt( dx * dx + dy * dy ) * cost;
}

Diagonal: This heuristic is the most accurate of the three. It is more complex than the previous two, but runs fewer times because of its accuracy. It takes into account a diagonal cost, if it is more expensive than a regular movement.

public static function diagonalHeuristic(node:INode, destinationNode:INode, cost:Number = 1.0, diagonalCost:Number = 1.0):Number {
	var dx:Number = Math.abs(node.x - destinationNode.x);
	var dy:Number = Math.abs(node.y - destinationNode.y);
	var diag:Number = Math.min( dx, dy );
	var straight:Number = dx + dy;
	return diagonalCost * diag + cost * (straight - 2 * diag);
}

Make it Go

Now that we are done with our pathfinding system, we can put it to work. Take a look at the example below. You can click on any two tiles in the grid and then we will then draw a path between the two tiles. You can change the heuristic at any point to see the different results you might get. Also highlighted are any tiles that the pathfinder tests. Notice that the Manhattan heuristic tests far more nodes than the other two.

I implement the pathfinding simply by calling the Pathfinder.findPath() function and passing the start node, end node and the function that determines connected nodes. I then pass the returned array to a function called drawPath. For your usage you probably want to do a lot more than draw a path, you probably want to have a character traverse along that path, but this is just meant to show you how to acquire which path to follow.

drawPath( Pathfinder.findPath(_startNode, _endNode, findConnectedNodes) );

The findConnectedNodes method is very straightforward. It simply returns all nodes that are adjacent to a given node. You can check it out here:

public function findConnectedNodes( node:INode ):Array
{
	var n:Node = node as Node;
	var connectedNodes:Array = [];
	var testNode:Node;
	for (var i:int = 0; i < _nodes.length; i++)
	{
		testNode = _nodes[i];
		if (testNode.row < n.row - 1 || testNode.row > n.row + 1) continue;
		if (testNode.col < n.col - 1 || testNode.col > n.col + 1) continue;
		connectedNodes.push( testNode );
	}
	return connectedNodes;
}

Of course, this implementation will not be sufficient if you want different tiles to have different costs based on terrain (quicksand might be more expensive than grass), but if you can grasp the above you should be able to make the adjustments fairly easily.

Hopefully you will now have a solid understanding of A* path finding and you can now use it in your own applications.

Click here to download the source code for this tutorial.

So we shopped Spellirium around at the Casual Connect conference in Seattle this past week, and the consensus was that the game was good … for them to poop on.

Category Exclusivity

i’ve been billing Spellirium as a “word puzzle/adventure game hybrid”, or “Jim Henson’s Labyrinth meets Boggle.”

To the casual games portals and bidnessmen i met at the conference, the phrase “word puzzle game” was tantamount to box office poison of Carrot Top-ical proportions.

Said one acquisitions director for a well-known casual downloadable games portal, “word games don’t do well.” He cited the only three word games he’s ever known that did do well: Scrabble, TextTwist, and “to a far lesser extent”, Bookworm. Apparently Bookworm Adventures, Spellirium’s kissing cousin, didn’t even rate.

i did my research before embarking on this project. i knew that word games don’t sell. i even wrote that fact into our business plan. i was quick – perhaps too quick – to point out to him that there are no other word games quite like Spellirium. i wasn’t just shilling, though – honestly, no other game i know has tried to combine an early-90′s LucasArts-style adventure game with a word puzzle mechanic. All other word games i’ve seen have been just the mechanic, and that can get old quickly. Even Bookworm Adventures, with its worm-on-monster battles and its levelling and inventory systems, didn’t do story. Story is not a blob of text you frantically skip after the title screen, or an explanation of how Character X has to retrieve the Magic Y.

i also tried to explain that Spellirium does word puzzling like no other game. We’re really stretching this simple mechanic to its farthest logical limits – you’ll be spelling words to paint pictures, navigate mazes, move objects, balance balls … in many of our modes, spelling words doesn’t even matter. It’s crazy, it’s creative, and i think players are totally gonna dig it.

Idiocracy

The casual games publishers do not dig it. “Anything that involves thinking”, they said, “is a non-starter.” The same acquisitions guy told me that one of our other games was “too cerebral”, and followed up by saying “i don’t wanna say that our audience is dumb, but … ”

And i won’t say that either. i’m sure that the Big Fishes and the iWins and the Gamehouses have more than their fair share of dim bulbs buying games from them. But i think the real challenge for us with Spellirium is finding the right audience. The casual downloadable audience is mostly female, and mostly older, and they play games to escape. Spellirium is not an escape in that clicky-gemmy, findy-object kinda way. It’s escapism in that “i’ve been transported to a fascinating and fun other world where there are characters who are more interesting than anyone i know, and places more vivid than i’ve ever visited” kinda way.

Luna-cy

i was never more dismayed during the conference than when i attended the talk by Luna Cruz from Boomzap, who talked about economizing story in her game Awakening: The Dreamless Castle. Look: i know i’m a wordy writer, and i know the Spellirium script could use trimming as badly as those ladies from the 1970′s skin mags. So it was with great hope that i sat down to hear Luna’s talk.

Early on, Luna said “We really needed to find a way to simplify this cut-scene and get the most important information out in as few lines as possible.” i was all ears. But then: “The original cut-scene had six lines of dialogue, which we knew was way too much for our audience, so we worked really hard and gave it a lot of thought, and cut it down to only two.”

You cut it down to – guh. What? How many lines? And you say six lines was too much for your audience to bear? i have to say six lines of dialogue before i can even establish one of my characters’ names. i was going to approach Luna after the talk and ask for her advice, but i began to worry that she’d look at one of our cut-scenes and start vomiting on me uncontrollably.

But let’s compare. Here’s the entire story of Awakening:

*** spoilers ***

A princess who can’t wield magic wakes up in a magic-imbued world and must escape the castle, with the help of a magic mirror and some ornery trolls who were sworn to protect her.

And here’s just the backstory to Spellirium:

*** no spoilers ***

In the future, a young apprentice journeys with an ill-fated monster to find his missing guardians, using a dangerously magical device to battle enemies and to overcome challenges.

Luna can tell her entire story in the same space that it takes me to write a synopsis of Spellirium. We’re dealing with apples and oranges here. Which suggest to me that the audience, likewise, is like apples and oranges.

What Sort of Gamer Plays Spellirium?

The suggestion was repeated to me by a number of people at the conference, when i asked whether i should just scrap Spellirium and take up pork farming: i need to find the right audience for the game. So what sort of gamer plays Spellirium?

We tried to answer this question way back before production began by stating the obvious: people who play word games will play Spellirium. So we built a game portal called Word Game World and stocked it with word games leftover from the MochiMedia/Dictionary.com contest they ran last year. Here are the less-than-stellar results:

The trouble is that now we found ourselves with the challenge of generating an audience for TWO properties. It makes more sense to just bring people straight to Spellirium, than to drive them to the game via the scenic route. That, and many of the word games people have made have turned out less-than-scenic, if you get my drift. (Yet another nail in the coffin for the genre – too many people making it look bad)

Beer Covers a Multitude of Sins

i got a hot tip from my fellow Christian game designer pal Grant Shonkwiler (who you’ll remember from our earlier post on the impossibility of Christian gaming). These days, Grant designs games for tabletop bar cabinets (like any good Christian would … i forgot to ask if he got paid in hooch). He designed a word game for his company that was a smash success with the audience, and offered that bar patrons love word games. It reminded me of Norm MacDonald’s old SNL Weekend Update punchline: Germans love David Hasselhoff. You hit the right niche with the right product, and you’re sailing.

So what combination of Knight Riding and Baywatching will Spellirium have to pull off to find its Germany-sized pool of rabid fans? Here are some facts about what i *think* a Spellirium player is like. i think the game will appeal to both sexes, but i’ll use masculine pronouns for simplicity:

1. He can kick ass at Scrabble. Don’t mess.

   

2. He does crossword puzzles on his way to work. In pen. He may even feel that British cryptics are far superior to American-style.
3. He watches movies. Among his favourite films are Labyrinth, The Dark Crystal, The Lord of the Rings Trilogy, The Road Warrior, Twelve Monkeys, The Adventures of Baron Munchausen, The Princess Bride, The Last Unicorn, Dragonslayer, and The Goonies.

   

   

4. He reads. He likes sci fi and fantasy. He may enjoy Douglas Adams, Terry Pratchett, Lloyd Alexander, J.R.R. Tolkien, C.S. Lewis, Terry Brooks, and Neil Gaiman.
5. He plays games. He quite liked Puzzle Quest, Bookworm and Bookworm Adventures, digital versions of Scrabble and Boggle, Wurdle, TextTwist, LucasArts and Sierra On-Line graphic adventure games – possibly even Infocom text adventures or MUDs – as well as Out of This World, Beneath a Steel Sky and the Fallout series.

   

6. When he’s playing a game that has story elements, including dialogue or cutscenes or even blobs of text, he does not – does NOT – push the A button to skip. He becomes particularly upset if he accidentally skips story, even if he’s not particularly enjoying that story. If he’s gaming with a dumb jock fratboy friend who blithely skips past all the story sequences saying “let’s just play already, d00d”, he punches that friend in the throat. (Then he gets his ass kicked, because he’s a lover, not a fighter.)

i know, friends. i know. i’ve just described myself. (Or perhaps Jerry Holkins / Tycho Brahe from Penny Arcade – i’m convinced we’re the same person.) i am a little concerned that i have not paid enough attention to the needs and wants of the market, over the needs and wants of the me. i have not designed Spellirium as an ineffectual, casual click-fest with simple puzzles and two-line cutscenes. i thought, perhaps foolishly – perhaps arrogantly – that if i designed a game that i desperately wanted to play, there would be others like me for whom this game would be a breath of fresh air.

Was i wrong? Like chocolate and peanut butter, is our word puzzle/adventure game hybrid born of two great tastes that taste great together? Or is it born of two disappointments – an overly cerebral genre that repeatedly fails to perform in the marketplace, and an outdated genre that saw its best days twenty years ago? Should we finish Spellirium and bury it as quickly as possible, or should we keep working to realize our vision – the vision of a smart, funny game for well-read, literate players that melds two genres like no other game before it?

i defer to your judgment and expertise. If Untold Entertainment needs to become a Hidden Object Game developer, please tell me now so that i can go get a lobotomy and get myself fitted at the Vagina Depot.

Word.

Sign up for the Spellirium Newsletter to fight the relentless dumbing-down of your favourite hobby. The newsletter contains new screenshots and juicy game gossip that you won’t find anywhere else.

Because i’d really like to do more speaking, i jumped at the opportunity to share my accumulated nuggets of wisdom with the attendees. i actually agreed to come out before even looking for Miramichi on the map: it was quite far from the bustling metropolis of Moncton. i clicked “What’s nearby?” and Google Maps said “you’re kidding, right?”

The conference attendees were mostly students. The title of my talk was “I Know Kung Fu: 10 Years of Gaming in 45 Minutes”. The presentation had three sections: Tips for Students, Tips on Game Design, and Tips for Bidness. The bidness section was the weakest – i’m still figuring that stuff out myself.

The Tips for Students started out irrelevantly … since NBCC’s game dev program has been hammered out over 13 years, it doesn’t have many of the problems that the nascent Ontario programs seem to have. i found myself wondering why the Ontario colleges didn’t just visit Miramichi and do a straight lift of their entire program. Isn’t that preferable to letting batch after batch of students flounder through your half-baked program while you figure it out?

Here are a few of the game design tips i shared:

1. Mouse control trumps keyboard control for casual web games (source: Chris Hughes from Flash Game License)
2. Click and carry beats click and drag, especially for young players (click and carry is where you click once, and the thing sticks to your mouse until you click again to release it)
3. Control = fun.
4. Game jams perfectly simulate the Internatz. Big room full of games to try … if you don’t hook people in the first five seconds, they flit off to the next station. Just like on the weeb.
5. Inconsistent escalation increases player. Instead of making your game get progressively more impossible, every few levels you should ease up on the difficulty. This encourages the player to keep trying; if he blows a gasket beating level 5, he may think “to Hell with level 6″. But if you throw in easy levels to give the playe a break every once in a while, he’s more likely to keep at it. Final Fight used this concept very early on with its car-smashing bonus level.

i’m Also On a Boat

The Jalloo folks organized a boat ride across the mighty Miramichi to a banquet hall where they fed their guests from enormous buckets of crab.

River Jam

The conference ended with a 2-day game jam. You know me – i can’t resist a game jam. So with one hour to go before i had to leave for the airport, i coded up a very quick game structure and pulled out one of my game ideas from the backlog. The guys on the team took it and ran with it, and worked the next two days producing an absolutely demented little gem called Toes:

This was my fifth game jam, and it was the only one where i worked with other people – three talented graduating students, and their instructor, who actually invited me out to the conference to begin with. i met Martin Copp at the flawed Vortex Game Design Competition, which just goes to show that return on investment from certain events can really surprise you, even many months after the fact. So get out there and don’t stop networking! (tip #5 in the “Tips for Students” section of my presentation ;)

The plan is to take Toes further and polish it up, and then put it up for licensing closer to Hallowe’en. Answer the quick survey and let us know what you think! We’re looking for suggestions to take it from a quick, playable concept to something a little more … meaty.

• Basic Flash Project Setup
• Drawing with Strokes and Fills
• Groups and Layers

Begin

Flash wasn’t always this difficult to get your head around. Before it was hijacked by codemonkeys, the software was a very capable animation program. The focal point of Flash animation is the Timeline, and all the wonderful things it can do. This lesson is a primer on how to move around the timeline and to figure out how it works. In a future lesson, we’ll delve into different animation styles you can pull off using the Timeline.

Start a project as described in Basic Flash Project Setup, or continue from an existing project. Make sure that you can see the Timeline in your screen setup. In the menus, click Window > Timeline.

1. Time moves from left to right.

This is an obvious point if you’ve used any other timeline-based software like Premiere, Audacity, or Director. Those numbers stretching off into the distance are frame numbers. A frame is a single picture in your movie. Play the pictures one after another quickly enough, and our persistence of vision creates the illusion of motion.

2. FPS Determines how fast your frames play.

Your default .fla file makes frames whizz by at 30 frames per second.

To change the frame rate of your Flash movie, type a different number into the FPS: field in the Properties panel (Window > Properties).

note: The Properties panel is context-sensitive, which means that it shows different options depending on what you’ve selected. To see the FPS setting, click on any blank area of the stage.

30 FPS is standard for most video. Classical animators used to work at 24 frames per second for feature films, and 12 frames per second for television and lower-quality animation. 12 fps is sometimes called working “on twos”, because the camera man would photograph each drawing twice to bring it up to 24 fps. The fewer the drawings you use in your animation, the choppier your animation will look.

3. Understanding keyframes

The word “keyframe” is inherited from animation. A common technique for animating a scene – especially involving a character – is to draw the key frames in the action. If you’re animating a bouncing ball, you might have three key frames: the ball at the top of its drop, the ball at the bottom as it squishes against the ground, and the ball at the top again. Keys are the most crucial drawings in the action. A person should be able to completely understand what’s going on just by looking at the keys.

Once you’ve drawn the keys – the most important drawings – you draw the in-betweens. Without these drawings, we can’t create the illusion of motion. They are the pictures that “move” us from one key to the next.

Computer animation packages like Flash enable us to set up key frames, and to draw our own in-betweens. Flash can also draw in-betweens for us using a process called interpolation. We’ll look at interpolation, or tweening, in another tutorial.

4. Understanding frame symbols

There are important symbols that appear on frames. Understanding them is the key to understanding the Timeline, like learning to read music.

1. Blank keyframe

   

   An empty circle indicates a blank keyframe. There is nothing on the stage on this layer on this frame.

2. Keyframe

   

   A black circle with a grey background indicates a filled keyframe. There is something on the stage on this layer on this frame.

3. Empty frame

   A blank white frame means that our animation will play to at least this point. The animation continues to play until it reaches the latest keyframe, blank keyframe, blank frame or filled frame in the Timeline.

   

   Even though the stage is empty, this animation will play past frame 30 because the blank frames stretch at least that far.

4. Filled frame

   A frame with a grey background means that the contents of the preceding keyframe appear on stage to at least this point.

   

   The contents of frame 1 stay on stage well past frame 30.

5. Terminal frame

   This white rectangle marks the point after which the contents of the preceding keyframe stop appearing on-stage.

   

   The contents of frame 1 persist on stage from frame 1 to frame 20. After frame 20, they stop showing up.

5. The function keys insert frames.

The F5, F6 and F7 keyboard keys are crucial when using the Timeline. Used on their own, they insert various frame types. Hold down the SHIFT key and press one of these function keys to delete that frame type.

F5 – Add a frame. They will be either blank or filled depending on whether they’re preceded by a blank or filled keyframe.
SHIFT+F5 – Delete a frame.

F6 – Add a keyframe. note: If you add a keyframe to a blank range of frames, you’ll drop in a blank keyframe.
SHIFT+F6 – Remove a keyframe.

F7 – Add a blank keyframe.
SHIFT+F7 – Remove a blank keyframe.

Sample usage: If you have something on stage, and you want it to disappear at frame 25, add a blank keyframe to frame 25.

You can click and drag to range-select a chunk of frames to delete them, or to convert them to empty or filled keyframes.

note: If you insert frames, they don’t overwrite your existing frames. Rather, the end of your Timeline on that layer gets pushed out farther.

6. The Playhead controls frames on all layers.

If you want to add or remove different frame types through all layers of the timeline simultaneously, first click on the pink rectangular Playhead. Then when you add or remove frames, they’ll be added to or removed from all layers at once.

7. Scrub or play your animation.

Click and hold the mouse button on a frame and move the mouse around to preview your animation. This is called “timeline scrubbing”.

To scrub the Timeline without fear of moving your keyframes around, click and drag the pink Playhead back and forth.

To play your animation within the Flash IDE, press the ENTER key on your keyboard.

To compile your movie to a swf, hold CTRL and press ENTER (Command+Enter on the Mac). Notice that Flash automatically loops when the Playhead reaches the end of the timeline.

note: In order to drag your empty and filled keyframes around, first click on the keyframe to select it, then click and drag to move it around.

Finish

This basic Timeline lays the foundation for the actual animation exercises we’ll be doing. We’ll learn how to do “straight-ahead” or “frame-by-frame” animation, as well as how to get Flash to draw the in-betweens for us.

TOJam, you may know, is the Toronto Indie Game Jam, where sweaty nerds spend a weekend building games. The fifth anniversary of the event was my fourth time attending. If i could go back in time, i’d definitely attend the first one. i’d also give Hitler a purple nurple.

A month or so after TOJam, the organizers put together a public exhibition of the games called the TOJam Arcade. The game creators can use that time to fix whatever didn’t work by the end of the original weekend (which is usually everything.)

Beer.

This year’s arcade was held last Saturday night at the Imperial Pub near Yonge and Dundas Square. We succeeded in putting out the older barflies, who were pissed at not being able to watch their horse races, and the inebriated college crowd, who came precariously close to sloshing house draft on the data projectors.

Prizes.

At the end of the evening, they held a raffle with prizes comped by Big Blue Bubble, and some guy named Andy. They called my ticket number, and i was stunned to find i’d won the big prize of the evening – an Xbox 360 Elite bundle with Halo ODST, Forza 3, and a copy of Assassin’s Creed and Prince of Persia. It’s been over a decade since i’ve won something in a raffle, so it was a nice surprise. Thanks, Big Blue Bubble!

Soon after, they announced the People’s Choice Awards. Our game Heads was voted “Best Use of Theme”. The TOJam 5 theme was “missing”, and Heads is about a guy who wakes up to find that he’s literally lost his head. It was a really nice and unexpected win, but i think some other teams came up with far more subtle and clever uses of the theme. (Don’t get me wrong, though – i’m not complaining!)

After struggling to balance the Xbox home on my bike through rain-slicked streets, i went to lock up in the bike room and found a ten dollar bill on the floor. True. That actually happened. It all made me feel bad for kicking that kitten in the face earlier in the day.

Other Non-Me Winners

The top three Peoples Choice games included Nom Nom Nom Nom (a Hungry Hungry Hippos clone with three cats and a goat), MonoClimb, the black-and-white co-operative platformer by prize-donating Andy and friends (i mentioned it in my last TOJam article), and Last Hadron Collider, a two-player simultaneous obstacle race with randomly-generated levels and great-looking character sprites. You’ll be able to play all these games and more at the TOJam site once everything is uploaded.

Once the games are up, i’ll write another post listing my own People’s Choice picks with some undiscovered gems. In the meantime, i’ll try not to let our productivity on Spellirium take too much of a hit, now that we can finally put those extra Rock Band instruments to use at the office.

• Basic Flash Project Setup

Begin

Let’s learn to draw with Flash!

Flash is not the most feature-rich vector drawing package available. During its development lifecycle, the creators of Flash listened more closely to programmers than artists. As a result, many new features for artists fell by the wayside, while Flash developed a (near) fully-featured programming language in its own right, ActionScript 3.0. Meanwhile, other software developers came along and ate Flash’s lunch – most notably Toon Boom Animation with its Harmony product, which is used in feature film production by Disney and other animation studios.

Still, Flash contains a great set of vector drawing tools, with some decent animation capabilities. In this tutorial, we’ll cover the unique way in which Flash handles vector drawing.

Vector vs. Raster

Before we begin, we should just cover off what the word “vector” means as it pertains to drawing software. Let’s take two images: a vector image on the left, and a raster image on the right:

Now we’ll zoom into both images:

Notice that the vector image remains smooth, while we can see the individual pixels (short for “picture elements”) that make up the raster image.

This happens is because the computer draws each image differently. Raster drawing is like painting on a canvas, while vector drawing is like describing shapes with math. The computer retains the mathematical calculations it needs to redraw a vector image at any size. But when you blow up a raster image, there’s only so much picture information the computer knows about the image. It can try filling in the blanks, but the results are usually mediocre.

The other big difference between the two comes when you want to move elements around. In a vector image, elements are separate, like fridge magnets. You can move them around, and put them in front of or behind each other, and all is fine and dandy. But when you move a piece of a raster image, it’s like you’re taking a pair of scissors to a canvas and cutting a chunk out of it – you wind up with a gaping hole. Modern raster programs often have a Layers feature that keeps elements separated, but this is just essentially like working with multiple flat images composited on top of each other. The problem remains.

Some examples of raster image software include Photoshop, GIMP, and MS Paint.

Some examples of vector image software include Fireworks, Illustrator, Flash, and any 3D software (3D Studio Max, Maya, Blender, etc.)

Tricksy falseness occurs when you realize that many vector packages can import raster images. Many times, i’ve requested a vector logo from a client so that i can blow it up to a certain size without it looking pixellated. When i ask for the corporate logo “in Illustator”, i usually get an Illustrator file with an imorted raster image. Thees, of course, ees boolchit. It makes more sense to ask for a vector image instead of an Illustrator file, but not everyone knows what exactly a vector image is. Now you know! Spread the word, and share this tutorial.

1. Strokes vs. Fills

In Flash, the things you draw are called shapes. The outline of a shape (the “stroke”) is separate from the colour inside a shape (the “fill”). Witness:

1. Open Flash.
2. Click the Rectangle tool in the Tools palette, or press the R key on your keyboard. (If you can’t see the Tools palette, click Window > Tools in the menus, or hit CTRL/Command + F2 on your keyboard)

   

3. Click and drag the mouse on the Stage (the rectangular white area in the middle of the screen) to make a rectangle shape. By default, you should see a white rectangle with a black stroke. You can change the stroke and fill colours before drawing by clicking the stroke and fill colour swatches in the Tools palette, and choosing different colours.

   

4. Click the black Selection tool at the top of the Tools palette.

   

5. Click once inside the rectangle to select the white filled area. It goes “fuzzy”, indicating that it’s selected.
6. Click on any blank area on the Stage to deselect the fill.
7. Double-click on the black stroke around the edge of the rectangle. The stroke goes fuzzy too, indicating that it’s selected. (you may notice that you can also single-click the stroke to select one of the four edges individually)
8. Click and drag to move the stroke away from the fill, independently.

The stroke and fill are two separate things! If at any time you want to select the fill and the stroke together, double-click the fill, and the stroke will be selected along with it.

2. Strokes Cut Fills

Strokes can behave like cut lines in sewing, or hot wires in clay modeling. They slice fills. Let’s see that in action.

1. Press CTRL/Command+A to select everything on the stage, and then press delete to get rid of your last shapes.
2. Click the fill colour swatch in the Tools palette. Click to select a non-white colour. i like yellow, because it reminds me of delicious snow.
3. Click the Rectangle tool, then click and drag to draw a rectangle on the Stage.
4. Click the Selection tool (the black arrow)
5. As before, double-click to select the stroke around the rectangle.
6. Click and drag the stroke so that it intersects the fill.
7. Click the part of the fill on the inside of the stroke. Now click the part of the fill on the outside of the stroke. Click and drag to move either of these fills to another part of the Stage.

The stroke cut the fill in half, and made it into separate shapes. For further exploration of this, try drawing a large rectangle, and draw wiggly strokes through it with the Pencil tool. Note that your wiggly lines split the fills up into separate pieces too, because the Pencil tool creates fill-cutting strokes.

3. Working Without Strokes or Fills

How do you get a rectangle without a stroke, or one without a fill? In the colour palette fly-out, there is a small swatch with a red slash through it. Use this to cancel the fill or stroke colour for your next shape.

4. Same Colours Meld

Two shapes of the same colour automatically fuse together. Try it:

1. Clear the stage of old artwork. (CTRL/Command + A, Delete)
2. Draw a red rectangle with no stroke (see above)
3. Draw another red rectangle with no stroke overlapping the first.
4. Click the Selection tool.
5. Click on one of the two rectangles. Both rectangles are selected.

There actually aren’t two rectangles any more – there’s only one. Because they are the same colour, they melded together into the same shape.

You can meld two shapes of the same colour even without drawing them on top of each other. Draw one red rectangle over here, then draw another one over there. Using the Selection tool, drag one rectangle on top of the other. As long as the rectangle is selected, the two rectangles haven’t had colour sex yet – you can move the selected rectangle away without any fusion. If instead you click the Stage to deselect the overlapping rectangle, then BOWM-CHIKKA! What Flash has joined together, let no man put asunder.

5. Different Colours Cut

As with strokes, two shapes of different colours will cut each other when they overlap. Regard:

1. Clear your old artwork (CTRL/Command + A, Delete)
2. Draw a red rectangle on the Stage.
3. Choose a new colour for the fill swatch. i chose green, because it’s the colour i turned after i ate that delicious snow.
4. Draw your differently-coloured rectangle on the Stage, overlapping the first rectangle.
5. Click and drag either of the two rectangles away from each other.

Two differently-coloured rectangles automatically slice each other, in what i can only assume is Flash’s way of warning us about racially-motivated violence. Just as before, the two shapes don’t have to be drawn on top of each other for them to slice each other up. Try drawing two shapes at opposite ends of the stage. Then drag one on top of the other. Click on the Stage to deselect it – WHIPPOW!! That’s where the shanking happens. Now drag one shape away from the other to view the carnage.

6. Differently-Coloured Strokes are Distinct. Similarly-Coloured Strokes Become Fused.

Finally, we’ll see how strokes behave with each other depending on their colours.

1. Clear your old artwork (CTRL/Command + A, Delete)
2. Choose the no-fill option for the stroke colour swatch.
3. Choose a colour for your stroke. i choose black, to reflect the rage and despair in my soul.
4. Draw a rectangle on the Stage.
5. Draw another black-stroked rectangle, overlapping the first one.
6. Choose a different colour for your next stroke, like brown, which is the colour of chocolate when you poop it out.
7. Draw another overlapping rectangle on the first one.
8. Using the Selection tool, double-click the black stroke. The two black rect