Best Practices for Pixel Art

When talking about pixel art, most still continue to think that it’s retro and mainly used in ‘old’ games. Contrary to belief, it’s more modern than ever before. No longer limited to software or hardware capabilities, new and popular games have adapted to new and creative forms of pixel art from incorporating shaders and gradients (e.g. Hyper Light Drifter) to even 3D planes (e.g. Octopath Traveler) (Figure 14.1).

The relevance of pixel art to the game industry continues to boom as both the indie and AAA companies continue to produce pixel art games to cater to not only the people who grew up with pixel art games, but the new generation of people who can see the beauty in its surface simplicity. This chapter discusses the techniques and guidelines on how to approach pixel art and how to go about animating it.

The ‘rules’ of pixel art originated from the restrictions of the hardware which could only display 8-bit or 16-bit graphics in the past. If a game wished to display any graphics, pixel art was the only option. Artists had to think of creative ways to utilize the limited colours and canvas size in order to produce sprites that render as the graphics in the game. Today, with technology so advanced, pixel art has now become a choice of style instead, artists are no longer constricted by colours or size of sprites. So what really is the pixel art of today? The ‘rules’ of pixel art have evolved through its growth. No one can really state if a piece of art is good or bad

FIGURE 14.1 Background art for game in development, Tiny Dice Dungeon 2 (© Springloaded, 2019. With permission.)

because ultimately, all art, including pixel art, is subjective. However, there are still some fundamental practices of pixel art are respected throughout its evolution. Before we proceed, do not get me wrong! I personally feel that artists should always be free to break the ‘rules’ in search of new, creative and original art styles. However, in this chapter, we will be focusing on a slightly more traditional outtake on pixel art. There are some guidelines that differentiates ‘good’ pixel art from ‘bad’ ones, read on to find out more!

Before we get started, you have to find a program to draw in! There are many available programs that support drawing pixel art today, some of which are even free editors that allow you to save your work online (for example, PiskelApp and Pixie). For me personally, I use Adobe Photoshop as I require the flexibility to do more than just pixel art in my line of work, however, feel free to experiment with different software or programs. It is important to find the one you are most comfortable to work with!

Now, getting down to the technicalities. First thing I would like to bring up is respecting the number of colours used in pixel art. To preserve the origins of pixel art where the number of colours are limited due to hardware, pixel art has generally evolved to still contain a limited number of colours per sprite or per art even though we are no longer limited by selective colours. Best pixel practices make use of as little colours as they can to still produce the balance of depth, perspective and content, depending on what is required. It is best to never use two colours too similar together in an artwork or a sprite. It will create a seemingly ‘dirty’ effect when viewed from far compared with a clean, easily distinguishable contour that reflects the purity of that pixel art. Since one of the difficulties of pixel art is ensuring that the viewer understands what it is you have drawn (especially if your sprite is really small), the cleaner the sprite, the easier it is to comprehend what that object is. Depending on what your sprite looks like, it might be better to completely remove a colour tone if it is too similar to another. Otherwise, you can choose to increase its contrast to make the two colours more distinguishable from each other.

In the example on the left, exhibit A contains more shading and colours compared with exhibit В (Figure 14.2).

This results in В are much easier to read compared with A as the leaves of the plant in A are all lost in the mess of pixels. Especially when placed in a bigger scene, the cleaner the individual object, the less messy the image will look as a whole. Unless it is a purposeful art choice, you should consider being prudent about the number of colours you use in your sprites.

Some skilled pixel artists even use unexpected colours in the shading within their sprites, using complementary colours to produce an enticing artwork. Though this probably sprouted from the fact that they had only certain colours to choose from due to the hardware, nevertheless, the result is pleasing to the eyes and it is definitely worth considering to implement in your artwork. Complementary colour shading is not only used in pixel art, but is also widely used in 3D lighting, movies and so on. However, unlike the others, it might be slightly trickier when using it in pixel art. While complementary colours produce a high contrast, vibrant look, it might look too jarring, especially since there are limited pixels to work with, and we cannot use gradients to blend the colours naturally. So do exercise caution when shading and ensure that your pixel art works as a whole!

FIGURE 14.2 Exhibit A contains more shading and colours compared with exhibit B, making it more difficult to read.

