Way of the Chook
|Released||4th September 2008|
Code by Richard Davey
Graphics by Robin Davey and Gavin Strange
Creative Direction by Dan EferganPLAY
Aardman produce a number of TV shows one of which is Chop Socky Chooks. It’s all done in CGI and is about a group of kung-fu fighting chickens living in a giant mall, which is ruled by the crazed Dr Wasabi and his side-kick Bubba. Lots of kung-fu film parody ensues, and the show is a real blast. Check out the official Cartoon Network web site for video clips and details (oh and for the record, I built the site too!).
Already broadcasting in the US we wanted a new game for the UK release at the beginning of September 2008. Given the subject matter of the show it only seemed fair that the game be a beat-em-up So we dove back into the arcade history books and decided to base our version on the classic Kung-fu Master. This game would star one of the 3 main characters from the show: Chuckie Chan.
There’s a nice video of this game on Vimeo.
- 4 visually unique levels including the mall, the sewers, dusk and the final roof-top sunset fight.
- 4 boss-fights, one at the end of each level
- 5 attack moves per direction (sweeping kick, mid-kick, jump-kick, flying kick and punch)
- Change direction mid-attack
- 1 special move (Chuckie’s power-ball)
- Fight combo score multiplier
- Noodle-drop power-up
- 2 enemy types, “grabber” and “shooter” – the grabbers, in our case Ninja Chimps from the show, charge at you and grab you, draining your power. The “shooters” are the Sentinels from the show, who swoop in and take a shot at you.
Here are some geeky features, written in true Psygnosis advert style!
- 5 levels of parallax scrolling!
- 50 different sound effects!
- 2 music tracks!
- 210 frames of CGI rendered character animation!
- Up to 40 baddies on-screen at any time!
- Video intro!
- 16MB of in-game assets compressed to 2.5MB (see Developer notes below)!
(heh, I’ve always wanted to do that)
Development of this game was quite difficult on a technical level. With such a visually rich CGI show you obviously want to re-create as much of that as possible in the game. But as any Flash developer will tell you, highly detailed massive frames of CGI animation and Flash do not mix so well. Not only do you have graphical bandwidth to worry about (Flash can only shift so much graphical data around at once), but you’ve only really got 100MB of memory as well. Plus the final file size has to be as small as possible (in our case < 3MB).
With a fighting game you also need extremely fine control over the way in which the animations are played out. I need to know which frame an animation was on when a hit occurred, I need to be able to speed-up or slow down the animations based on other in-game events or levels, and I needed it to happen independent of the frame rate of the movie.
In order to make the game as compact as possible all characters were animated fighting and moving in only one direction. Then at the start of the game I literally pre-calc all the reverse frames as store them in an internal asset library.
On the 4th level of the game you are fighting on the rooftops against a large sunset, so all the characters become silhouetted. We managed to pull this off with a baked filter, and the result is definitely worth it!
All of the above reasons are why I elected not to use time-line based MovieClips for the main characters, but rather Sprites (and Bitmaps) containing constantly updated bitmapData. We were tweaking things down to a millisecond level during development, so not having to edit a movieclip each time was a life-saver.
Collision detection is always a hot topic in any game, but even more so in a fighting one. You have to feel like you were hit fairly, and that your hits don’t miss. To achieve this I wrapped the main character in 4 different collision zones, each of them tightly fitted around his body and based on his stance.
This meant that should a sentinel shoot you, the lazer can fly through the hair of the main character without killing him, but if it hits him in the head he falls down. Each character also had a zone specifically for the “reach” of their moves, you have to be a little forgiving in a beat-em-up like this, which means that the reach of your moves extends a little further beyond the actual pixels of the frame. Not too much that it feels strange, but enough to make it more fun to play. I have to admit that I wasted a lot of time at the very start trying to handle collision in a totally different way to this. I had hundreds of lines of code and math checks going on, and it just didn’t feel right because I was performing collision using the actual sprites themselves. This method uses invisible boxes! It’s about 1/10th the amount of code, is much much faster and extremely precise. Wish I had done it at the start
The parallax scrolling background was probably one of the easiest parts to code. The assets are pulled in from the internal library and then are placed onto a continuously scrolling layer that is just a bit wider than the stage width. As one side scrolls off a new building or piece of scenery is placed down. As the main player can “walk backwards” I had to retain the scroll-back for around 200px, but after this it is destroyed. This kept the memory used for each level really low, and more importantly Flash wasn’t having to shift huge quantities of graphics around, so it keeps it playing fast!
The levels are actually randomised, so will never look the same each time. There are checks in place to ensure that the scenery has an even distribution so you’ll never see the same building twice next to each other.
The Boss Fight was really fun to code, and really quick. Had we had more time I would have loved to extend this, but alas it was not to be. Bubba still puts up a good fight though!
The Intro sequence
When Gavin was creating the feel of the interface and title page he went for a “brushed parchment” style. Looking at it one day I realised it would look so much better if the background picture was actually “painted” onto the parchment. So I wrote a quick application that displayed the picture and let me paint over it, recording each mouse movement. I carefully traced the picture in a way I felt would look interesting and saved the data.
For the final game the data is loaded in and played onto a mask. As I paste the brush down onto the mask the image is revealed through Job done! and it looks lovely to boot. We had to speed the animation up x4 for the final version of the game as we were worried the kids just wouldn’t wait around to see it complete, which is a shame as you loose a bit of the detail – but the effect still rocks
The game is by no means perfect. It can really tax slower PCs, even though I kept the frame rate as consistent as possible. Also I would have loved to see more variety of baddies in there. But you have to work within the budget you’ve got, and I was already running over on this one (sorry Lorna!). I’d have loved to have made the boss fight more varied as well. There are a few bugs as well, I’ll be the first to admit that. But hopefully none too crucial to gameplay.
In level 4 the sun pulsates in the background – not that you get much chance to admire it! It also tracks along the skyline as you progress through the level, finally setting in the bottom right corner.
The original proof-of-concept prototype used graphics taken directly from the NES version of Kung-fu Master. It also had more fight moves! (8 vs. 5)
CGI gave us a massive absolutely beautifully rendered explosion effect, which we had just no way of using in the game
Early versions of the title sequence had a huge Chop Socky Chooks logo on fire, with flames bursting up the screen. But Gav didn’t like the blackness of it
All Attack Wave data is read in from an XML file. You can control everything about the enemies from it – speed, placement, strength, fire rate, even down to the bezier curve points of the sentinels.
The Chimps actually support real-time scaling, but this was never used in the final game. You can literally make a chimp 400 pixels tall, and he’ll walk slower as a result, and still have perfect collision. We originally had “mini chimps” running around, really small, really fast that you had to low-kick. Sadly they were removed as they broke the consistency of the show.
The game was originally called “Feathers of Fury”, but we had to change it at the very last minute when it failed a legal copyright search! The new title is a (less obvious) reference to a classic kung-fu film, and also the 8-bit legendary beat-em-up Way of the Tiger.
You have no idea how pleased I am that this game is finally released
2 ResponsesLeave a comment
Make yourself heard
All about Photon Storm and our
HTML5 game development services
Filter our Content
- Cool Links
- Flash Game Dev Tips
- Game Development
- Geek Shopping
- In the Media
- Phaser 3