About Frozen Fractal (twitter: @frozenfractal)

Hi! I’m Thomas ten Cate, a Dutch indie game developer who goes by the name of Frozen Fractal. I have been developing games as a hobby since I was a child, tried to do it for a living after finishing university in 2009, failed, and got a day job at Google in 2011. Then, late 2015, I felt sufficiently more experienced and motivated to give it another try, so I’m now developing games fulltime again.

Though mainly a programmer, I’m a jack of all trades: I do my own game design, programming, graphics, publishing and marketing. Only music and to some degree sound effects are left to dedicated professionals.

My focus is on small, innovative games in a variety of styles. Target platforms are currently web and mobile, but my ambition is to eventually get enough experience to build a PC game with a bigger scope.

Entries

 
Ludum Dare 36
 
Ludum Dare 35
 
October Challenge 2015
 
Ludum Dare 33
 
Ludum Dare 32
 
Ludum Dare 31
 
Ludum Dare 27
 
Ludum Dare 26
 
Ludum Dare 25
 
Ludum Dare 24
 
Ludum Dare 22

Frozen Fractal's Trophies

Frozen Fractal's Archive

Base code declaration

Posted by (twitter: @frozenfractal)
Thursday, December 4th, 2014 12:29 pm

I’m going to be building a JavaScript/HTML5 game and put together some scaffolding for the following tools:

  • TypeScript, which will be a first for me (in previous LDs I used CoffeeScript). Seeing syntax/type errors as soon as I save the file is going to be a big timesaver. I wanted to try Facebook’s newly released Flow typechecker, because it does deeper type inference and thus provides value even without type annotations, but it doesn’t yet support handy ES6 features like classes and the fat arrow.
  • howler.js for cross-browser, low-latency sound effects and music.
  • jQuery for DOM manipulation. I typically need some of that, if only for hiscore lists and such.
  • SASS (SCSS, actually) and Bourbon for CSS3 convenience. It’s a slight change from the previous LD, where I used Compass, but I’ve found it’s slower to compile.
  • Inkscape. I use the command line export function to convert them to PNG on the fly. If I need sprite sheets, I’ll just draw them into a single SVG; makes it easy to get a consistent set of sprites, too.
  • oggenc and lame to convert WAV files to OGG and MP3 for the various browsers. Chrome only eats MP3 but not OGG, Firefox eats only OGG but no MP3. What a pain.

And the best part: an old-fashioned Makefile to rebuild assets when needed, and a tiny Sinatra web server to run make before it serves up the asset. It means I can just refresh the browser, and everything I see will be up to date. This has worked very well for me in the past; for any other JavaScript participants out there, I highly recommend that youset up something similar or just steal my code.

Preparation: game ideas for each theme

Posted by (twitter: @frozenfractal)
Thursday, December 4th, 2014 1:40 am

