= Alpha channels with GIMP

:Author: Seth Kenlon
:Email: <[email protected]>
:Revision: 1.0

Whether you're programming a game or an app with https://opensource.com/article/17/10/python-101[Python] or https://opensource.com/article/17/4/how-program-games-raspberry-pi[Lua], you're probably using PNG graphics for your game assets.
A feature of the PNG format is the ability to store, unlike a JPEG, an alpha channel.
Alpha is, essentially, the "color" of invisibility or transparency.
Alpha is the part of an image you _don't_ see.
If you were to draw a doughnut, for instance, the doughnut hole would be filled with alpha, such that you could see whatever was behind it.

A problem that often arises is how to find the alpha part of an image.
Sometimes, your programming framework, whether it's https://opensource.com/article/18/4/easy-2d-game-creation-python-and-arcade[Python Arcade], https://opensource.com/article/17/12/game-framework-python[Pygame], LÖVE, or anything else, detects the alpha channel and treats it (after the appropriate function calls) as transparency.
That is, it renders no new pixels where there's alpha, leaving that donut hole empty.
It's 100% transparent, or 0% opaque, and functionally "invisible".

Other times, your framework of choice and your graphic asset don't agree on where the alpha channel is located (or that an alpha channel exists at all), and you get pixels where you wanted transparency.

This article discusses the most sure-fire way I know to work around that.

== Chroma key

In computer graphics, there are a few values that contribute to how a pixel is rendered.
Chrominance, or _chroma_, describes the saturation or intensity of a pixel.
The technique of the _chroma key_ (also known as _greenscreening_) was originally developed as a chemical process, in which a specific color (blue at first, and later green) was deliberately obscured by a _matte_ during the copying of a film negative, allowing another image to be substituted in where there once was a blue or green screen.
That's a simplified explanation, but it demonstrates the origins of what in computer graphics is known as the alpha channel.

An alpha channel is information saved in a graphic to identify pixels that are meant to be transparent.
RGB graphics, for example, have a Red, Green, and Blue channel.
RGBA graphics contain Red, Green, Blue, and Alpha.
The value of alpha can range from 0 to 1, with decimal points being valid entries.

Because an alpha channel can be expressed in several different ways, relying on an embedded alpha channel can be problematic.
Instead, you can pick a colour and turn it into an alpha value of 0 in your game framework.
For that to work, you must know the colours contained in your graphic.

== Prepare your graphic

To prepare a graphic with an explicit color reserved exclusively for a chroma key, open the graphic in your favourite graphic editor.
I recommend http://gimp.org[GIMP] or https://glimpse-editor.github.io[Glimpse], but https://opensource.com/article/17/2/mtpaint-pixel-art-animated-gifs[mtpaint] or https://www.pinta-project.com[Pinta] or even http://inkscape.org[Inkscape] can work just as well, depending on the nature of your graphics and your ability to translate these instructions to a different tool.

For this article, start with this graphic:

image:tux.png

== Select the graphic

Once the graphic is open, right-click on its layer in the layer palette.
From the pop-up menu, select *Alpha to selection*.
If your image has no built-in alpha channel, then you must create your own selection manually.

image:gimp_alpha-to-selection.jpg

To create a selection manually, click the Paths tool from the toolbox.

image: gimp_path-tool.jpg

Using the Path tool, move your mouse around the graphic, clicking (and releasing, do not drag) at each major intersection of its outline.
Don't worry about following curves, just find the major intersections and corners.
This creates a node at each point, with a straight line drawn between them.
You don't need to close your path, so when you reach the final intersection before the one where you started, you're done.

image: gimp_path-create.jpg

Once you've created your outline path, go to the *Windows* menu and select *Dockable Dialogs* and then *Tool Options*.
In the Tool Options panel, select *Edit (Ctrl)*.
With this activated, you can edit the paths you've just drawn by clicking the lines or nodes and adjusting them to better fit your graphic.
You can even give the lines curves.

image:gimp_path-edit.jpg

Now select the *Paths* panel from the *Windows* &gt; *Dockable Dialogs* menu.
In the *Paths* panel, click the *Path to selection* button.
Your graphic is now selected.

= Grow selection

If you feel your selection is too tight, you can give yourself a little slack by growing the selection.
I sometimes do this when I want to impose or thicken a border around a graphic.

To grow a selection, click on the *Select* menu and choose *Grow*.
Enter a pixel value and click *OK*.

= Invert selection

You have your graphic selected, but what you actually want to select is everything _but_ your graphic.
That's because you're creating an alpha matte to define what in your graphic is going to be replaced by something else.
In other words, you need to mark the pixels that are going to be turned invisible.

To invert the selection, click on the *Select* menu and choose *Invert*.
Now everything but your graphic is selected.

= Fill with alpha

With everything but your graphic selected, choose the colour you want to use to designate your alpha matte.
The most common colour is green (as you might guess from the term "green screen").
There's nothing magical about the colour green, or even a particular shade of green.
It's used because humans, frequent subjects of graphic manipulation, contain no green pigment, so it's easy to key out green without accidentally keying out part of the central subject.
Of course, if your graphic is a green alien or an emerald or something that _does_ contain green, you should use a different colour.
You can use any colour you want, as long as it's a solid and consistent colour.
If you're doing this to many graphics, your choice should be consistent across all graphics.

image:gimp_foreground-colour.jpg

Set your foreground colour with the colour value you've chosen.
To ensure that your choice is exact, use the HTML or HSV representation of the colour.
For example, if you're using pure green, it can be expressed in GIMP (and most open source graphic applications) as 00ff00 (that's 00 Red, FF Green, and 00 Blue, with F being the maximum amount).

image:gimp_colour.jpg

Whatever colour you choose, make sure you take note of the HTML or HSV values so you're using the exact same colour for every graphic.

To fill in your alpha matte, click the *Edit* menu and choose *Fill with FG color*.

= Flatten and export

If you've left a border around your graphic, set your background colour to the colour you want to use as the border stroke.
This is usually either black or white, but it can be anything that suits your game's aesthetic.

Once the background colour has been set, click on the *Image* menu and select *Flatten image*.
It's safe to do this whether or not you added a border.
This process removes the alpha channel from your image, filling in any "transparent" pixels with the background colour.

image:gimp_matte.jpg

You now have an image ready for your game engine.
Export the image to whatever format your game engine prefers, and then import it into your game using whatever function calls required.
In your code, set the alpha value to 00ff00 (or whatever colour you used), and then use the game engine's graphic transforms to treat that colour as an alpha channel.

= Other methods

This isn't necessarily the only way to get transparency in your game graphics.
Check your game engine's documentation to find out how it tries to process alpha channels by default, and when you're not certain, try letting your game engine auto-detect transparency in your graphic before you go about editing it.
Sometimes, your game engine's expectations and your graphic's preset values happen to match, and you get transparency without having to do any extra work.

When that fails, though, try a little chroma key.
It's worked for the film industry for nearly 100 years, and it can work for you too.