In over 9 years of web game development I’d never used a third party framework until recently, preferring to code everything up from scratch. Both Flixel and FlashPunk had caught my eye though and for the past year or so I’d been meaning to try one or the other.
Well, a few months ago the opportunity presented itself. Hasbro hired us to develop a multi-world game to promote their new Kre-o range of toys and I decided it was the perfect project to test these frameworks with.
Actionscript Game Engine
A framework, or game engine, is essentially a group of libraries. The libraries typically cover functionality shared by many games, such as collision detection, tile mapping and blitting (see Craig Beswetherick’s article in FFD July 2011 for a great intro to Blitting)
With this core functionality readily available, use of a game engine allows for rapid development. In fact, I’ve seen a number of quite playable little games on some of the development forums recently which people have put together in a single day!
Flixel or FlashPunk
Both Flixel and FlashPunk are open source, AS3 game engines, and in general both do the same job. Flixel is the more mature project, and has been used on quite a number of popular games including the popular Canabalt. It was for that reason I decided to test Flixel first, and while it was certainly robust there were a few small issues I had with it, especially with the apparent lack of control over the way collisions worked.
FlashPunk on the other hand is a newer project, but which is rapidly expanding. There is a very active user community on the forums at FlashPunk.net and lots of great tutorials for learning the basics of the framework.
While the 2 engines are very similar, I instantly felt more at home with the FlashPunk code, which I felt to be less restrictive. The collision detection issues I had with Flixel were easy to solve with FlashPunk and in less than a week I had made the decision to build the Hasbro game (named Kreon Chaos) using FlashPunk as the basis.
Building Kreon Chaos
The reason for wanting to use a third party game engine for Kreon Chaos, was because we wanted to focus on the gameplay and level design without spending too much of our allocated timeframe on low level code. The brief from Hasbro was to create a game which focused on the Kreons – mini figs (like Lego men) of the Transformers characters. They wanted the player to be able to control any of the Kreons, and for them to each have their own abilities, so we decided on a 2D side scrolling platform/puzzle game.
Taking inspiration from a 1990’s SNES game called “The Lost Vikings” we decided that each level would be designed such that the only way to complete it was for the Kreons to work as a team. For example, we gave Bumblebee the ability to hack computer terminals to turn elevators on, or turn of laser hazards. We gave Sentinel Prime the ability to hold his shield up above his head so that other Kreons could jump on him to access hard to reach areas.
Using the FlashPunk engine as the basis for the game freed us up to spend the time necessary to work on these design aspects, rather than writing code to handle the tilesheets or collisions. It was a real joy to work with and I only wish I’d made the step a long time ago. One thing’s for sure – I’ll certainly be using FlashPunk again for future projects.
The Flashpunk Framework
FlashPunk games are built around 2 basic constructs – Worlds and Entities. A FlashPunk World is an organisational class which will typically be a level or a menu. A game can have menu Worlds, but only one of them is active at any one time. So for example, when you select “Level 1″ on a level select screen the game will change from the “Level Select” World to the “Level 1″ World.
Worlds can contain any number of entities, and have a controllable camera which makes scrolling and panning super easy. Entities are the objects which populate a world, like characters, enemies, cars or platforms. Entities can interact with one another, move around the World and be controlled by the player.
Worlds and Entities can be extended and are super easy to imp0lement and adapt. There’s little point in reinventing the wheel by putting example code up here when there are some excellent beginner’s tutorials at the FlashPunk site. It will only take you an hour or so to go through the beginners tutorials there, and you’ll see just how quick and easy it is to get a simple game off the ground.
FlashPunk iOS game development
What I found REALLY exciting with FlashPunk was the performance achieved. Even with hunderds of entities animated on screen I was able to achieve fantastic framerates. In fact the performance was so good I decided that maybe it was worth going back and testing the performance on the iPhone.
I spent some time testing the idea of developing for iPhone/iPad with Actionscript a while ago but the results were disappointing (FPS was less than 10 even with just a single sprite on screen!) but since I was seeing such good performance with FlashPunk on the desktop I thought it was worth a shot – and the results were superb!
I was able to get a simple arcade game running on an iPhone at around 25 FPS – good enough to be playable, and releasable.
I’ve been turning that initial demo into a full game and will be submitting it to the App Store within the next 7 – 10 days, and once it’s on there I’ll write a detailed post about how I did it. Basically though, with the combination of the FlashPunk and targeting AIR 2.6 it is possible to develop AS3 based games for iOS devices – something I had previously thought was not possible! Check back for a tutorial on the build process soon.