Obligatory “I’m in” post, but slightly more useful: let me come up with an idea for each of the themes, to save some time on brainstorming this weekend. Feel free to steal these! Ideas are cheap, implementation is what it’s all about.

  • After the End: The end of what? The world? Your life? Lots of room for an afterlife or post-apocalyptic setting here. It could take place in heaven, or in hell; hell is probably more interesting. Dante’s “Inferno” would be a good backdrop, but I have no time to read it before the weekend.
  • Artificial Life: I love this theme. I’ve been wanting to make a game/simulation of ants for ages, so I’d probably try that. The player could program some agents with a simple set of rules, and set them loose in the world.
  • Avoid the Light: A tense WW2 game where you have to avoid the searchlights in order to sneak into a facility. Hat tip to “Commandos: Behind Enemy Lines”. Fabulous game – where did that genre go anyway? It could also have you fly a bomber at night.
  • Borders: “Papers, Please” already did the obvious here. But it could be about drawing borders to minimize/maximize certain properties, or the classic pen-and-paper game of drawing only three lines to cut the cake so that everyone gets one cherry.
  • Chaos: Like the theme Butterfly Effect that didn’t make it, this reminds me of the mathematical concept of chaos. Perhaps something with a Lorenz attractor? It sure looks pretty! A tiny change in initial conditions would make the outcome hugely different. But as a player, it’s not much fun to control the initial conditions because it’s so unpredictable.
  • Colo[u]r is Everything: This would lend itself well to some puzzle game, maybe about combining or separating colours. It’s been done before, but something original must be possible still.
  • Death is Useful: A game similar to Frogger, but when you die, your gory body remains on the road and traffic will steer to avoid it, possibly creating a path where there was none. Maybe even crashing into each other?
  • Deep Space: Love this theme! I would make something super tense with Newtonian mechanics, inspired by the movie Gravity, where you have to survive and get from A to B before your oxygen runs out.
  • Deja vu: Well, just repeating levels would be boring. Even if you put a twist on it the second time, it’s still not a great use of the theme. What about Trinity’s remark? “A déjà vu is usually a glitch in the matrix. It happens when they change something.” Maybe we could set the player back a few seconds in the game, but slightly change something at the same time?
  • End Where You Started: A platformer inside a ring? You start at the bottom of a flag pole, Mario style, but the stairs can only be ascended from the other side so you have to go all the way round.
  • Entire Game on One Screen: It’s a bit too prescriptive for my taste, but interesting nonetheless. Instead of having multiple levels, the end state of one level could be the initial state of the next, so the entire game is one continuum.
  • Everything Falls Apart: Hmm, lots of room for apocalyptic settings here as well. Maybe a platform puzzler where every tile you walk on falls away as soon as you leave it. (I don’t like the twitchy time limits that some of these games impose.)
  • Generation: It can be about generations of people, or maybe power generators, or it can use procedurally generated content as long as it’s deeply tied in with the gameplay. Or maybe something with cellular automata like Conway’s “Game of Life”, but the generation numbers of the cells make them behave differently.
  • Isolation: Something about quarantine, having to contain a dangerous contagious disease. There is a road network where you can block roads, but that also means that medical aid can’t use them either, so you have to find the right balance.
  • Machines: A puzzle game where you arrange cogs and gears to make things happen. Not the game “Cogs”, of course; maybe more like “The Incredible Machine”.
  • One Rule: I like Go for its simplicity, but even that game has at least three rules, depending how you count. A game with only one rule would be hard to do. We could bend the theme a bit and make it a “king of the hill” type thing, where only one can rule?
  • Playing Both Sides: The match is rigged, and you have to control a football game to ensure a particular outcome like 3-1. But of course, it has to look realistic or the public will catch on…
  • You Are Not Supposed To Be Here: I will enjoy playing the variety of games that will come out of this, but I’m not sure what to do with it myself. Maybe you are in disguise and have to act just like the people around you, or you’ll be discovered.
  • You Can’t Stop: Canabalt clone comes to mind. Or maybe a driving game where you have to avoid traffic without being able to slow down, like in that movie Speed that I heard of but never watched.
  • : It doesn’t have to be a literal snowman; it can be snow-themed or winter-themed. It can also be a game about Unicode.

Alright, that’s enough brainstorming for today. Bring it on! 😀

Any sound is better than no sound!

Posted by (twitter: @frozenfractal)
Monday, December 1st, 2014 2:07 am

jfxrI’m seeing some “I’m in” posts saying stuff like “I won’t do sound because there won’t be time.” That’s silly: a game with primitive sound effects is much more engaging and immersive than a game that’s entirely silent.

For those people, here’s how to add sound to your game in literally one minute:

  • Go to jfrx.frozenfractal.com (Firefox or Chrome; sorry, no Safari or IE).
  • Choose a preset button on the left and click it until you get a sound you like.
  • Click Export and save it.

So I don’t want to see any mute games this time! No excuses!

