# Pixel Art & Animated GIFs with mtpaint
by Seth Kenlon
If there's one thing that indie games like
[Mr. Rescue](
http://tangramgames.dk/games/mrrescue/) and [Don't Be
Patchman](
http://store.steampowered.com/app/378410/) (the world's
first and only SteamOS exclusive) demonstrate, it's that retro is
hot. Specifically, pixel art is hot. Developers like it because it's
got a low barrier for entry, so if you don't have an art department
eagerly awaiting to supply assets for your [open source
game](
https://love2d.org), you can realistically do it yourself
without spending a year learning complex artistic tools that you may
never master (knowing Krita or Blender doesn't necessarily mean you'll
be *good* at them; I'm living proof of that!). Users like it because
of a little thing called [nostalgia](
http://mamedev.org), and the
feature that games with simple graphics can be run on low-end
hardware.
There's no shortage of software that can create pixel art, but most
are either grossly over-featured, meant for photography or graphic
design, or under-developed, being meant for children or for basic
graphical tasks. That's what makes
[mtpaint](
http://mtpaint.sourceforge.net) great: it's a tiny
application (about 391k, compiled, assuming GTK is installed
separately) designed to run efficiently on specs as low as 200MHz CPU
with 16MB of available RAM, and its specialty is pixel art.
## Install mtpaint
Mtpaint is packaged and ready for Fedora, Debian,
[Slackware](
https://slackbuilds.org/repository/14.2/graphics/mtpaint/?search=mtpaint),
and many other Linux distributions. It's also compatible with Windows.
Its codebase is maintained by Dmitry Groshev at
[github.com/wjaguar/mtPaint](
https://github.com/wjaguar/mtPaint).
## Interface
The mtpaint interface looks familiar if you've ever used a basic paint
application. While the basics are as you'd expect, there are some
differences in how mtpaint sees your canvas when compared to, say,
[GIMP](
http://gimp.org) or [Krita](
http://krita.org). Since one of the
most fun things about mtpaint is how it makes pixel art easy and fun,
I'll concentrate on the features related to that, but don't let that
stop you from exploring all of mtpaint's many abilities.
The tool palette in mtpaint is the toolbar across the top of the
window. It contains most of the usual tools, such as a pencil tool for
freehand drawing, a paint bucket for fills, a text tool for text, a
ruler to make straight lines, some selection tools, and some effects.
The colour palette is situated along the left side of the mtpaint
window. There are 256 blocks for your main palette, because mtpaint
defaults to an indexed colorspace. You can switch to a full RGB
colorspace in the **Image** menu > **Convert to RGB**, but for pixel
art, 256 colours ought to be enough for anybody (actually, pixel
artists of olde would have loved a rich palette of 256 colours).
## Pixels
Modern pixels (to say nothing of *subpixels*) are too numerous and
small to make true pixel art work the way it did back when monitors
were 800x600. The main thing that makes pixel art feel like *pixel
art* is its strict grid layout of squares that are either on or off
(there are no squares that are only half filled). There are two ways
to make this happen on modern hi-res monitors: magnify your canvas so
that you're working on the pixel level, or constrain your artwork to
big square brushes aligned to a grid.
If you're happy to emulate pixel art by painting on a grid, activate
the **Snap to Tile Grid** mode in the **View** menu. Choose your brush
style and size with the brush palette, next to the main colour
swatches in the top left corner of the mtpaint window.
If you want to actually work on the pixel level, then mtpaint is happy
to help. A dropdown menu for magnification is located in the top
toolbar. Zoom in as much as you want, and start painting pixels!
## Indexing, channels, and alpha
The default canvas in mtpaint is black. It's not that funky
checkerboard that's become a shorthand for transparency that seasoned
photo editors are used to, and it's not the paper white that digital
painters are used to. This is significant to you especially if you're
designing something, like sprites for video games, and need an alpha
channel so that . I'll talk more about the alpha channel later. In the
meantime, you can fill the canvas in with whatever colour you want
with the paint bucket tool.
The alpha channel is difficult for people to grasp, since it is, by
its very nature, invisible. Any attempt to make it visible confuses
people, because it defies its own concept. If it helps, think of **the
alpha channel**, whatever that is, as the Green Screen of graphics
applications, with the added bonus that you don't have to do the Green
Screen removal, as you do in a video editor.
You do, however, have to define what that "green screen" is going to
be, so mtpaint knows what indexed color to drop in favour of alpha
invisibility. The default for mtpaint is black, situated at index
0.
By default, mtpaint replaces Index 0 black with alpha. There's some
flexibility. For instance, using the green from Index 2 instead of
black from Index 0, you can tell mtpaint's **Save As** function to use
Index 2 as alpha instead of its default 0 value:
The alpha index setting is in the **Save As** dialogue window.
If you're using mtpaint for video game graphics, set your alpha
channel to the same index number so that your video game engine keys
that channel to transparency (unless your engine does that
automatically; not all do).
If you don't need an alpha channel, set index to -1.
You can change the transparency index setting in **Image** >
**Preferences** > **Files** > **Transparency Index**.
Since mtpaint's default is to use Index 0 as its alpha placement, it's
easier to just use Index 0 black for index manipulation unless you're
used to working in an indexed colorspace.
## Color
Whether or not you're working with an indexed colorspace, the color
swatches down the left side of mtpaint are customizable as either your
literal color map (in the case of indexed colorspace) or a handy
reference for your most-used swatches.
To change the color of a swatch, double click the index number to the
swatch's left. This brings up a standard color picker.
You can move back and forth between indexed color and a full RGB space
through the **Image** menu. Using RGB unlocks any index that was
previously applied, so if you open an image and it only has 8 slots
for colors, just convert to RGB, and then back to an index space using
a wider spectrum.
## Layers and animation
Who doesn't love animated GIFs? Well, stop loving them and start
creating you own in mtpaint!
Animated GIFs are actually pretty easy to generate if you do them as a
flipbook. Draw one frame, save it, draw the next, save it, and so
on. When you have all the frames you want, use an application like
[gifsicle](
https://www.lcdf.org/gifsicle) to string the images together.
The problem with that approach is that you're painting each frame by
hand. For 24 frames, you paint 24 images.
With mtpaint, you can animate more efficiently. You can tween using
the layer interface. If you've ever done paper cutout animation, the
principle is the same. It's easiest if you have artwork at the ready,
so if you don't have assets yet, spend some time to create or gather
some from a Free Culture site like [OpenGameArt](
http://opengameart.org).
When you're ready to animate, create an empty document in mtpaint and
open your first image. Usually, your initial image will be the
backdrop (the part that doesn't change) of your animation, but it
doesn't have to be.
Press the **V** key on your keyboard, or go to the **View** menu and
select **View Window**. This splits the mtpaint window into two
parts. The left is your canvas, as usual, and on the right is on your
layer interface.
From the **Layers** menu, select **New Layer**. Accept the default
settings for your new layer. When the new layer is added, it gets
added over your first. Don't panic, it didn't just erase your first
image, it just obscured it.
Now that a new layer exists, you can place something into that
layer. You may know this as **Open As Layer** if you're a GIMP user,
but in mtpaint, it's (somewhat confusingly) just **Open**. Open an
asset, ignoring the warning that you might lose all of your work in
that layer, since the layer's empty anyway.
Repeat this process for each asset you want to use in your
animation. It's common to call such assets "sprites" in both animation
and video game development. Here's a backdrop layer with two sprites,
for a total of three layers:
Before continuing, save each layer individually, even if they already
exist on your hard drive. Make a dedicated directory on your drive for
this project, and then click on each layer and save it from the
**File** menu. Once everything is saved, create a dopesheet by
navigating to the **Layers** menu and select **Save As**. The layer
arrangement gets saved as a plain text file, and it's where mtpaint
records each movement that your sprites make.
Now that you have a backdrop and some layers with your actors and
props, and it's all saved into a dedicated directory, all that's left
to do is animate.
In the layer panel (the one on the right), click and drap your props
and actors within your backdrop image. For each movement you make, go
to the **Layers** menu and select **Set Key Frame**. Click OK to
accept the default key frame number.
Move your sprites and set a new key frame. Since the point of tweening
is that you don't have to animate every single frame, you can control
how much animation happens between key frames by moving your sprites
from their starting position to their end position, and incrementing
the **Key Frame** count by the number of steps you want mtpaint to
tween for you.
In other words, if you want your actor to move across the screen in 6
"steps", then move your actor to its end point on screen and then
select **New Key Frame** from the **Layers** menu and create key frame
number 6. For faster motion, you might enter 3 instead. For slower
motion, you might enter 9.
### Exporting animation
When you've finished your animation, select **Configure Animation**
from the **Layers** menu. Set the end frame to the number of key
frames you've created, and then click the **Preview** button. If
you're happy with the way your animation looks, click the **Create
Frames** button to write out all the frames, key frames and in-between
frames alike, to disk.
To save the final animation as an animated GIF, click the **Save**
button.
## Pixelated is beautiful
Pixel art has a retro charm to it, but I think its appeal goes beyond
memories of Zelda and Metroid. Pixel art is mapped and structured;
sure, all bitmapped graphics are, but the thing we call "pixel art"
makes it obvious. You can "see" the pixels, the shading, the tricks
the artist had to resort to in order to suggest details that can't be
rendered in 32x32 grids. Learn to embrace it, but most of all, learn to make it!
