Dabe Alan

The art of modern retro: how indies can create wonderful pixel art

The art of modern retro: how indies can create wonderful pixel art

Being a small indie game developer is all about making efficient use of your time and talents. Lacking the manpower and resources that a larger company might possess, an indie team can't do everything – they must focus on what they deem to be most important. Early on, we at Zeboyd Games decided that rather than try to compete with studios much bigger than us with modern graphics, we would start with a lower resolution “retro” look for our games and then use that as a basis for future improvements. Why go with a lower resolution look? Well, to begin to understand that question, let's take a look at some common resolution sizes used with TVs and various video game systems. 160x144 (Game Boy) = 23k pixels 256x224 (NES) = 57k pixels 256x192+256x192 (DS) = 98k pixels 480x272 (PSP) = 130k pixels 640x480 (480p) = 307k pixels 960x544 (PS Vita) = 522k pixels 1280x720 (720p) = 921k pixels 1920x1080 (1080p) = 2,073k pixels 4096x2160 (4k) = 8,847k pixels From the lowly Game Boy's display to the 4k display (which makes sense if you're using a projector or enormous screen), the total number of pixels displayed on screen at one time goes up drastically as you work your way through the generations. As gaming hardware improves and total screen resolution increases, art and animation requirements increase thus demanding more of an artist's time. As art assets and animation complexity increases, you start to put greater demands on memory and performance thus demanding more of the programmer's time as well. One such way to reconcile current technology with a limited indie team’s time and resources is through a manageable presentation like the retro style. However, we did not choose a retro presentation purely because it was more manageable. It also fits the theme of our games and designs. By going with a retro visual theme, we show a clear connection to the games of the past that inspired and delighted us, even as we seek to improve upon their design with modern methodologies. RPGs: Retro Evolved is our mantra (to borrow a subtitle from Geometry Wars). Through an iterative process, we decided that we would use a resolution of 720p but with a pixel size of 3. This meant that every pixel in our art assets would actually be drawn as a 3x3 set of pixels on the screen. This effectively gives us a screen resolution of 427x240 - similar to the resolutions used on a lot of the 8-bit and 16-bit video game systems, but in widescreen. It's also very similar to that used in the PSP – it's a shame that the system is on death's door or we might choose to do something with that knowledge.

Pixel Art Really is an Art