Disclaimer: I wrote JFXR :) If you have any bug reports or feature requests and file them in the issue tracker this week, there’s a chance I’ll get them done before the compo. Also, feel free to comment on existing reports so I can gauge interest.

Announcing jfxr: a tool to quickly make sound effects!

Posted by (twitter: @frozenfractal)
Saturday, August 2nd, 2014 7:51 pm

Ladies and gentlemen, in time for the next Ludum Dare compo, I bring to you: jfxr! It’s a browser-based tool to quickly generate sound effects for your games.

jfxr

Give it a try here – simply click the preset buttons on the left repeatedly to come up with new sounds. If you got something you like, fine-tune it with the many available options. Or if you know exactly what you’re going for, you can start from scratch, that is, the Default preset.

Jfxr should work in any recent version of Chrome and Firefox. Opera and MSIE users are out of luck because I can’t be bothered to test on those, and mobile devices might be a bit slow.

As you can probably tell, jfxr was heavily inspired by bfxr, but jfxr was designed to be more powerful yet more intuitive to use. It presents you with graphs of the most important parameters, so you can see what effects your edits have, and what modifications you need to do to achieve a particular result. I also find that jfxr’s randomized presets produce more useful output than bfxr’s.

I would love it if you would try it out! Please send any feedback my way via the issue tracker, or just comment on this post. Also, the source is fully open and should be fairly hackable (though I still need to clean it up a bit). Tip: you can easily share sound effects with others by clicking the Link button!

Jack and the Postmortem

Posted by (twitter: @frozenfractal)
Friday, September 6th, 2013 1:55 pm

I love reading everyone’s postmortems. Either people do clever things that I would never have thought of, in which case I’ve learned something; or they don’t, but then I at least get to feel smug; it’s a win either way. Here’s how my Compo entry, Jack and the Alarm Clock, came to be.

Screenshot from 2013-08-26 17:05:45

Concept

“10 seconds”… what to do with that? I expected many time-limited games, but I wanted to do something different, which got me thinking about other meanings of the word “seconds”. In particular, the one about having a second helping at dinner. This led to the idea of a game about Hansel and Gretel, where you play Gretel who has to collect ingredients for the witch to stuff Hansel with seconds, ten times (actually, thirds, fourths, …). I dropped this idea because it would force me to build 10 levels, ideally with different ingredients on each, and I wasn’t sure I’d have time for that.

But the fairy-tale idea stuck, clearly, and so Jack and the Alarm Clock was born. A time-limited game, as I tried to avoid, ironically… but a game nonetheless, and that’s what matters most. A platformer is probably the least original I could have done, but I had never made a platformer before (unless you count I Am A Ninja). And it would allow me to do both the objectives I’d set myself: to use pixel art, and to implement parallax scrolling (just because it’s super easy and looks cool).

Coding

Before I had decided on the final concept, I’d already started setting up a WebGL canvas (using my own support library Gladder) and writing a Tiled importer. I was worried I was going to have to parse XML with a compressed blob of data in it, but no, Tiled supports JSON nowadays! So that was a lot simpler than I thought.

A tile map loader could have gone many ways, for instance a tile-based puzzler, or a Wacky Wheels-like racing game. When the loader was done and I still hadn’t come up with a more original idea, I decided just to go for the Jack game, platformer or no.

Collision handling and controls presented some interesting challenges. This article led to the key thought of updating x and y positions sequentially instead of simultaneously, which made things a lot easier and more robust. Aligning everything to whole pixels nicely dealt with all the roundoff problems that you have in a general-purpose physics system. That also had some aesthetic effect: in pixelated games, it always bothers me if the individual sprites are pixelated, but they don’t align to pixel boundaries between each other!

I got pretty much all the coding done on day one, including graphics, sound, winning/losing, restarts and level progressions. This is what it looked like at the end of the first day:

screenie

Sound and music

