Over the US holiday weekend, I participated in the Charity Game Jam organized by Christer Kaitila, author of Adobe Flash 11 Stage3D (Molehill) Game Programming Beginner’s Guide and The Game Jam Survival Guide (for which I was able to serve as technical reviewer). The idea was to make a game inspired by the technical limitations of the NES (Nintendo Entertainment System). This means 256×224 pixels and 64 colors… though the pixel resolution was doubled and any constraints were made optional. The charity bit comes in where anyone participating would donate to either Make-A-Wish – which performs tangible acts of kindness for children who are suffering with terminal illness, or Kiva – which I’m still unsure exactly how they operate… I went with Make-A-Wish!
As expressed in the recent Adobe education article, Better Learning Through Game Design [alternate version], gaming and the skills involved in the creation of games are important to education. With the current focus on gaming for engineering behind the Flash runtimes, gaming is very important for Adobe. Take these two factors together and gaming is very, very important for the Adobe education team. As an Adobe Education Leader and lover of all things Flash: it is my absolute duty to dive into this stuff head first
Play the game: BABBY MUST NEEDS SLEEP! PARENTAL NIGHTMARE
Download the source files: SOURCE
The game I created was built using the Citrus game engine targeting Flash runtimes (Flash player/AIR). If you haven’t heard of Citrus before, it is a GPU-accelerated gaming engine (strongly directed at platforming) which sits atop your choice of view renderers, physics engines, and so forth. I chose to use Citrus + Starling + Box2D for my game. The engine is being actively contributed to, is free to use, and holds great promise for integration with tooling in the future.
I started off using Flash Professional and the Starling Sprite Sheet exporter for texture atlases – but considering the amount of time it would take to properly animate my characters, decided to use single-frame sprites instead. For this I fell back to Photoshop. Most of my assets included screens, overlays, characters and objects, plus one huge background image. Something super-cool about using a big background image like this is that it made it pretty simple to figure out platform and object placement through the Info panel.
In the figure above, you can see that I am using the Move Tool and hovering over various parts of my image (game stage) to determine coordinates using the Info panel. Cool, right? I chose to not even bother with some of the tooling integration with Flash Professional that exists and just go straight code using Flash Builder 4.7 beta – so this was a tremendous help!
What I got out of it
I got to pick up and learn another great gaming framework! For the previous game jam, I went with Flixel and the traditional display list. I’ve been wanting to try my hand at something that utilized Stage3D and after a few conversations with Tom Krcha about Citrus, thought that it would be the logical choice. Funnily enough, I wasn’t going to even participate in this game jam but since I planned to look at Citrus over the weekend, and it sounded like a really good cause, I decided to throw my hat in. After all, despite admonishments to the contrary – I’ve found game jams to be great opportunities for picking up new stuff and just diving right in. A warning though: that is the sort of learner I am… so it works for me. I can see how this approach could be disastrous for some people; so “know thyself”, kids.
What went well
Citrus was great to use. It has all sorts of base classes all ready to go for players, enemys, pickups, physics objects, sensors, platforms, et cetera. They are all easily skinnable and can be extended to override functionality and behavior. Similar to Flixel and other engines, Citrus has the concept of states which I employed to wire up the various game screens. The API documentation is great and there is a very active user support forum as well. The ability to use a variety of 2D and 3D render views along with swappable physics engines is such a great model. This could very well be my go-to engine for any future game work!
The game concept came together pretty easily this time as well. Friday evening I was able to get the basics of an unskinned platformer together. Overnight, I got the idea for what it became – basically a fetch quest for an infant who just won’t go to sleep. Parents of young children – we all share this nightmare together… now we can relive these early memories over and over and over and over… lovely, right? 😉
In case you are wondering, the title and intentional misspellings originate with this meme.
What went wrong
Almost nothing! The entire thing went really quite smooth until the very end. As I mentioned before, I was using Flash Builder 4.7 beta for all of my development. Everything worked awesome when testing inside of the dev environment… but when I completed the game and began to prepare everything for publication… I encountered my one major issue.
Performing a release build rendered a .swf which CRASHED HARD. Absolutely unplayable… no amount of debugging or profiling seemed to create any suspicions either. Google searches… commenting out entire portions of code… no solution whatsoever. Until I thought to myself: “Joseph, you are using a beta version of the new ActionScript Comipiler 2.0 to perform a release build.” Establishing the project within Flash Builder 4.6 and performing a release build created a perfectly functioning .swf file. Thank goodness!
Only other issue is that when people approach the game for the first time, they don’t know how to play. I should have placed some quick instructions in-game. For reference; SPACEBAR = jump, L/R ARROW to move.
Happy I was able to participate. Christer is badass. Goal was set at $250 and we hit over $1500!!! Love the game I made. Love Citrus. Please play the game, learn from the source code, and share it with your friends
Adobe tooling and runtimes make this all possible!
BTW: If you want to learn more about using Starling, Feathers, and Flash Professional for multi-screen layout… I have a new article up on the Adobe Developer Connection I encourage you to check out:
Designing for a multi-device, multi-resolution world