deeperbeige.com

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).

Play Hyperlaunch Xmas 2007

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:

• Aim high, and you might just hit!
• Don’t be scared of taking on a daunting challenge if you’re determined enough to see it through
• You can’t please everyone all the time

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.

Cause the biggest pile-up you can in this quick-hit driving game. Use the cursor keys to race up the road and smash into the junction at the end. The more you hit, the better your score!

Postmortem:

Whilst messing about with an idea I had in my spare time, I ended up creating a basic AS2 physics engine for simulating masses and springs. It turned out to be just what was needed for the Rant game. Each car is two round masses joined together by a spring, with a car graphic pasted over the top. The resulting losenge shape isn’t really much like a car I know, but it is perfectly sufficient for the game as it stands.

Initially, I tried making the cars out of a box made from four masses and six springs holding them in position. This ran considerably slower as the collision detection had that much more work to do, and there were that many more springs to simulate. The results weren’t as good either, with boxes occasionally turning inside out and often wobbling like jelly. The two-mass system worked considerably better and was considerably cheaper on the CPU. All round win!

A typical game of Rant only lasts a few seconds. You race up the road, tap a few cars, get a score then it’s all over. It turned out in playtesting that the trick to making this addictive was to make it really easy to play again. So, spacebar to reset at any point (even before the game is over) was critical. Likewise, there’s no lengthy transition effect before you’re back in control. In fact, there’s not even a brief half-second transition – I found that it annoyed people to wait even for that when you can replay so rapidly.

Another way to reduce user friction was to store their high-score in their Flash Shared Object. I found that people got into a routine of restarting rapidly, and sometimes did so when they had a highscore by accident. Rather than lose the chance to submit it, I allow them to submit it at any point in the future after a game too. The highscore table automatically allows just one entry per person, so there’s no chance of one person filling the table when they’ve achieved a top score.

Ultimately, Rant is a game of luck. If you’re lucky, you can hit all three of the randomly placed speed boosts, catch a few cars just right on the junction itself and hit lots of parked cars for that magical score. The game keys into that ‘one more go’ trap that we’re all succeptible to, and a little bit into the semi-gambling gene that makes us play dice games like Yahtzee, even when there’s nothing other than a highscore at stake.

Lessons

• Very short games can increase replayability and addiction, since people don’t have to invest much time in each go
• … as long as there’s very little friction before playing again
• When simulating physical objects, go for the simplest underlying representation that will suffice
• You don’t always need a lot of gameplay to generate addiction