By the end of the first day my brain felt like porridge, and coding had slowed to a crawl, so I decided to turn to music instead. Because I suck at composing (proof) I picked two traditional jigs that I learned to play on the Irish tin whistle. The slow(ish) tune is From the New Country, the fast one is Scatter the Mud (although I learned to play both a bit differently). I had done some experimenting with LMMS‘s C64 synthesizer emulator in the days before, so I felt confident I could use that to make a decent-sounding chiptune.

All sound effects were done in bfxr, with the exception of the game-over sounds. Both the “fee-fi-fo-fum” sound and the victory tune (notes shamelessly stolen from Mario) were done on the same C64 synth, taking care to transpose them to D so they would blend in well with the rest of the music.

Sound coding was a huge nightmare in my first HTML5 games (so much that I once dropped it entirely). I tried various sound libraries like SoundManager 2 and SoundJS but they either failed to deliver low latency, or failed to work at all in some browsers. But shortly before the compo I discovered Howler.js, which worked perfectly out of the box and made me very happy.

Graphics

This was the first time I tried my hand at pixel art, and I’m fairly satisfied with how it turned out:

sprites

 

With tile-based levels, there’s an interesting interplay between the level and the tile map, and I found myself switching frequently between Tiled and GIMP. Fortunately, both tools make this very painless. And while making levels, I discovered that my tile map supported something I hadn’t planned for: you can see the branching beanstalk in level 6.

If I have one regret about this game, it’s that I wasn’t able to put in as many graphics as I’d have liked. Some variety in the beanstalk, some more detail on the ground and in the castle, some birds flying through the air or clouds moving, some more different types of platforms…

Somewhat less faithful to the 256-colour era is that I threw in some noise to make the sprites look more interesting.

Fun fact: the most detailed-looking sprite is probably the cottage, but I only drew that in the last hour of the compo. I think I was improving; this also shows in the hen and harp sprites, which were also among the last ones. I wonder if Jack would have looked any better if I hadn’t started with him…

Level design

I’ll admit, level design is not my favourite activity. Perhaps this is also because I have very little practice and am not very good at it.

Tiled made the mechanics fairly painless, but there’s still a large amount of iterative test-adjust-test involved. Worse, by the end of it I had no idea if the difficulty level was about right. I tried to rope in some playtesters, but didn’t get much useful feedback.

Due to lack of time, there is also much less variety across levels than I would have liked. I made each next level by copying the last and putting in a new beanstalk, but the giant’s castle looks identical (and identically uninspired) each time. Worse, it’s in the same location, because moving it meant moving tiles around on three different layers, and (to my knowledge) Tiled doesn’t make that easy. It would have been nice if the beanstalk got higher, lifting the castle up, instead of just becoming more twisty.

Hacks and goofs

I thought it would be nice to end this post with some dirty secrets. Of course it’s horrible spaghetti code to begin with, with loads of global variables, public fields, and interactions and interdependencies that should not be, but here are some particular gems:

  • There are hardcoded constants all over the place. These mostly represent coordinates inside the sprite sheet. But this is OK since these are also used inside the level tile maps, so they cannot easily be changed anyway.
  • The fences on the left and right side are made impenetrable in code, rather than in the tile map. As I developed the first level, I increased its height several times, and I got tired of having to extend the invisible wall upwards!
  • Someone reported that they couldn’t make a particular jump, even though I could easily make it on my machine. I figured this was a problem with my physics implementation, which used a variable time step and therefore could have slightly different results depending on the speed of the machine. I ended up using a 50 millisecond fixed timestep. If not enough time has passed when it’s time to draw a frame, the elapsed time is added to an accumulator, and when it reaches 50 we do another step. No interpolation or anything fancy, but it looks smooth enough to me. (If the frame time exceeds 100 we still only do one step, in order not to end up in a death spiral where frames take longer and longer to compute.)
  • The clouds were one of the very last things I added, to spice up the background. It’s just a hardcoded grid of 256×256 tiles, 15 in the horizontal and 5 in the vertical direction. I knew this was sufficient because none of the levels are larger than that! (They run out near the top; this is intentional.)
  • When the giant’s hand appears and lifts the player up, the player sprite’s update method would still try to apply physics to him. Instead of adding extra state handling to the Player class, I opted for the quick way out, something only JavaScript will let you do:
    player.update = function() {};
    I used this same trick for the alarm clock’s digits, which would otherwise be animated sprites cycling through the numbers 0…9.
  • When you run out of time, the giant’s hand still appears from the top of the screen, even if you’re standing right next to him and he remains asleep!

