Park to Park screenshot

Here’s how my LD25 compo entry, Park to Park, came to be.

Concept

I had three basic game ideas lined up that could be made to fit a number of themes. I woke up early Saturday morning, checked on my phone what the theme was, immediately picked this one, and had a fully formed idea before I’d even finished my shower. There would be an evil businessman who wanted to turn a lovely green into an ugly parking lot. Of course there had to be protesters, so why not make them the ultimate symbol of love that is the hippie? The goat just fit in quite naturally. I’m not sure where this all came from; inspiration is an unpredictable mistress.

Coming up with a title was harder, but because I don’t like changing titles halfway, I just cut the knot after ten minutes and went with Park to Park.

Programming

I’m very familiar with the technology (HTML5, CoffeeScript and CSS3/SCSS), but programming still took longer than I anticipated.

I initially thought I could get away with really simple collision detection, but it didn’t work out so I had to make it more sophisticated. Somewhere along the line, a bug crept in that occasionally causes an enemy to miss a boundary and walk off the screen. It’s very rare and I couldn’t reproduce it, so I finally submitted with this bug still in.

Someone also found a bug where you can divide the playing field into two disjoint regions, by “skimming” along the opposite edge and then looping back. This is not good for your score, so this is not exploitable, nor does it crash the game in any way, but it’s still weird. I should have started pouring concrete as soon as the tape touched the edge of the concrete, rather than waiting until the villain has his feet back on safe ground.

From my previous games I learned that people like to compete against themselves, so I added a scoring system and a hiscore list. The list is saved using HTML5 local storage, which I’d never used before, but it turns out to be incredibly simple (it’s basically just a hash map, though it only stores strings).

For sound, I reused the technique from my previous game Cytosine, downloading base64-encoded WAV files and programmatically creating <audio> elements using a data url. It’s far from efficient, but quite effective.

Another problem with programming was — again — the music. How hard can it be to make HTML5 audio loop gaplessly? Pretty hard. I ended up having two <audio> elements, starting one when the other finishes. After the weekend, I got a bug report from someone saying that both were playing at the same time… For next time, I should probably research libraries to make this easier.

Gameplay

As usual, I didn’t take enough time tuning the gameplay and difficulty level. From the comments so far, it seems I got it mostly right by pure luck.

My biggest mistake was that I didn’t know my genre. I based this game on a game I used to play on Windows 3.1 whose name I could not remember, and I didn’t hear of its ancestor Qix until after the weekend. If I had known, I would have added the enemies from Qix that creep along the edge. This would force you to move and make it impossible to sit and wait indefinitely for the right opportunity, and make the game much more tense and exciting.

Graphics

This is the aspect I’m most happy about. I had a lot of practice lately using Inkscape for another, somewhat bigger project that I’m working on, and got a lot of inspiration and courage from Chris Hildenbrand’s excellent blog 2D Game Art for Programmers. Add some rudimentary but effective animations, and I’m quite happy how the look of the game turned out.

It’s really too bad that the characters end up so small on screen, and moving so fast. It’s hard to see the flowers on the hippie’s robe and the weird rectangular pupil of the goat (really, those guys are scary up close), and the hearts on the underwear of the businessman when he’s stripped for a split second before he gets wrapped in his own tape.

Getting all the tiles right and lined up for smooth edges of the concrete (except in some, ahem, corner cases that I later discovered) took quite some time, and with hindsight I should maybe have selected a simpler approach (like masking in code) to make it look good.

Later additions to the graphics include the logo, and the lines on the concrete of the car park. As there was no entrance, I just made the arrows point in a circle. I suppose it’s a metaphor for the futility of industrialist progress, or something. Maybe. I guess.

Sound

For my first two Ludum Dare entries, I used Bfxr. For this one, I wanted more natural-sounding effects, so I used my webcam microphone instead. With no practice at all, it turned out I’m a lousy foley artist.

The “win” sound is me playing a scale on a tin whistle, sped up and pitch-shifted downwards. The “lose” sound, lacking real construction tape, is the crumpling of a plastic bag with some effects applied to it. The goat and hippie sounds are just my voice shifted up and down, respectively. The popping sound for placing the tape is me popping my cheek like this (well, almost like that). I did the “pouring” sound by shaking a bottle of water; that one worked out particularly well.

All sounds were recorded and edited in Audacity, which was also a first for me. Maybe it was my inexperience, but I think that’s one of the worst designed, erm, hacked up user interfaces ever. But it works, and it’s free, so I shouldn’t complain.

Music

Some people like the music, some people hate it. If you are in the latter camp, feel free to turn it off! The melody is a pastorale for two wind instruments by J.B. de Boismortier, entered by me into LMMS.

Since I’m not good enough at music to play anything myself, I had to find a tune that would work reasonably well when played mechanically by a computer. The harpsichord sample fits well with that, as harpsichords naturally have relatively little room for expressivity. The problem with LMMS’s harpsichord sample, though, is that it seems to be off-key, or at any rate it would sound awful together with any of the other samples like flutes and organs. That quite limited the options to make it sound interesting.

Chrome

By which I mean, intros, endings, menus and the like. The win/lose screen is just some basic HTML and CSS with a CSS3 transition applied to it. I had this idea of making it into an official-looking letter, hence it is exactly the ratio of a piece of A4 paper, but that didn’t really work out.

I had some images in my head of what the intro screens should look like, but didn’t get round to them, so you fall right into the game.

On IRC, Cryovat (much concrete beauty be upon him) mentioned that he was disappointed at the lack of a game over screen after winning, so I spent the last two hours scaling up the villain’s image, pulling him apart, and animating the parts with CSS3. I won’t spoil the effect; if you want to know, go and play for yourself!

Tags: postmortem