Shading smaller sprites are simple enough to understand, but what about shading large areas, like the sky? When drawing large scale pieces of pixel art (for example, pixel concept art or pixel backgrounds in games), shading becomes a little trickier, and requires a very different approach compared with shading smaller sprites. As mentioned before, to keep true to the origination of pixel art, the number of colours and tones should be used sparingly to preserve the simplicity of the image. And yet, there comes a point in time when you would want to give an effect of a smooth transition colours. How does one make nice colour gradients with a limited number of colours and in pixel art to boot?

To create smooth colour gradients, pixel artists use a method called dithering. There are many types of dithering an artist can use, depending on the size or style the art piece has. Dithering is basically implementing a pattern of dots so as to create an illusion of two colours merging smoothly to one another (Figure 14.3).

I would say that the method of dithering is similar or perhaps even inspired by the traditional art style of Pointillism. Pointillism is an art method developed in 1886 in the era of Impressionism. Using Pointillism, artists created whole masterpieces of scenery and images, yet upon closer inspection, they are merely just patterns of dots of colours. Sounds like the basis of pixel art doesn’t it! (Figure 14.4 and Figure 14.5).

Dithering is a useful skill to blend your colours or even give the illusion of a new colour, similar to mixing two different colours of paints on your palette. This makes dithering extra valuable as you can use existing

FIGURE 14.3 Some examples of different dithering.

FIGURE 14.4 A simple colour pattern.