Long story, thanks for reading. Now go play and rate it if you haven’t already!

Jack and the Alarm Clock is done!

Posted by (twitter: @frozenfractal)
Sunday, August 25th, 2013 5:31 pm

 

 

 

screenshot1

Jack and the Alarm Clock!

You’re Jack, of beanstalk fame, trying to steal the giant’s treasures, but you have only 10 seconds before he wakes up! Place snooze buttons in strategic locations along the way to keep him dozing until you reach safety.

I’ll do a proper postmortem later, probably tomorrow. First sleep.

 

O hai, a compo!

Posted by (twitter: @frozenfractal)
Tuesday, August 20th, 2013 11:05 am

The agenda is clear for the weekend, and I’m back for my fifth LD.

Joining the jam last time was fun, and I’m really happy with the game we built, but since there were only two of us and we both had to work on Monday, competition was pretty fierce. Although I mainly do LD as a challenge to myself, the competition element is still important to me, so I prefer the compo which seems a bit fairer — but that’s why it is the compo, and why the jam is the jam, after all. Thus, I’ll be working solo again.

It’ll be a browser game as usual. I considered libgdx + GWT instead of my usual CoffeeScript, but even if I wanted to port the game for a proper and official Android release later, the odds of LD-quality code being good enough are pretty slim, and I’d probably want a full rewrite anyway. Also, using JavaScript ‘directly’ has the huge advantage that you can build UI elements in HTML and leverage CSS3 animations.

Music (if I have time to do it) will be LMMS, and perhaps I’ll use it for some sound effects as well. Actually I might do music early in the weekend, because listening to it over and over will help me set the mood for the rest of the game.

I can do vector art in Inkscape reasonably well nowadays (for a programmer, that is), but I’ve never tried pixel art, so I’d like to practice that this time. For lack of a better tool on Linux, I’ll probably use Gimp. Ideally I’d also like to do something with parallax scrolling, just because I’ve never done it, it’s ridiculously easy to make, and it looks really cool. I hope I can come up with a game that fits the theme and combines both of these — and ideally isn’t a run-of-the-mill platformer either!

Aranami is going mobile!

Posted by (twitter: @frozenfractal)
Monday, May 6th, 2013 1:42 pm

The voting round isn’t even over yet, but the responses to our zen garden raking puzzle game Aranami are so positive that we’ve decided to make it into a proper game for iOS and Android!

After having weighed the pros and cons of various technologies, we’ve started writing Lua code in the cocos2d-x framework. We considered libgdx but found a $299 Xamarin license (needed to run the Java code on iOS) a bit steep. We also considered Haxe with NME but it seemed a little immature, and lacking good documentation. We also considered playN, but it did not appear to have any advantage over libgdx. So cocos2d-x it is.

Improvements we plan to make, compared to the Ludum Dare version:

  • More levels! We’re aiming for 30, instead of only 8.
    We might offer additional level packs as in-app purchases later.
  • Super-crisp, beautiful, HD, Retina-ready graphics.
  • Different rake shapes, starting with a straight I, going to the L from the LD versoin, then later on maybe U, T or Z shapes.
  • Correct par scores. We had some trouble with beta-testers achieving better scores than we had, so we intend to brute-force all possible routes to verify there is no shorter option. It’s a large state space, so I’m not sure how well this will work, and we might have to use some simplifications, heuristics or hinting. Apart from producing a par score, such an algorithm could also tell us how many possible routes there are, which is a metric for how difficult the level is.
  • An undo option.
  • A sandbox mode, where you can draw lovely patterns to your heart’s delight.
  • A level editor.
    In a future version, we hope to make levels shareable online.

