I created a couple of programmatic animations for the Griffith Park sparkling rose wine website. Most notably, the organic looking growing vines on the left and right of the screen. These are animated via the drawing API rather than on a timeline, and the motion appears more organic because of this.
Take control of the reindeer with your left mouse button (hold to go up, release to go down) and try to collect the Hyperlaunch staff members whilst avoiding snow flakes. Get the ever longer chain of staff to the new offices!
At Hyperlaunch it was the tradition to do an online xmas card for our clients each year. In 2007 this was the game I built for the occasion. It makes heavy use of my AS2 physics engine with the gravity set to left, rather than down, to make the chain of collected people string out behind the sleigh realistically (if cartoonishly).
Take control of your favorite Teenage Mutant Ninja Turtle in this classic beat-em-up. Use cursor keys and C + D to fight increasingly tough stop-motion baddies photographed from the real toys.
Postmortem:
The Street Fighter 2 games and their endless series of sequels have long been favorites of mine. There’s something about the feel and the flow that is just right in those games. Skill really plays a part, which I just haven’t found to be the case in a lot of Street Fighter’s competitors. So, when we decided to build a beat-em-up for the new Turtles movie (which is frighteningly bad by the way, don’t bother watching it if at all possible), I was quite excited.
The timeframe for this game was a little over a week – 6 or 7 days of code work alongside a day or so of photographing the characters in absurd ninja poses. It turned out an illness shot around the office for most of that week too. I don’t get ill a lot, but this particular bug hit me hard and I distinctly remember coding away at the game with my head slumped on the desk just in front of the keyboard, peering up at the screen to see what I’d typed! It’s a minor miracle that the game even got finished, let alone was a half-competent fighting game.
I was determined to get a lot of my favorite parts from the Street Fighter games into this, and for the most part I think, managed it. I wanted all the moves to be different from character to character (achieved). I wanted special moves based on quick performance of key-combos (achieved). I wanted freeform hit-combos against the opposing player (achieved). I wanted the AI player to put up a decent fight (achieved), and to be able to play to the character’s strengths in set-combos (achieved). I wanted it to play fairly, so the computer had its own set of virtual controls that it pressed and clicked just as if it were a human player (achieved).
In fact, that last feature means that with a bit of code hacking, you could play as any character, and the computer could play as any character. You could arrange for computer-Vs-computer battles too, which were fun. That and a high framerate actually made for an excellent character ballancing tool – I ran lots of computer-Vs-computer battles to test out the various pairings, as well as playing lots of the combinations too.
We hit upon the idea to use the real plastic figures, and play the game out as if it were literally a fight between the toys themselves. This works fairly well, but took a lot of work to take the photographs and process them into usable graphics. Also, the range of movement of some of the toys’ limbs left a lot to be desired. The turtles themselves are largely OK, but the baddies are mixed quality at best! The lady fighter in particular looks gangly and strange in a lot of her moves. I’d have liked more animation frames too, but we just didn’t have time to prepare all the extra graphics we’d have needed.
The game was widely played, and received mixed ratings. Lots of people ‘got’ it, saw how it was similar to Street Fighter and enjoyed it. Lots more were used to the more button-bashing type of fighting game, and didn’t like it at all. That’s fair comment really – and represents a failing of the game to lead them into the right techniques and strategies. Perhaps more of a training mode than it ended up with would have been helpful here.
Lessons:
Use your mouse to wind back the mallet, then unleash it on a Scissor Sister when they light up and make a sound. The harder you can hit, the more you’ll score in this whack-a-mole style game.
Watch for the real-time ripple effect wherever you hit. It’s a bigger effect if you wind the mallet back further, and I haven’t seen this effect done elsewhere on the web yet. It’s produced by animating a displacement colour map filter over the clip that holds the Sisters.
Use the cursor keys to race Santa in this sleigh driving game. Hit space to use any pickup bonusses you might find, and look out for cheeky shortcuts!
This game makes heavy use of my AS2 physics engine again to simulate the sleigh movements behind the reindeer. You can bash and crash and swing about in quite a fun way!
The tracks left in the snow are worth a mention too. The track is one giant bitmap stored in memory and scrolled around to show the player’s position. The game stores the sleigh’s skids’ start and end points for the current frame and the previous frame, then creates a polygon for each skid around the four stored points. This is then drawn to the main bitmap with blend mode ‘add’. Then it is drawn again, half as bright, with blend mode ‘subtract’ and offset down/right a little. The result is what you see – a permanant skidmark with a bright highlight on the top/left side, and a dark shadow on the bottom/right edge. Because it’s combined into the track as a bitmap effect, it is permanant, and costs nothing in terms of CPU time for a longer skidmark. The only cost is a small amount of work per frame to actually update the bitmap. Because the sleighs slide about in all sorts of directions and rotations, the track width varies and slides about beautifully in response. It’s an effect I haven’t seen done quite as nicely in any other web games.
I built a PHP gallery for the Blade Runner origami competition. It was a fairly decent online gallery that allows people to upload images, see them as thumbnails, rate pictures and report inappropriate entries.
The competition wasn’t entered by a lot of people (the instructions for the origami were complicated and hard to follow), but the site is still quite a nice piece of work.
Use the cursor keys to dodge the incoming laser blasts from the aliens on your Dareway scooter.
The Dareway itself is a cheap copy of the Segway scooter for children, only with none of the cleverness of the original. This microsite was to promote the toy, and the game was rushed together from the Silver Surfer games. It plays OK for a few minutes, but is never going to set the world alight with new concepts! Watch for the tell tale green glow of the laser lines approaching to anticipate where you’re being fired at from, and reposition yourself to avoid getting hit. Take too much damage and you’re out.
Use your mouse to control the dark Silver Surfer whilst being chased by the light Surfer, and shot at by rockets. This is a very quick reskin of the earlier game with few extra elements. Frankly, the earlier game plays better, so I won’t be offended if you skip this one!
A simple physics game as part of a microsite. Collect up the tiles and scatter them into the ring. There’s not a lot of game here, but the physics engine from Rant enhances the tactile feel of collecting and releasing the tiles.
Use the mouse in this simple matching game to find the hidden pairs. You’re against the clock, so work fast!
Unusually for a pairs game, you can click as rapidly as you like. You don’t need to wait for the last two pairs to turn over before starting the next couple! Get to it and make it snappy.
RSS 2.0 full site