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.
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
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
I 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
I 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:
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:
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):
Animations
After 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.
Tags: html5, post-mortem