Pixel art isn’t merely a simple matter of making things look blocky. It’s an art unto itself, where the mere shade of a pixel on a 16x16 sprite or tile can make a substantial difference on how a sprite or tile looks. A solid retro look takes some time to learn, but if you can get efficient at it, and you might produce all the art you need for your game in less time for something at a higher resolution. I see a lot of developers that will take regular art they’ve done for a game and then simply resize it to a lower resolution to produce their pixel-art results. While that might work in some instances, many times I see games using this technique and it simply produces a blurry looking character/object/tile. Drawing a high resolution image and then downsizing it to “pixelate” it also becomes problematic, because you are losing details that might otherwise be important, and perspective and proportion might not work with your desired result. It might work as a starting point, but it often produces poor results without additional work and polish. This leads me to the next issue: Pixel art is inherently low-resolution, and as such, there isn’t much room for minute details. You cannot rely on certain aspects of images, such as character faces, to come out on a 16x16 or 16x24 sprite the same way they do on a much larger sprite or picture. Whether you’re trying to show a character’s unique hairdo or facial expression, you’ve got minimal space to work with to convey these concepts. Two common ways to deal with this are to create characters that are visually unique and distinct in their features (hair, eyes, clothing) and their colors (bright, distinct color combinations). In doing so, the bold characteristics are easier to represent since the pixels are large relative to the size of the sprite. By using distinct color combinations, it becomes easier for players to quickly tell characters apart. When you’re working on 16x16 or 16x24 size sprites, every pixel impacts how the overall character looks. Even the particular shading of a single pixel can change the tone of the entire sprite. Where your character has a certain hair style with nuances that can’t be adequately detailed, the hair style might be conveyed with the proper amount of shading to the pixels on the character’s head. Or, if there are two key details to a character’s face that are too small and too close together, a single pixel with the proper shading on it can convey this detail. For Breath of Death VII, it was impractical to draw Lita’s glasses in their entirety; there simply wasn’t room to do so and still make it look okay. We ended up with a mix of hard lines and shading around her eyes to produce a middle ground that produces the effect of glasses. For Cthulhu Saves the World, with some character sprites wearing dresses, we could convey the animation of walking by using highlights and shadows on the dress where the feet/legs were going forth and back. In Rainslick 3, the shading of Gabe’s and Tycho’s distinct faces and hairdos are crucial in conveying the shape and proportions of their faces and hair. There isn’t room to simply draw an outline and color it in - you have to make strategic choices about how certain colors have to both represent the color of the hair or face, but still provide enough contrast so that features don’t meld together. It is also important to note that “Pixel art” is not a single style. There are many ways to do pixel art and produce good results. Pixel art can work well in a variety of resolutions, color schemes, and combinations with other graphical effects to produce a retro, or a “modernized” retro look. Developers can go for a look that targets a specific era of games (16-bit era, like we are shooting for with Cthulhu Saves the World and Rainslick 3) or a specific limited color palette, or resolution. You can use varieties of shading and coloring techniques to produce different results depending on your color choices and self-imposed limitations. And you can mix this art style with other visual technologies to produce interesting modernized retro styles. The point is, pixel art is not one way of presenting your game; there are many styles and methods of doing it, and choosing one that works for your game design is crucial. One size does not fit all! Finally, pixel art animates well in a lot of circumstances. High resolution art will sometimes look choppy unless it has a lot of frames or a lot of programming special effects layered on top of it to make it look flashy. Pixel art, with its lower resolution and abundance of pixels, allows for a situation where fewer frames of animation can look smoother, due to smaller sprites and fewer pixels to move. Higher resolution art becomes more obvious when fewer frames are used in animation. Cthulhu Saves the World uses primarily four frames of animation for characters walking, and it looks relatively smooth for smaller sprites. Four frames of “walking” animation would probably be insufficient for a sprite that is three to six times more resolute. Gamers often ask why games like Guilty Gear look more stilted animation-wise than the years-old Street Fighter 3, for example. SF3 had a tremendous number of animation frames and therefore looked incredibly smooth. The higher resolution Guilty Gear looks great for its speed and flashy special effects, but the characters themselves appear much less smoothly animated than those of SF3. Guilty Gear’s animation doesn’t hold a candle to SF3, but the combination of specially-added code and modern visual effects gives Guilty Gear an interesting visual appeal without requiring extreme amounts of intervening animation frames. Retro (low-res graphics) is a visual style choice, not an excuse for crummy graphics. One of the most common problems I see with many beginning indie game developers is inconsistency in presentation. For the retro style, the most common occurrence is inconsistent pixel size. Icons will use one pixel size, characters will use another, monsters will use still another, and effects will use yet another, combined with a high resolution game font. The resulting screen inevitably looks jumbled and messy even if the individual art assets look fine individually. Choose a resolution and style and remain consistent, don't mix and match. Despite the protestations of many a gamer, graphics and presentation do matter. There are so many indie games being released everyday that if I see an indie game with poor presentation, I'll naturally assume that the other aspects of the game are poor as well. If they didn't care enough to make the visuals not look horrible, why should I believe they cared enough about other aspects of the game? An indie game doesn’t have to be a visual masterpiece per se, but it does need to avoid turning players off at first look. Keep in mind that poor graphics are not the same thing as simple graphics – I'd rather play a game that uses an interesting combination of ASCII characters for its visuals but uses them well than a game with high definition assets done poorly. So with that in mind, we try to improve our visuals with each new release. With Breath of Death VII, our graphics are somewhere between an NES and a SNES title. Cthulhu Saves the World features graphics reminiscent of early SNES games. Our upcoming RPG, Penny Arcade's On the Rainslick Precipice of Darkness 3 has graphics similar to a mid-generation SNES game like Final Fantasy VI. It's our dream that eventually our games will have visuals that far surpass anything that could have actually come out on an authentic 16-bit game system but still remain stylistically true to that generation of games. The SNES had its much-touted Mode 7 but today's developer has even more advanced tools and techniques they can utilize. Here are some of the techniques that we have used in the past or will use in the future to make the best retro graphics possible.