FIGURE 14.5 Paul Signac, 1909, The Pine Tree at Saint Tropez. (From Wikipedia, n.d., The Pine Tree at Saint Topez. Last modified 5 April, 2020. Available at https:// commons.wikimedia.org/wiki/File:Paul_Signac,_1909,_The_Pine_Tree_at_ Saint_Tropez,_oil_on_canvas,_72_x_92_cm,_Pushkin_Museum, _Moscow.jpg.)

colours in your art to create seemingly new ones, and that allows for a smarter management of your palette, especially since pixel art is about respecting the number of colours (Figure 14.6).

For purposeful blending, like shading skies, do make sure that you try your best to maintain the same pattern throughout the dither. Should there be a mistake in your dithering, it will ‘pop’ in the viewer’s eyes,

FIGURE 14.6 Adding two colours via dithering.

negating the results we are trying to achieve, which is to create a smooth gradient of colour (Figure 14.7).

The mistake in the dithering will cause a disturbance in the viewer’s perceived pattern and it will be very evident in the end results.

Also, do take note that dithering requires more pixel space. This is why dithering is usually not used in small sprites, but in large background pieces like sky or cliffs.

On the topic of dithering, you can also use dithering to produce different surface materials of objects. Depending on whether you want a wooden box or a metal one, you can use different techniques of dither to create different textures on the object. Dithering more shades creates the illusion of a rougher texture. For example, when it comes to shading metal surfaces (which tend to be smoother), less dither should be used to shade it compared with the rougher surface of a wooden texture. A metal texture should also have more highlights to simulate light bouncing off its edges. To make wood textures more organic, you can also choose to go with a ‘messy’ dithering with fewer patterns to make it seem more natural. Depending on the texture of your object, dithering them right can give the viewers a more enhanced ‘feel’ of the objects in your art, if that is what you aim to achieve (Figure 14.8).

Each material has their own characteristics that you can differentiate through their individual dithering and shading. Once you understand what those are, you will be shading and creating different textures in no

FIGURE 14.7 Make sure you maintain the same pattern throughout the dither: Mistakes will be easily spotted!

FIGURE 14.8 Dithering can also be used to effectively enhance textures.

time! If you are new to art or pixel art, I would recommend looking at how other artists dither or shade their art as a reference starting point and learn from them that way. Practice is king!

The next point I would like to talk about would be edging. If you haven't already realized from our discussions above, pixel art is more mathematical than most people perceive. It is all about simplicity and patterns. In general, we should draw the edges of our pixel art in a pattern, for example, diagonals should be drawn in an equal number of pixel lengths (refer to Figure 14.9).

As for curves, they should follow an ascending or descending length of pixels (refer to Figure 14.10).

In following these steps, the pixel art as a whole will look cleaner and more consistent. This is important as it makes it easier for people to decipher the shapes and therefore the content of the pixel art, especially in a bigger picture.

Sometimes it is not always possible to achieve drawing in equal pixel lengths when dealing with diagonals, especially when you intend to produce a smooth animation of a diagonal. In the example of an animation of a swinging stick, good pixel artists come up with creative ways to counter

FIGURE 14.9 Edges should be drawn in a pattern.

FIGURE 14.10 Curves should follow an ascending or descending length of pixels.

this issue. One method would be to reduce the number of frames of animation. This method is not as recommended as it forces a quicker animation (Figure 14.11).

Depending on the requirement of your sprites, it might turn out snappy due to less tweening between the key frames. But hey, whatever works does the trick! It can work for some cases of an animation where framerates are fast enough to get away with a small amount of snappiness. This method should be considered on a case-by-case basis.

Another more commonly practiced method is to use action blurs to cover up the pixel edges as the stick makes its swing. In using action blurs, you are still able to achieve a smooth animation without worrying about

FIGURE 14.11 It is not always possible to achieve drawing in equal pixel lengths when dealing with diagonals. Reducing the number of frames may solve the issue but it will produce a quicker animation.

pixel ratios for the diagonal in each frame - you only need to animate the action blur to follow through its direction. This method is also used not just in pixel art, but in 2D art sprites. By using action blurs, you can further exaggerate the action by making it look bigger than it should be and without tweening a large number of frames between the animation. If you want a powerful swinging-weapon action, such as swinging a sword, you may want to consider using this form of animation! Many pixel art games, such as Scott Pilgrim vs the World, utilize this method to give their art a clean and polished look (Figure 14.12).

One other method would be to ‘cheat’ by using slight colour differences to still have the prominent pattern yet still contain the movement of a swinging stick (refer to Figure 14.13).

This method, once again, should be used subjectively. Since you have to respect the number of colours used in the pixel art, it might be tricky to utilize a new colour for the purpose of a smooth animation. If the new colour used for the animation is already present in the rest of the scene, one can consider this method to avoid breaking the pixel ratios during tween frames. Usually for this method of implementation, it will work better on animation with a stiller silhouette, such as falling water or molten lava, where the movement or animation is more prominent within its area of art.

However, there are games that implement code to produce a clean rotation in pixels. Some people would argue that this method breaks

FIGURE 14.12 An example of‘action blur’.

Changes in colour can also be used to emphasize animations.

FIGURE 14.13

284 ■ The Digital Gaming Handbook traditional pixel art; whether it was a development choice (so less animation had to be manually curated) or an art style, it works in the case of the mobile game Crusader’s Quest. Using pixel limbs and weapons rotating smoothly through code around joints of hero sprites, they made it look endearing, with smooth movements of their characters prancing around the battlefield.

Still, these are merely guidelines. Artists are constantly thinking of new and stylized ways to draw and animate their art, and this stems to stunning masterpieces all over the world. One particular piece of pixel artwork gained considerable popularity due to the interesting way it had been animated. A beautiful scenic waterfall drawn by one of the pioneers of pixel art, Mark Ferrari, gives the illusion of an animated, moving waterfall. However, the twist was that he did not animate his pixels individually. It is in fact produced by colour cycling each pixel of the water, resulting in a wave of smooth transiting colours that resembles a life-like, realistic waterfall.

Once you understand the basic technique of pixel art, you can explore more modern and creative fusion of the art styles, like using gradients or overlays to further enhance the art. In Figure 14.14, the sky colour is a smooth gradient and there are alpha glows in the light of the giant machine.

This method has become more common and prevalent in pixel art games that have been released in recent years. Unconventional though it may be, it nevertheless still produces a wonderful effect when done right!

FIGURE 14.14 In-game art for a game in development, Obelus.

Ultimately, pixel art, like any other art, is subjective. Despite the rules and guidelines, people all over the world are still coming out with new and innovative ways to make pixel art look attractive without fully conforming to the norm. I personally recommend using the guidelines and theories to be your starting point if you are new to pixel art. But once you get comfortable with pixels, you should embrace your inner artist and just go crazy with anything you can come up with to create new techniques and masterpieces! Who is to say what is right or wrong when it comes to art: in the end, it boils down to people appreciating it on your canvas or in a game! I must stress though, that practice is the most important key to get good at pixel art (or anything else for that matter!). Keep learning from other artists, adapt to new techniques and maybe even new software to keep improving your skills. Practice makes perfect!

LUDOCRAPHY

• 1. Hyper Light Drifter, Heart Machine, 2017.
• 2. Octopath, Square Enix, 2018.
• 3. Tiny Dice Dungeon 2, Springloaded, 2019.
• 4. Obelus, Springloaded, in development.