Easy, fun game sprites made with SVG!

I downloaded and installed Inkscape in order to draw an animation to play with the Scalable Vector Graphics API.  Inkscape was quite helpful for creating my game’s opening SVG animation (though it would have been more helpful if it could save the file in “SVG Tiny”…).  What I didn’t expect was how helpful Inkscape is for drawing standard game sprites — drawn first in Scalable Vector Graphics format, then exported as PNG files!

I needed an rocket sprite for my “Space Explorer” game.  Here’s what I came up with:

You can see that the four frames give a spinning effect.  (The lower row gives the frame sequence for when the engines are turned on.)  I’m more an engineer than an artist, but here’s how Inkscape and SVG made it easy for me to draw this:

The thing is that the lines of the drawing are objects that are easy to manipulate.  They’re easy to grab, modify, duplicate, and delete.  So for the animation, I just drew all of the elements onto a single drawing.  Then, I saved four copies, and on each one deleted the elements I didn’t need:

I temporarily colored different components different colors to keep track of which one was which. For the final sprite version, I filled the components with a radial gradient fill.  It’s surprising how much depth you get just from using a gradient when coloring in your sprite!

After I did one rocket sprite this way, I improved my technique while drawing a flying saucer sprite:

I started by creating a single SVG image file (in Inkscape) that contained all of the image elements:

Starting from this (SVG) image, I saved eight copies, one for each of the animation frames. You can see how drawing all of the elements onto a single drawing makes it very easy to place the different elements and to make sure that the images line up exactly from one frame to the next. Then, on each frame, I just deleted the elements I didn’t need (and changed some of the colors so that the bulbs are red when the engines are on).

Once I had my eight SVG files, it wasn’t too hard to place them all correctly into a single PNG file.  (The trouble is that they have to be placed so that the images line up exactly from one frame to the next.)

In the file menu of Inkscape, there’s an “Export Bitmap” option that allows you to export the image as a PNG file. It automatically crops the image tightly, which is quite helpful for creating frames that are all the right size. So I opened all eight PNG files in the GIMP, and created a new image that was exactly big enough to hold the eight frames.  Then I copied the eight images and pasted them all in.

The tricky part is placing each frame in exactly the right spot in the larger image.  It turns out that it’s not possible in the GIMP to select exact coordinates when pasting one image into another (eg. there’s no dialog that lets you say “paste the top left corner of the sub-image at pixel 34, 56 of the larger image”).  I Googled around for how to paste at a particular spot, and learned that it’s a feature that doesn’t exist.  And it’s particularly tricky with images that have transparent backgrounds (as sprites created in Inkscape do).  The GIMP copies only the non-transparent part of the image, so if you were using the transparent part as a guide for where to place the image within the frame, you lose that information when you do the copy-paste.

Here’s the solution I came up with:  Use the magnifying glass to expand each frame.  Then use the pencil tool to draw one black pixel in each of the bottom corners of the four bottom frames and one black pixel in each of the top corners of the for top frames. Then when I copy-paste each individual frame into the larger image, I can use the corner pixels to place the frames exactly.  There may be a simpler way to do it than that, but that was the simplest trick I found.

I had so much fun drawing spaceships, that I blew off programming for the day to draw some more:

(My 6-year-old Leo wanted one of the rockets in the game to have his name on it.)

Actually — since it’s more fun for the players if there’s a variety of interesting characters in your game’s universe — it’s nice to know that it isn’t too difficult and time-consuming to draw them. 😀

« The BlackBerry Red Key!

Beginning BlackBerry Development by Anthony Rizk »