I also noted at the time that Claptraps was a piece of free software - testpilotmonkey released it using Free Software Foundation's General Public Licence or GPL. This means that anyone is free to study or modify the source code and send copies of the game to their friends.
I felt that releasing something as fantastic as Claptraps under the GPL was an act of generosity that should not go unrewarded. As I don't have any money, I decided to donate some of my time instead.
The place I felt best able to help out was the graphics. Claptraps is a tile based game, with 40 x 40 pixel tiles which are stored as 32-bit Portable Network Graphics (PNG) files. testpilotmonkey had decided on a cartoon look for his graphics, with flat fills bounded by black outlines. Here is a screenshot of the game with the testpilotmonkey's original graphics:
Original graphics - Click to enlarge
I love these graphics, as they have bags of character and the animation is very pleasantly squishy and organic. But I thought it might be nice to take these graphics and see if I could make them a bit three-dimensional. To do this I decided to use a piece of free software called Inkscape. The reason I decided to use Inkscape, as opposed to a raster graphics package like The GIMP, was I felt cartoon-ish nature of the graphics lent themselves to be created in vector format. It also meant I could create one set of graphics that could be used at any size.
I made my canvas 40 x 40 pixels in Inkscape, for convenience. As far as guides were concerned, I just used two, one half way vertically and one half way horizontally which marked out the centre of the canvas for me. I imported the original graphics into Inkscape and used the Pen tool to trace over them. For each graphic, I created a separate Inkscape SVG (Scalable Vector Graphics) file.
As I was creating vectors to export to (rather small) bitmaps, there were a couple things I needed to bear in mind when tracing the original graphics to ensure good results. The first thing was I wasn't free to put black outlines anywhere I chose. The end result would be rather grey and muddy due to too much anti-aliasing being used on the exported bitmaps. To keep anti-aliasing to a minimum (and hence keep the graphics as clear and colourful as possible) I needed to ensure that the nodes for my lines and Bezier curves were on half pixel boundaries. The second was to ensure that all my outlines had a one pixel stroke width, and were completely black - sounds obvious, but easy to mess up.
One traced frog - click to enlarge
Once I had an outline for a graphic it was time to colour it in, and again it was Nancy Kominsky to the rescue. I used her technique of using three tones - light, medium and dark to fill each shape. Then, if necessary I'd add any highlights with light yellow and any lowlights with dark purple. The nice thing about Painting Along with Nancy in Inkscape is I don't have to put my spare colours into the fridge and cover them with cling film.
Incidentally, in case you think I'm joking about following Nancy Kominsky's advice, here's the Claptraps apple filled using a radial fill made up of my three tones - light, medium and dark red:
Where's the light coming from Alan?
And here are my three tones I used in the gradient fill editor :
Cadmium orange, vermilion and alizarin crimson...
Here is my purple lowlight and my lemon yellow and white highlight:
That's one teaspoon of purple, the colour...
And here is the finished apple - Nancy Style.
And no need to apply any varnish
And, just for you to compare, here are Nancy's apples:
Picture courtesy Rory Clark
So, after much colouring in but, sadly, no Alan Taylor to chat to while I was working, I had a finished set of graphics:
As seen in Fedora 13 Nautilus
And here are the finished graphics in place in the game:
Click to Enlarge
I was determined when working on the graphics that my input be as invisible as possible - Claptraps has bags of testpilotmonkey's character and I wanted to keep that. The graphics remain very much testpilotmonkey's, just coloured in slightly differently.
After showing testpilotmonkey my graphics, he said he'd like to use them in future releases of the games - which was very kind of him and made all the effort worthwhile. I'm hoping to spend more time on Claptraps and to return to it on this blog soon. In the meantime, why don't you download the game and have a play? You can get hold of it here.
No comments:
Post a Comment