Cocos2d-x is a bit harder to get started with than plain HTML5 and JavaScript, neither of us are familiar with the API and neither of us have a lot of Lua experience. But after a day or two of research, fiddling and hacking we’re finally over those first hurdles: we have a rake, and it moves in response to touch, both on Android and on iOS.

IMG_20130506_210409

 

So if you haven’t played Aranami yet, go try it now! Any additional suggestions for the upcoming mobile version would be hugely appreciated; you can leave them in the comments to this post, or on the entry page!

Well, I guess this is done

Posted by (twitter: @frozenfractal)
Monday, April 29th, 2013 11:39 am

We pretty much finished our entry: Aranami. It’s a web-based geometric puzzle game, where you have to find the path for a triangular rake across a zen garden filled with unpassable rocks.

aranami

 

The name is Japanese for something like “stormy waves”, and is apparently a traditional raking pattern for rock gardens (as well as a knitting pattern).

Stars are awarded based on how close you can get to the “par” score, which is the minimal achievable number of moves as determined by us, the designers. There are eight levels of increasing difficulty. Please give it a try!

Progress after a day and a reboot

Posted by (twitter: @frozenfractal)
Saturday, April 27th, 2013 1:47 pm

So after abandoning our old concept (still online here) we’ve started from scratch and made this.

rake

It’s a Zen garden with square grey divs rocks, and you can move the rake by turning it around one end or the other (but not move it in a straight line). The objective is to circumnavigate the rocks and get to the other side.

This should make for a nice relaxing puzzle game after we’ve added some levels with non-randomly placed rocks. We’ll score the player based on how much distance they needed to traverse to get to the other side. Then we want to make the rake draw pretty waves in the sand.

Got a thing, not a game…

Posted by (twitter: @frozenfractal)
Saturday, April 27th, 2013 9:17 am

So we’ve got this thing where you have a painting that looks like a Mondrian, and you can add/remove the red and blue colours. The lines shift according to these colours: red increases pressure (hot), blue decreases it (cold). The objective is to align the yellow rectangle with its ghost image. You can try it online here.

It’s not much fun, mostly trial and error, and we’re out of ideas for fixing it. We might just start over, although we don’t have any alternative ideas either.

Minimalism is hard!

Thoughts on the theme

Posted by (twitter: @frozenfractal)
Saturday, April 27th, 2013 12:35 am

Minimalism. I’m happy with this theme, even though we don’t have a game concept yet. One could say that every Ludum Dare game is minimalist by its very nature; the tight deadline forces you to leave out everything that is not essential. But making this into a theme explicitly opens up new avenues of exploration.

The most minimalistic game I can think of can be made in 15 minutes. The screen is initially black; when it turns white, press the space bar as quickly as you can. The time you have to do this decreases each time, until you finally miss the deadline. Your score is the number of times you got it right. There is just one problem with this game: it’s unbelievably dull.

Minimalism in other games? Canabalt is a minimalistic platformer, doing away with enemies and even left/right controls and focusing purely on the jumping. Duck Hunt is a minimalistic shooter, discarding player movement and the environment. The board game Go could be seen as a minimalistic turn-based strategy game: no health, no production of new units, no upgrades, not even unit movement; just capturing of enemy units.

These are as simple as can be, yet all of these are compelling games in their own right. Go in particular has an incredible amount of depth resulting from its extremely simple set of rules; it must be every game designer’s dream to come even close to this.

I predict we’ll see lots of black and white pixel art. Perhaps also some Philip Glass-like music. I will be voting in the Theme category based on whether people did something original with the theme, rather than just “platformer with minimalist graphics”.

