{"author_name":"dekart","cat":"LD #27","comments":[],"epoch":1378225080,"likes":4,"metadata":{"p_key":"37970","p_author":"dekart","p_authorkey":"14826","p_urlkey":"73586","p_title":"Sky Trader Post-Mortem","p_cat":"LD #27","p_event":"LD27","p_time":"1378225080","p_likes":"4","p_comments":"0","p_status":"UPD5","us_key":"14826","us_name":"dekart","us_username":"dekart","event_start":"1377216000","event_key":"18","event_name":"LD27"},"text":"

Sky Trader<\/a> 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.<\/p>\n

\"pirate_base_0000\"<\/a><\/p>\n

Theme<\/strong><\/p>\n

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 \":)\"<\/p>\n

Skeleton App<\/strong><\/p>\n

\"station_0000\"<\/p>\n

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.<\/p>\n

This time I decided to create a skeleton app<\/a> 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<\/p>\n

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.<\/p>\n

Coding<\/strong><\/p>\n

\"city_0000\"<\/a>I decided to make the game with HTML5 and JavaScript using pixi.js<\/a> 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.<\/p>\n

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.<\/p>\n

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.<\/p>\n

Art<\/strong><\/p>\n

\"ship_squacco_0000\"<\/a>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.<\/p>\n

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.<\/p>\n

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:<\/p>\n

\"city\"<\/a><\/p>\n

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:<\/p>\n

\"city_half\"<\/a><\/p>\n

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):<\/p>\n

\"city_large\"<\/a><\/p>\n

Animations<\/strong><\/p>\n

\"ship_sparrow_0000\"<\/a>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.<\/p>\n

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.<\/p>\n

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.<\/p>\n

Audio<\/strong><\/p>\n

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.<\/p>\n

Conclusion<\/strong><\/p>\n

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.<\/p>\n

Here’s the short instruction I would recommend myself to follow during the next compo:<\/p>\n