Ludum Dare 31
December 5th-8th, 2014

October Challenge 2014
Ending Soon!

ConstructionPlease excuse the site weirdness. Mike is making and fixing things. Clocks are probably wrong. Colors are place-holder.

What is Ludum Dare?
Rules / Guide

Sky Trader Post-Mortem

Posted by (twitter: @dekart1234)
September 3rd, 2013 11:18 am

Sky Trader is my third game made for LD48 and my first game of arcade genre. I only made point-and-click games before so making such game was a truly new experience for me. In this article I’ll try to describe what I’ve learned while creating the game.

pirate_base_0000

Theme

Almost everyone who rated my game mentioned it doesn’t match the theme. I definitely agree with this. The only thing that somehow matches the theme is fuel – each can lasts exactly 10 seconds. But it’s definitely not enough to say that the game matches the theme. However, it can be easily explained: I tried to create a fun and interesting game first and make it match the theme later. Obviously, I failed to make it 10-secondish enough :)

Skeleton App

station_0000

During previous competitions I always started development from empty folder. I created Rails application, added all required libs, configured deployment, etc. it usually took from hour to several hours, depending on the weather.

This time I decided to create a skeleton app which already included a set of libraries I was going to use, tested deployment scripts, and some boilerplate game code I use for my other games. It took several hours on Friday to make this app usable and it definitely saved me a lo

t of time and mental power to focus on the game itself. Instead of setting up the app I started coding the game itself from the first minute.

Coding

city_0000I decided to make the game with HTML5 and JavaScript using pixi.js framework. I already had some experience with it so it was a good choice. Pixi.js is pretty simple and it doesn’t restrict you to a certain game structure, genre, or development cycle – it just takes sprites from you and renders them to the canvas with WebGL. It also automates some simple game routines such as sprite atlas loading, animation, rotation, and transparency.

I began the development with some mockup arts and spent the whole first day implementing game logic – ship movement, clouds, pirates, fighting, viewport movement, trading with cities, etc. My coding skills are much better than my art talents, so I decided to make as detailed experience as possible and focus on the art later.

At the end of day one I had fully working version of the game deployed to Heroku. Being able to test the playable version earlier helped a lot – I was able to submit the game as soon as the submission form was open.

Art

ship_squacco_0000I was pretty much surprised that the art for this game got so many positive responses. I’m not an artist and I was extremely pleased to receive positive feedback. I’ll try to describe the art development process in details, probably it will help someone to succeed during the next competitions.

Initially, I was going to draw everything in pixel art, but after trying to draw just one sprite I understood that it will take a day to draw the ship alone, not to mention animations, pirates, cities, and so on. So I decided to try something else.

I started drawing simple sketches in Photoshop at 10x scale of the final image I would like to get in the game. Say, I want to have a city sprite 100×100 pixels. I started drawing it 1000×1000 pixels. Sketches were terrible, but they allowed me to draw images without focusing on precious details of every pixel. Here’s the sample sketch:

city

After drawing the sketch I started adding layers one by one, painting every surface of the object. I focused on colors, shadows, and texture, tried to use Photoshop effects where possible. Half-painted image looks like this:

city_half

The final image at 10x scale looks terribly, but when scaling it down to the designated size it looks OK (large vs. final size in the top right corner):

city_large

Animations

ship_sparrow_0000After making a static version of the image I created a frame-by-frame animation by copying layers in Photoshop and adding motion blur effects. I had about an hour for each sprite, including animation, so I decided to add just one animated element per sprite – rotors for ships and cities, flag for upgrade stations.

Even the simplest possible rotor animation for the main ship made the game much more live and visually appealing. I decided to add animated elements to every object in the game. But I had only few hours left before the compo submission is over, so I had to find another way to animate things rather than drawing everything in Photoshop.

Pixi.js provides simplest API for object rotation and transparency – I decided to use them. Instead of drawing two separate states for static ship and flying ship I decided to simply change inclanation of the ship depending on its speed. It game perfect results – the ship started to feel like real, it got some kind of visual inertia. I decided to use the same effect for pirates, added tilting for bonuses, made cities float up and down.

Audio

I didn’t have enough time to make any sound effects or music for the game, so I decided to just skip this part. My skills with audio software are poor and I don’t think I can produce something satisfying in less than a day or two of trying. I should practice it outside of the competitions to be able to properly use the skills in the limited time frame. I think that the game could be much better with proper sounds and many voters think the same.

Conclusion

I think that I pretty much succeeded with the game – I made a game of a kind I never did before, its visually appealing, it feels good, and I’m even thinking about the post-compo version of the game.

Here’s the short instruction I would recommend myself to follow during the next compo:

  • Make a skeleton app with as many features as possible, excluding features specific to a certain genre or setting
  • Try to stick to the theme – it’s one of the most important things to get good rates
  • Art and sounds are crucially important and require at least 50% of the time limit.
  • Good animations can be done with rotations, scaling, and transparency – and they’re very easy to do.
  • Early feedback is very important. Show your game to your friends and family as early as possible – it will give you new ideas.

Vote!

I would be glad if you’d check my game and let me know your thoughts.health

Tags: ,


Leave a Reply

You must be logged in to post a comment.

[cache: storing page]