Let me conclude with some inspiring quotes. It seems we’re in good company:

  • “Keep it simple, stupid.” —Kelly Johnson
  • “A designer knows he has achieved perfection not when there is nothing left to add, but when there is nothing left to take away.” —Antoine de Saint-Exupéry
  • “Simplicity is the ultimate sophistication.” —Leonardo da Vinci
  • “Everything should be made as simple as possible, but not simpler.” —Albert Einstein

Frozen Fractal to design levels, properly this time

Posted by (twitter: @frozenfractal)
Monday, April 22nd, 2013 1:24 pm

 

The best thing for me about Ludum Dare is competing against myself, and trying to do better than last time; not just in rankings, but also in the quality of my game and in my own personal satisfaction. Looking back at my first three Ludum Dares, there’s a clear progression visible.

The first was JavaScript and canvas2d, primitive geometric graphics and no sound.

The second was CoffeeScript and WebGL, still primitive geometric graphics but OMG PARTICLES! and included some awesome sound effects from Bfxr and braindead but catchy music from LMMS.

The third was CoffeeScript but back to canvas2d, home-recorded sound effects, music written by a professional 18th-century composer (but butchered by me in LMMS), and animated sprites done in Inkscape.

Each of these has helped me hone my skills in a particular area. This time, I’m raising the bar again. One thing I suck at is level design. Of my three games, only the first had real levels, and they were bad; in the later two, I cowardly sidestepped the issue by dumping increasing numbers of enemies into the same boring rectangular area. So this time, I’m aiming for a game that will force me to practice level design. I’m even reading a book about it!

I’m also going to try my hand at pixel art and pixel animations. In GIMP, if I can’t find anything better that works on Linux. (Any recommendations?)

As preparation, I’ll be looking into how to use SoundManager 2 properly, because HTML5 audio still sucks.

The community is what makes Ludum Dare awesome, and it’s thanks to you. So good luck to you all, and may the code be with you!

The making of Park to Park

Posted by (twitter: @frozenfractal)
Tuesday, December 18th, 2012 3:27 pm
Park to Park screenshot

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.

Park to Park entities sprite sheet

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.

Park to Park rotated tile sprite sheet

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!

I’m just going to leave this here

Posted by (twitter: @frozenfractal)
Saturday, December 15th, 2012 4:12 pm
Park To Park screenshot

Park To Park after a day’s work

 

You’re an nice businessman in a suit and a top hat, and your mission is to pave over the hippie-infested, goat-ridden park and turn it into a beautiful, functional parking lot.

Main work for tomorrow:

  • Balancing and playtesting
  • Maybe another type of enemy or two for the higher levels
  • Sound effects
  • Music
  • Nicer win/lose screens
  • Maybe an intro screen if I have time

Park To Park is already online and playable here. Comments are welcome!

Frozen Fractal is in again!

Posted by (twitter: @frozenfractal)
Wednesday, December 12th, 2012 12:37 pm

It will be hard to top the success of I Am A Ninja (LD22, 50th place) and Cytosine (LD24, 31st place), but I’m going to try my best.

Like my last two games, this one will also be HTML5. I’m not yet sure whether it’ll be canvas2d or WebGL, but I’m leaning towards the simplicity of canvas2d.

My previous two entries were written in raw JavaScript, but this time I’ll be using CoffeeScript instead. It’s just a more pleasant language to work with, and less verbose so quicker to type.

For preparation, I’ve written a tiny Ruby webserver using Sinatra, which uses a Rakefile to automatically compile my assets:

  • CoffeeScript is compiled into JavaScript.
  • SCSS is compiled into CSS, using Compass for its CSS3 mixins (which automatically add vendor prefixes like -webkit- and -moz-).
  • Inkscape SVG files are exported to PNG files.

This makes for the quickest development cycle: just save the file, and refresh the page.

I have three rough game concepts. Here’s to hoping one of them can be bent to fit the theme.

Good luck everyone!

[cache: storing page]