Home | Rules and Guide | Sign In/Create Account | Write a Post | Reddit | #LD48 | #ludumdare on irc.afternet.org (Info)

Ludum Dare 29 — April 25th-28th Weekend [9 PM EST] — Theme: ??? (Theme Voting!)
  • Ludum Dare 29 Compo (48 Hour+Solo+Scratch+Src) Begins: in 2 days, 15 hours, 44 minutes, 23 seconds
  • Ludum Dare 29 Jam (72 Hour+Teams OK+Relaxed) Begins: in 2 days, 15 hours, 44 minutes, 24 seconds
  • [ MiniLD 50 | Warmup Weekend | Real World Gatherings | Ludum Deals | Wallpaper ]


    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.


    All posts, images, and comments are owned by their creators.

    [cache: storing page]