Choosing a good size for your pixel art can be
quite difficult. In this video I’ll be going through what canvas sizes will best fit your pixel
art, how to correctly size tile-maps and finally, how to be efficient with your limited pixels.
I’ve labelled all the sections of this video with timestamps, so if you want to skip a part,
or you’ve come back for a specific section, just click the links in the description.
Also I just want to say that a lot of the information in this video is from my head, so
there might be some parts that aren’t correct to strict pixel art rules, instead
they are just my take on the topic. Sizing your Character:
Let’s begin by talking about character sprites. Generally, I think that most of your tile
maps and other sprites should be based on your main character, because your protagonist
will be the asset that players see the most. And this way, everything will be
scaled correctly from scene to scene. In game design, a common way for developers
to build a scene is to use something called a ‘tile-map’. A tile map, or tile-set is a grid of
squares containing all of your individual assets and can easily be used to quickly generate
terrain and levels. In most cases, all of your individual tiles should be the same
size, and the content of the drawing should be contained within the space of the tile.
For a cartoon or more comical game, you want your character to be about the same
size as a tile, maybe a little bit smaller. For realistic games, usually the character will
be fairly small compared to their surroundings, so a character design smaller than a tile would
make sense. Also, the size of the protagonist in relation to the world can be used to create drama.
Larger surroundings and antagonists can give the game a dramatic, dangerous feel. To contrast this,
making your character pretty big in terms of both the screen and the world can give the impression
that your protagonist is more competent. Choosing a Tile-map size:
So, once we’ve decided how big our character should be relative to our tile-map, let’s decide
on a size for the tile-map. There are some common sizes for tile maps that you might have
heard before, and they go up in powers of two. The smallest is eight by eight pixels, a
really uncommon size that is too small for most applications. Most of the art you can create
in this scale will be very stylised, and therefore better for games with a simple idea. If you’re
making a lore-heavy fantasy game with emphasis on items, tools, and character expressions,
8 by 8 might not be the best size for you. However, if you’re just making a simple platformer
game, this size is perfect for beginners. Going up one size, 16 by 16 pixels is probably the
most commonly used size for pixel art in general. This is the best option for both
top-down and side-scrolling games, because you can get a decent amount of detail
without having to draw a large number of pixels. 32 by 32 pixels is less common but still a
really good choice for many games. At this scale it becomes easier to give your sprite more
detail, however if you are developing a game, it will take much longer to complete all the
assets you need. If you are just starting out with pixel art, I would recommend doing a couple of
characters in 16 by 16 before moving to 32 by 32. Finally, we have the larger canvas sizes, 64 by
64 and upwards. While characters of these sizes can lend themselves to more artistic sprites, it
is important to remember how big your protagonist will be on a screen. If the tile-map is large in
resolution, then each pixel will become smaller, making the art less like pixel art and more
like realistic imagery. This can remove the charm of the game, as the main appeal of pixel
art is its retro aesthetic and simplicity. This graph shows the relationship between the
quality of the artwork and the resolution. It peaks at 16 and 32, which I believe are
the optimal canvas sizes for pixel art, and dips at around 64, where you start to get
a cross between realistic images and pixel art. Here you get a very strange scale, where it’s
almost big enough to be a realistic image, but you can still see the individual pixels. Materials at different Scales:
Once a tile-map size is selected, you can begin work drawing. At such
a small scale, every pixel matters, so we need to be very selective with
what we keep and what we throw away. For different sizes, each pixel
will represent a different thing. For example, in this 8 by 8 rock tile, one pixel
is used for an entire stone, whereas if you were to draw this same tile in a 32 by 32 size,
multiple pixels could make up the same rock. So, when drawing in a bigger canvas size, use
multiple pixels to illustrate a material, when using a small canvas size, less
pixels can indicate the same material. You can see here how the rock
tile looks in each tile-map size. Using your Pixels:
Drawing characters at small scales can be quite difficult and including
all the aspects you need can be even harder. Before we draw a character, we first need
to decide what is crucial to be included. Generally, the main purpose of a sprite is
to visually represent what they’re doing, and for their size and animations to make
for enjoyable movement and gameplay. So, if the character doesn’t indicate what
they’re doing or isn’t fun to control, I don’t think it will be a successful sprite.
In this example, I’ll be drawing a ghost in 16 by 16 pixels. For a ghost, the two necessary
features are the facial expressions and movement. Anything else is just for aesthetic purposes.
Let’s start with the silhouette of the ghost, because it’s important that the character
is recognisable from its outer shape. Then we need to decide if we want an outline or
not. An outline can help separate the sprite from the background, and add some definition, but
it will use up more of your pixels. For this sprite we’ll use an outline because the outer
shape is an important part of the character. If we were doing 8 by 8, we wouldn’t use an
outline because there wouldn’t be enough space. Then, a facial expression can be drawn
in the centre. Because we are working with such a small scale, some 2-by-1
pixel rectangles can represent the eyes. At this stage, it might be a good idea to
experiment with a couple different expressions. I’m also adding some hands because I think they
might be useful for weapons later down the line. Then you can fill the areas in with some
flat colours, before adding some shading. Use a solid white colour to make some highlights
where your sprite will receive the most light. Finally, just go in with a couple more colours to further push the shadows back
and bring the highlights forward. That’s our 16 by 16 pixel ghost. While there
may be some details that aren’t quite perfect, it’s important to keep in mind that the
image will be quite small in a game setting. Animating your Character:
For our Ghost, the crucial part of the animation is the depiction of the movement. We’ll need to
show how the ghost is made of a fluent material. When I’m animating a character, I usually
like to start with the outline. This way, it’s easier to focus on animating the movement,
rather than rendering. In this example, I gave the bottom of the ghost some movement once it had
stopped, to give it a loose, flowing effect. Once I was happy with the movement, I rendered
each frame, and the animation was complete. In this case, I used the image from before
as a guide for rendering all the frames. And that’s how to make a 16 by 16 sprite. Summary:
In Summary, When creating your tile maps and
assets, you should base them off your character design and size, as this
is the one reoccurring asset of the game. Tile-maps can be extremely useful for
quickly generating terrain and levels. The common tile-map sizes are 8 by 8, 16 by 16,
and 32 by 32. Very rarely is 64 by 64 used. When designing, keep in mind that the value of a
single pixel will be different at different sizes. Always remember the main purpose of a sprite
is to visually represent what they’re doing, and for their size and animations to
make for enjoyable movement and gameplay. Good luck with your pixel art and I
hope this video helped in some way. Hey, thanks for sticking around til the
end. Special thanks to 'howisurday' for suggesting this video idea. If you want
me to make a tutorial video or video in general about something specific, leave
a comment below and I might get to it.