Shaders

Shaders are basically pieces of code that analyze a pixel or series of pixels and then modify them in some way. They can be used for full screen effects like changing a scene to sepia tones or blurring the screen when the game is paused. They can also be used for more localized effects like creating a distorted mirror image for a lake's surface or showing light from a heat source.

Particles

Particles are generally small visuals that act with a little bit of randomization and don't stay on screen for very long. Although particles may sound futuristic, they can actually be used for a wide variety of effects like sparks, fire, water, and smoke, as well as more specific items like bullet casings falling out of a gun. Particles don't even have to be visible – for example, a sword slash could create an invisible single frame particle that is used to determine whether or not it hit anything.

Parallax Scrolling

Parallax scrolling is when you create multiple 2D layers and have them scroll at different speeds. A layer that scrolls faster will be seen as being closer to the virtual camera than a layer that scrolls more slowly, producing a modest effect of depth. Parallax scrolling has been around for quite some time but it's easier than ever to implement it now. On a similar note, you could have different layers that scroll at the same speed but have them drawn in different orders. For example, in Cthulhu Saves the World, we have bridges that you can walk under or walk over and the only difference in visuals between the two is whether the character sprites are drawn before the bridge is drawn (under) or after the bridge (over).

Divide and Conquer

The traditional way to draw character sprites is with each frame of animation being its own art asset. However, you can divide this even further and have separate art assets for different parts of a sprite and animate each one separately. For example, with a single character, you could have the lower half, torso, arms, head, and weapon each have their own set of art assets and then you create the entire character by combining all of the parts and then animate the various parts as you need to. The Dishwasher: Vampire Smile is one good example of this approach. The advantage to splitting up characters into smaller parts is twofold. One, you can create a number of animations without having to create separate frames of the entire character for each one – great when you're dealing with especially large characters and want to cut down your memory usage. Two, it's useful if you want to modify the appearance of characters – for example, have a variety of equipment show up on the character. On the downside, using a parts approach can be difficult to do well – generally hand drawing each character frame completely will result in higher quality art. That's why you sometimes see both approaches used in the same game – for example, in the upcoming XBLA title, Dust: An Elysian Tail, the main character is completely hand drawn but most of the other characters use a parts system. A parts approach can be used elsewhere as well. For example, you could have a large background that is mostly just one static image but then have smaller background sprites sprinkled here and there to add animation and life.

The Illusion of Motion

Just about any anime series will illustrate this point but since there's a legal stream of it on Crunchyroll and more people should be watching it (ignore the lame premise, the actual show is really good), let's use Chihayafuru. Load up an episode of Chihayafuru and watch the opening animation sequence. Now watch it again, but this time pay attention to how many actual frames of animation are used on the characters and backgrounds? Are you surprised to see that there's very little actual animation in the entire sequence? Deadlines are tight when it comes to making weekly anime TV series so the production studios are tasked with making something look animated with a minimal amount of actual animation (since they just don't have enough time). They use a number of techniques to accomplish this – camera pans, zooming in and out, moving a still image across the screen, quick scene changes, lens flare, and other visual effects. When there is actual animation, it tends to be fast and focused on key moments (lots of poses). Indie developers can learn a lot from the approach employed by TV anime studios. We both share a lack of resources so we need to be creative with what we have and make things in the most efficient manner possible. Programmers need to be constantly looking for ways that the code can be used to improve the look of the game so that the workload on the artists is more manageable.

Work Smarter, not Harder, on your Art(er)

Large studios can afford to just throw money and staff on a project and hope for a good result. Indie studios lack such a luxury. By picking a presentation style that fits your talents and the needs of your game, by having a plan of attack, and by utilizing various techniques and special effects, even the smallest indie studio can produce games that look amazing.