Since the update for Tutorial 4 is taking longer than expected, I decided to switch from coding to art assets to keep the posts flowing.
Also, it’s worth noting that on the Gamasutra Web site, Chris Hildenbrand has added more helpful 2D game art tutorials (there are 8 in total, listed at Gamasutra and at Chris’ blog page 2D Game Art for Programmers. If your looking to improve your skills or looking to get up to speed with Inkscape his tutorials are a must read. What caught my attention the most was the tutorials he did on attack helicopters. Helicopters have always been a fun gaming element from back in the days of Choplifter and Infiltrator to Jane’s AH-64D Longbow (and Longbow 2). Chris’ tutorials are very straight forward and easy to follow. In just a couple of hours, you will be able to easily go from a blank Inkscape window to something like:
Or if you’re feeling creative, you can make a variation of his copter:
The best part is that Chris takes a complex image like a helicopter, and shows you how to accurately recreate it using basic shapes of squares, circles, and arcs.
The next step, for a willing programmer is to take the image 3D, following his methods, apply the same concepts to the object’s depth(in Blender) and you’ll be downloading Unity(or firing it up), for the new release of Chopper Run! at an app store near you ( can I get a credit for the game title? ). After a few of Chris’ tutorials, creating assets with Inkscape will be much more intuitive and with additional practice, much less intimidating.
For our purposes, we will get up and running with Inkscape or Paint.NET(to follow the retro looking graphics), and start small, really small. We will create two types of bullets, one for the player, and one for the enemy. For my example I decided to go with yellow for the enemy and green for our player. Both images are 10 pixels wide by 20 pixels high, in the shape of a jelly-bean. The first thing after sizing your canvas is to make sure your background is transparent, Inkscape does this on its own, but when using Paint.NET you can either use layers to accomplish this or, you can erase the default background of white and then start you drawing. For simple items the second method is faster, for complex items, the layer method is best, to help visualize and plan your artwork. In Inkscape you could even use the polygon tool and mix up the shapes of the bullets. Here are my examples, just remember they are tiny!
Eventually what should happen once the GUI is done is that we will create a container structure(a list) to hold the bullets for the various objects and then add the code that will animate them (actually move them in the proper direction, if you wanted to go all out, you could animate each bullet [ think like a “plasma-sword” kind of effect] but for this example that would be an over-kill in coding, and time-consuming).
Tutorial 3 (I’m still working out the coding errors on this page)covered the steps for creating our spaceship assets, so if you need to, refer there for the steps, in this tutorial I’ll focus more on the physical shapes of the objects, don’t forget to take advantage of x/y axis symmetry when ever possible, it will literally cut your drawing time in half!
The original alien drawing started as a doodle on a piece of paper;
I decided to use it because it was simple and the overall shape (resembling an “arrow-head” or a “V” -) helped to emphasize the direction the alien should be moving. So I imported it into Paint.Net first and then came up with (along with other color variations);
Then while learning the features of Inkscape, I came up with these;
Which was basically import the image to Inkscape and re-trace it with nodes and paths while also using and manipulating the Bezier curve handles at the various nodes, then trying out some of the features available under the Filters menu. From there I started using a key shape like a square or circle and just building off of that, trying to make the aliens look either “insect-like” or unusual.
The meteor was made in Paint.NET and was simply creating a basic shape of a square with rounded corners, and then randomly adding more shapes to get this;
then going back into the image and adding random shapes, scribbles, and lines, (anything to help vary the color, and help hide the original lines) using white, reds, browns, and grays to get an image that looks like this;
To make the meteors in Inkscape, a good method would be to follow Chris’ advice from his tutorials. Use the shape method from the black and white meteor drawing above, decide on a location for the light source, add a base color like dark red or brown and then, using the light source as a guide add highlights and shadows to give the rock an organic look.