Freecraft - Building Sprite HowTo

Introduction

This little howto will give you an example on how to create a building sprite for Freecraft. We will use Blender and The Gimp to create the sprite. All source images (.blender and .xcf files) are available by clicking on the images.

Sketching

Before we can start with creating the final sprite, we first have to know what to paint and how it should look like. In this tutorial we pick the townhall as an example. After some thinking and looking at the Warcraft I and II art. We come up with a sketch like this:

Prototyping

After creating the sketch we can continue with the second step, the prototyping. Here we will create a version of our sprite which will be in the right perspective and with the right propotion. The prototype will later act as a drawing guide for the final sprite. For the prototype creation we will use Blender along with an example file which already contains the correct perspective. The file is available here.

After loading the file we start by editing it and add a few cubes to it, resize them and arrange them to match our sketch. All the cubes will be need to be turned into wireframe for rendering. The result looks like this:

Blender file for the townhall.

Sprite creation

After rendering the prototype we load it into The Gimp, crop it and scale it if necessary. The prototype is now ready to guide us by the sprite creation.

Outlining

The first step now is to create the outline for the sprite, this can be easily done by adding a new transparent layer and painting on that with the base color of the sprite. After the base is set we use a black one pixel airbrush to sketch up some details in the sketch, it is recomment that you do that on yet another layer. The result will be something like this:

Detailing and shadowing

After having set the outline, we can add a little bit more details and the shadow. The shadow can be simply created by adding another transparent layer and painting with 100% black on it, to get a better preview, one can turn the layer transparency to ~35%.

Coloring

The next steps will be the coloring and part of the lighting of the image. Coloring can easily happen on the outline layer, turn on the 'Keep trans' option for the layer where necessary.

Finalization

Cleanup

The above image can of course use a little bit more details, but for this tutorial we will let it stay it like that and go to the final step of converting it to be usable in the game. Since we have painted the whole image in many different layers, we can easily, remove the Blender prototype, the white background and merge the building layers, but be sure to keep the shadow layer seperate.

Shadow conversion

Since Freecraft doesn't support a alpha-channel, we have to convert the shadow layer to a dithered image. Since Gimp can't do that nicely, we do it kind of manuall. Our shadow layer looks currently like this (I haven't painted the shadow below the building, since we don't need that):

To get the shadow done, we simply copy&past this shadow image into our building image.

Then we go back to our real shadow, select 'Alpha to Selection', invert the Selection go to the dithered image and to a clear with the selection in shape of our shadow. The shadow is now final.

And we can now finally 'merge all visible layers' and then 'layer to imagesize'.

Size Fixing

Our image currently isn't in the right format, it has to be a multilpe of 48, so we adjust our canvas size for that. The townhall has to be 144x144, so we chose that. Now we only have to center the image a bit and are done with this step.

Color conversion

Freecraft needs a special palette for the gfx and we have to convert it to that. To ease that there exist a conversion utility here. You just need to convert your image in Gimp down to 228 colors and run your image through the utility. In theory your image is now ready for usage in Freecraft, but in practice it is not.

Missing things

Different Building Stages

Even so this guide is finished now, your image might still not be complety. Building images in Freecraft often/always do not contain of a single building image, but of multiple subimages, which representate the different stages of the building (under construction, busy stage, etc.). If your building need that, just paint the corresponding building, add both building images to a single one of the double size before the color conversion and continue then with the color conversion.

Player Color

The player color is also still missing, the player color is a special color (to be exacly four colors) which change automatically to the color of the player. The palette has four reserved colors for the different brightness of the player color. Since that requires using the indexed palette, adding them has to wait till the image is completly finished and in a usable Freecraft format.



Copyright © 2002 Ingo Ruhnke <grumbel@gmx.de>
Verbatim copying and distribution of this entire article is permitted in any medium, provided this notice is preserved.
$Date: 2002/07/05 10:02:53 $