Whew! What a ride! What an experience! And above all: what a game! I’m extremely satisfied how well my first Ludum Dare went. My game, called “I Am A Ninja”, though short, does not have too many bugs, is fun to play, has a nice graphical style, even does some character building… it just looks done. Here it is! Click the screenshot to play!

Screenshot of my game "I Am A Ninja". Click it to play!

Yesterday I collected a list of things that had to be done today, and in part thanks to luck (not getting stuck on tricky bugs), in part to good planning, I got through them all.

I started with adding a storyline to fit in with the theme. Well, maybe it’s not so much a story as it is a character and his characterization… but it fits, nonetheless. Unfortunately it is told through text only and does not integrate with the gameplay.

I then drew up some instruction graphics to stick at the bottom of the page. Unobtrusive, but there when you need them. On smaller screens they’ll be below the fold, but I think that price is worth paying for not slapping the instructions into the player’s face.

Then came the most challenging and fun bit: drawing animations. I’d never done this before, but as my character is just a 32 by 32 pixel silhouette it was over almost before I got started, and it looks nice. The animations are packed into a single 128 by 128 image, with 4-frame animations for each of 4 states (standing, walking, swinging, falling). The protagonist is actually the only sprite in the game; all the other things are pure canvas geometry. (There’s one more image for the noise overlay and another for the instructions.)

Then I built two more levels, for a total of three. My brother’s playtesting shows that an experienced gamer can get through in about 10-15 minutes, which is perfect for a game of this scope. However, when building levels I really don’t have a clue what I’m doing… I just throw stuff together randomly with some regard to how difficult I think it would be. I have little to no experience in this area, and I hope it doesn’t show too much.

The same goes for sound effects. If there’s one thing I don’t like about my game, it’s those: they don’t fit in at all with the style. But without a decent microphone, I was stuck with bfxr, which makes all games sound like the MS-DOS era. I wonder if it would have been better to have no sound at all. On the bright side, I just noticed that sound does not work at all in Firefox, so I get some A/B testing for free!

With just a few hours left, I turned to polishing. The first step was a dying animation; simply making the player disappear would not do. So I added a simple particle ‘engine’ and made the character fall apart into a bunch of white sticks when he dies. Combined with the sound effect (one of the better ones), it really gets the idea of “painful” across.

Then, once I had the particle system anyway, I reused it to make the hero leave behind a trail of sparkles. When swinging through the room on your rope, this gives a really nice effect. I initially tried for a black smoke cloud instead, but that just came out looking as a cartoon-like cloud of smelliness.

Finally, I added a nice animation for the end of a level, sucking the player into the vortex. Turns out, it’s quite tricky to tie this into the physics: your standard Newtonian mechanics just end up in oscillations. Some friction that increases near the centre of the vortex did the trick nicely.

The finishing touch was to replace some jQuery show() and hide() calls by fadeIn() and fadeOut(). It makes everything feel so much smoother.

And that’s it! Thanks for reading! I hope you enjoy my game as much as I did making it!

I’m quite satisfied how far I managed to get on day one. My game is playable online, so I encourage you to click the screenshot below and give it a swing. Or just read on!

(Note: The game is hosted at a temporary location. Eventually, I’ll make it show up somewhere on frozenfractal.com.) (Update, 18 Dec 17:45 GMT: My host seems to be down. Sorry! I’ll move it before the compo ends.) (Update, 4 Jan 2012: Updated the link to point to the final location.)

The basic idea is a platformer with a ninja rope, like you have in Worms. The objective is to collect all coins, then make it to the exit. Your rope will not hold on dark surfaces. Nasty spinning wheels will kill you when you touch them.

All this is written in 675 lines of JavaScript, using the HTML5 canvas element and a little bit of jQuery.

Getting the physics to work was somewhat tricky, and I’m aware that there are still some bugs in that area. However, I’m quite pleased with the effect, and how much fun it is to swing around on your rope.

I initially wanted to make it possible to adjust the rope’s length with the mouse, by dragging it away from the point where the rope connected to the wall. It turned out that this was hard to get right with a moving viewport, since the mouse cursor is continually moving relative to the game world. Keyboard controls work better.

The level loader loads directly from Inkscape SVG files (XML), fetched via an AJAX request. This allows me to use Inkscape to directly edit the levels, which is very time-efficient. Magic colours are used to indicate which object represents what.

It’s incredible how effective a simple circular gradient and some noisy grain is to set the overall mood of the game. I had to draw it to a separate, static canvas and overlay it on top of the game canvas, otherwise it would be slow in Firefox (and in some people’s Chrome too, I heard).

The slack rope while shooting was a happy accident resulting from a bug, so I kept it and modified it a bit.

There are currently two levels, but only level 1 is somewhat finished and functions as a brief tutorial of sorts.

To do for tomorrow:

• do more with the theme ‘alone’; develop some kind of storyline
• add more levels
• create sound effects
• tweaking, playtesting
• add better sprites and animations, also to fit in with the theme
• add transition between levels
• come up with a better name
• particle effects?
• music?