Heroes Must Die

Heroic Games

Heroes Must Die by Heroic Games combines an indie video game RPG and an interactive theater production.

On the peculiarities of pixeling

Pixeling is an art-form. I don’t think I’m dealing in hyperbole when I say that it’s one of the most important and influential forms of illustration of all time. It’s been a beloved and cherished form of graphic art for going on half a century now, which makes it one of the youngest visual traditions, but no less important by any means. This blog entry is intended to give a sliver of context for pixeling historically and then to describe my own personal approach as it pertains to Heroes Must Die. 

In the beginning

The very first video game with graphics of any kind was Spacewar!¹ (1962.) Prior to its invention, games had been text-based. Yes, text generally uses pixels as much as other graphics do, but the variety of digital fonts at the time was sorely limited, so artistic visual expression in the medium was likewise limited. Spacewar changed all that. It used a cathode ray tube much like that of an oscilloscope, except instead of drawing a grid of pixels like we’re used to seeing on our CRT televisions (I just realized my nephew would have no idea what that is), the electron gun drew vector lines to describe the shapes of the game. Many of the early video games used graphics of this nature, which means despite their historical importance, they’re not the type of graphical system in which we’re interested for the purposes of this blog. Don’t get me wrong, I love the look of vector graphics. They got a sharpness and clarity (and some might say a charm) that raster graphics are not capable of. However, we’re talking pixels, so we need to jump forward to the advent of Atari inc. in 1972.

¹There is some confusion and argument about this but this isn’t a history lesson so I’ll be forgiven.


Start of the pixel era

We all know about Atari and their first break out commercial game: Pong². What a lot of people don’t really consider however, was how the design, manufacture and sale of raster games for use on home televisions changed the course of video game design and creation as a whole. Vector graphics fell by the wayside and rasterized “pixel graphics” became the champions of the day. Now mind you, Pong was of course not a very visually complicated game. That was because the graphics at the time were all coded by hand. There was no such thing as a visual editor for the easy creation of sprites. Programmers needed to describe every visual element of their game in code, which meant the simpler their visuals, the easier it was to write and the faster their game would run. Compare these two images, one from Atari Basketball (1978) and the other from the same game but released one year later.

It’s pretty obvious that graphics and artists were getting more comfortable with increased detail in their sprites. Not only is there more detail in the characters themselves, but also in the animation that moved them. It was just the beginning of an era of possibilities for pixel graphics.

²My nephew, again, almost certainly has no idea what Pong is. Dear god I’m old.


An economy of line

So why pixels? Well, the simple answer is that’s what visual displays use to describe an image. Even though the video games of today appear to be visually smooth, without all the bumps and squares of pixel art, the truth is no matter how large your resolution and how good your anti-aliasing algorithm, your image is composed of pixels. The screenshot below is from a game I authored in Unity. It looks pretty smooth and clean, and uses 3D models and geometry as opposed to 2D sprites.

Transient

Despite original impressions, the fact of the matter is, it’s still made up of pixels. That becomes apparent when we zoom in nice and tight.

unity’s built-in 8x anti-aliasing does a great job of blending those little squares so they don’t appear so jagged from a distance, but up close they can’t hide their true nature. A lot of game designers today think of pixels as the blemishes of computer graphics. We all know they’re there, but we’d rather not see them. All graphics displayed on a monitor are composed of pixels, that’s the simple truth. So, if you’re inclined to embrace this fact instead of trying to fight against it or hide it, like many modern games, what can you do to make the best-looking graphics possible? Well, that’s where pixeling comes in.

A fine tradition

So, pixel art goes all the way back to the golden era of video games and further. There are some really well-known characters we could look at to dissect their pixels, but instead I’ll just use our main protagonist: good ol’ Storm himself.

Transient

Lookin’ good there buddy! I’ve blown him up to 400 times his usual size for this example so you can see all his pixely goodness. This is what he looks like in-game:

Transient

Jaunty! Storm and his ilk are what we could refer to as a 16-bit sprite, since his color palette is something you would have seen on a 16-bit game system like the Sega Genesis, the Super Nintendo (Super Famicom) or the TurboGrafx-16, so-named because of its 16 available bits of memory. If I were to render Storm in an 8-bit version, he might look something like this:

Transient

This lil’ guy would be right at home on your old NES. Note the conservative palette, the use of color primitives and the re-use of common colors for different circumstances. These were all the tools and tricks of the early pixeler. When your whole level needed to share the same palette, you learned to work around all the limitations your medium placed on you. We don’t have those same limitations, but to pay homage to the games we loved as kids, we’re enforcing some of the better ones as creative guidelines.

To start finalizing the look of the sprites we needed to figure out their dimensions and aspect. Were they going to be viewed straight on, or at an angle? We then decided on the general height and width of a standard character. We broke them up into three segments: the head, the torso and the legs. These segments we positioned in an imaginary square and proportioned them equally. That would keep the look and feel of the characters uniform. I made this template dummy to thusly act as my guide for every character following.

Transient

Here he’s seen at 400x zoom to show off all that lovely muscle definition. Ooh. Aah. You can already see how he acted as the base for Storm in a lot of ways. They’re of very similar builds, being lean and relatively average. I would use this form as the starting point for every divergence from the “norm” in following characters. If a sprite was going to be especially wide, I would just resize this dummy’s torso and arms to compensate and draw on top of that new skeleton. For example, compare the template dummy to Grim - one of the game’s antagonists - and you’ll see what I mean.

Transient

Lookin’ mean, Grimmy, but certainly not lean. The other important guidelines I included in the base template were shadows. I wanted to keep the light source consistent across every character, so I hinted at a rib cage and muscles in his arms and legs, as well as a subtle geometry to his skull so I would maintain the same lighting throughout the game. You can see how I implemented the same lighting on Grim’s cuirasse and pauldrons. I have a tendency to forget about light sources when I’m trying to draw quickly, so this visual shorthand helped to remind me with every new pose of any single character. The red lines on the ground help remind me of the angle of the ground plane. A lot of the poses in the game promised to be very dynamic and possibly difficult to draw in the correct perspective, so the guides helped to define where their feet should fall, etc. They were invaluable in the case of Storm’s attack frames.

Transient

It’s subtle, but the slight perspective will really help ground him in his world when he’s actually running around the game, hacking and slashing! Go get’em Storm!

The base template also helps me keep the characters’ limbs in proportion to their body while posing them. I know how many pixels long Storm’s bicep and forearm are at rest, so I can extrapolate how many pixels long they should roughly be when they’re fore-shortened towards or away from the viewer’s perspective. I’m not the world’s best illustrator, so I have a tendency to exaggerate perspective unconsciously. Sometimes it works artistically, but it should be used sparingly and purposefully as a tool.

Keeping all those guides in mind, that’s how I’m making these sprites. They’re a loving homage to a lot of games I played growing up, with my own personal flavor sprinkled in. It’s my hope that together, when animated, they’ll help make the game immersive and exciting, as well as adorable and fun to play.

Transient

Pixel Evan