Overview
Describes a step by step process to create a bump map for your sprite sheets using Paint.Net.
Prerequisites
You must have a basic understanding of the Paint.Net image editor and how to make functional mods for Airships: Conquer the Skies. If you require assistance, there are plenty of other guides that show in-depth how to make a mod.
Basic documentation of Paint.Net can be found on their website:
[link]
For tutorials relating to Paint.Net and effect downloads you may want to download, I suggest using the forums:
[link]
This guide also assumes that you already have a spritesheet json file in your mod that references the future filename of your bump map.
Standard Color Palette
Airships does not restrict you to follow a specific set of rules when designing your sprites in regards to color, but does recommend a default palette that will help your mod to better blend with the game’s graphics. Additionally, sticking to the recommended palette will mesh better with your bump map.
Airships Color Palette:
Alternatively, you can refer directly to the official image of the palette:
Setting Up the Basic Bump Map
To begin, I’m going to use the small ammunition storage sprite from the vanilla game to simplify the process.
Original 33×16 Image:
You will want to keep whatever sprite sheet you already have unmodified. Make sure you do not shade in the original image, that’s the bump map’s purpose. If you notice, the vanilla image is composed of solid colors, ready to be outfitted with the various effects soon to follow.
Assuming you have Paint.Net already open, create a new image 1024×1024 pixels in dimension, and save it as the same name as your spritesheet, or however you fancy, with the conventional name extention of “_bump”. Be sure to save in pdn format because you will want to have an unflattened version of the image for any changes you might make. For example, if my spritesheet’s name was “textures.png”, I would name the new image “textures_bump.pdn”.
Proceed to add three new layers to your bump template below your original sprite, and name them from top to bottom:
- Vertical
- Horizontal
- Reflection and Glow
Color in the layers with the following solid colors respectfully:
- 0x800000
- 0x008000
- 0x00005C
You should have something visually similar to the following:
You are now ready for the production stage.
Creating the Bump Map
Now that you have the basics established, we can move on to explaining what exactly happened. A bump map in Airships is composed of three channels that serve different purposes. We named the layers after their purpose. The vertical and horizontal layers identifies how light appears on your sprite’s surfaces from those particular angles. The reflection and glow layer describes how metalic or shiny a surface is. We colored in the backgrounds with a specific color which is considered to be neutral by the game’s engine. Airships uses another color palette to determine how strong light or reflection is on each surface specifically for bump maps:
Bump Map Palette
Alternatively you can download the color palette example yourself:
Now that we have a basic understanding of what each color to their respective channels indicates, we can now shade in our bump map. Keep into considering how you outline various parts of your bump map. As described by the developer of Airships, you can try to imagine what the two-dimensional image would look like if a red/green light was casted onto the surface of the image. For example, if we want to indicate how the ammunition sprite would look like in the vertical channel, we may come up with the following result:
According to the palette, the brightest red highlights will indicate a tint in their respective positions on the original sprite. I would suggest that you overlay your base image over whichever channel you are editing to make it easier to identify where to highlight. Make sure you uncheck all other channels you are currently not editing so they don’t get in the way. For comparison, here is the same image with the base image overlayed:
If we attempt the same method on the horizontal layer, you may end up with something similar to this arrangement:
With the most tedious layers out of the way, we can now focus on the metal layer which defines which surfaces will appear shiny or dull against light. All we have to do is shade in areas that are supposed to be metalic without consideration to any angles:
Finalization
Now that we have created three channels for our bump map, we are ready to create the composite image. Making sure our channels are still in the correct order:
- Vertical (Red)
- Horizontal (Green)
- Reflection and Glow (Blue)
We can edit the vertical and horizontal layers’ blend modes to additive mode. This will ensure that our channels combine properly.
Once you have done so, you should end up with an image that looks something like this (make sure your base image is not visible. It will get in the way.):
It is important to note that not all bump maps will look alike. You may shade your work differently than others. I chose to use a vanilla texture so that the format most closely resembles the actual game’s appearance. With the final image produced, you can flatten the image and save it as a portable network graphic. With two images produced (the pdn and png files), you can safely edit your layers independently in the template and overrite the standard png file when you are finished.
Ending Notes
Now you could have used GIMP 2 instead, but this guide was specifically designed towards Paint.Net users like myself. There are some advantages to using GIMP 2 or even photoshop for that matter. Those programs can independently edit each color channel seperately eliminating the need for two files. Please consider that I will not be making a GIMP 2 or Photoshop tutorial because I’m not particularly skilled in GIMP and I don’t own Photoshop, nor plan to.
A plugin I recommend that you can use to extract specific channels from already made bump maps (which I used to accurately duplicate the vanilla asset):
[link]
One of the other various tutorials that explains this guide in a GIMP format:
[link]