This weekend I joined Ludum Dare, a 48h solo game jam. The challenge was to create a game from scratch (code, graphics, audio…) in just 48h following a theme: "Shape shifting".

This is the post-mortem of Sky Panic, a cute'em-up with pixel art graphics. You can play and rate the game from the Ludum Dare website, and also take a look at the source code on Github.

Log

Saturday

I woke up early (7:30 AM) to see the theme, since the jam starts at 3 AM in Europe. Unfortunately I quickly discovered that I was feeling like crap: headache, nasal congestion, stomach pain… It felt like my body was fighting some kind of flu/cold bug. I like to start my jams by doing some kind of exercise (usually a light run), but I settled for a walk outdoors instead.

I brought a notepad and pen with me and started to create a mind map of the ideas I could come up related to the theme. I came up for some ideas I liked, but they required quite a big amount of assets or game design, so I wouldn't have time to implement them during the weekend.

My mind was really clouded because of the headache, which didn't help. In the end, it was around lunch time, so I decided to cook a chicken stew, and decide on an idea while having lunch. And the winner was… A cute'em-up! It's a variation of the classic 2D scrolling shooters (not FPS), only with a cute theme / art.

I had prepared beforehand the Github repository and created the initial scaffolding with the help of my game jam template generator.

Development that evening was slow but steady. I took plenty of breaks to rest: I played a few Hearthstone games, read some articles, watched some TV-show episodes… I didn't want to overdo it and fall really sick.

By almost 5PM I had already a ship that shot bullets. It seems simple, but this first step serves to set up some systems I needed in place: how to handle movement, getting player's input, implement a sprite pool, etc.

Note that although I was just using placeholder graphics, I already decided on a palette / mood. All the sprites of the game would be created with PICO-8 16-colour palette, which I personally love.

The next step was to create enemy waves that would follow a pre-determined path. Although there is a motion paths tutorial for Phaser, I didn't quite like the fact that the example plotted every single possible pixel. The paths I had in mine weren't that complicated, so in the end I just ended up creating a series "waypoints" the enemies will reach one by one.

An old-school trick to make a sprite reach a point is to ease out that movement at the end so the sprite ends up really, really close and you can finally "snap" (or round up) its position to the target.

This is an snippet from the source code. Here I'm also clamping the maximum speed so the easing only takes effect when the distance to the target is close.

if (distance > FUZZY_EPSILON) {
  let angle = this.game.math.angleBetween(this.x, this.y, target.x, target.y);
  let coeff = Math.min(distance * 0.05, 1);
  this.body.velocity.setTo(
    Math.cos(angle) * MOVE_SPEED * coeff,
    Math.sin(angle) * MOVE_SPEED * coeff
  );
}

By dinner time I had already some flying enemies spawned in waves, following a motion path. I also implemented a simple flashing animation for when the enemies get shot (they can sustain multiple hit).

And right before going to bed (around 11:30 PM) I implemented the shape-shifting mechanic. You can switch to bomber mode to shoot bombs instead of bullets! The idea would be to use this weapon to kill enemies in the ground.

Sunday

I overslept, but I don't regret it because my body really needed it. Once again, I went outdoors to have a walk and get some sunshine. Right before lunch I managed to implement some ground enemies –which I called crawlers– that would shoot at you and you needed to shape-shift to bomber mode to finish them.

This was beginning to look more like a game! I implemented the score, infinite enemy spawning and a game over condition. I then added some basic sound effects I quickly created with an online synth, and uploaded this first playable version to my server so other people could play it.

I also created a simple background music loop, which is short, but has a bass line I like.

Once basic gameplay and audio was in place, I could finally start doing some art! These are some samples:

I'm also quite proud of the explosion animation –it was the first time I was drawing one! I decided to go for this approach because I wasn't confident to be able to implement particles on time (and I was right!).

As you can see, I added some clouds. These serve to create the illusion of a scrolling background.

I uploaded this version with final graphics so people could test for some crashing bugs. I was lucky there were none! To finish my entry, I added a splash screen with controls information and uploaded the game to some mirrors (Github Pages and my page at itch.io).

I did it! A game in just 48 hours!

What went wrong

• Sickness. I guess you can never foresee this.
• Lack of inspiration to come with a really cool mechanic. Again, I'm not banging my head too hard since I was sick, but next time I'll try to do a more original game.
• I didn't check the requirements to embed the game in the Ludum Dare website, and I had to change my game's resolution at last minute. Luckily for me it was just 60 pixels, so I wasn't a big deal, but it could have been way worse and/or affect gameplay!

What went well

• I was able to easily underscope, since it was clear I wouldn't be able to push myself hard. Thanks to this I was able to get plenty of rest and not stress myself, which would only have worsened my condition.
• I tried a new graphics app to create pixel art –Aseprite, which I got on an Steam sale– and I was really happy with the result. It made creating animations and spritesheets much hassle-free.
• Even though I chose a very restricted color palette, people seem to have liked the results! I'm personally quite happy with some of the sprites I created.
• Uploading the WIP versions and posting screenshots with progress on Twitter, so people could play the game and give me feedback and encouragement!
• Some of my fellow game devs were also doing this on Twitter, and it was fun to follow everybody's progress.

Tools & tech

• HTML 5 as a platform, which maximizes the amount of potential players.
• JavaScript with Browserify for dependencies and Gulp for automation.
• Phaser as a game development framework.
• Bfxr and Audiotool to create music and sound effects (though both require Flash).
• Aseprite for pixel art.
• Atom with vim key bindings as text editor.
• Git for version control.

Don't forget to play the game!