Why Pixel Art?

[Jetrel]

I was having a discussion with someone today, which I've been through before, several times. I figured it'd be good to get all my eggs in a row.

These are arguments in favor of why "pure" pixel-art (henceforth PPA; contrast NPA "Non-Pixel Art") is a worthwhile design limitation. Quite a number of artists will limit themselves to pure pixel art, but aren't able to articulate reasonable arguments as to why it's a good idea. Pixel art isn't automatically a good or bad choice; it simply has tradeoffs, and here I'm essaying at some of the upsides. I probably don't need to essay at the downsides; to find them out, all you have to do is try to make some pixel art. The cost of getting good at it is itself the most significant downside.

Since it apparently wasn't clear, I am obviously only discussing the pros of pixel-art for small-scale videogame assets and animations. I am arguing that when you're working on a small-scale, and you need to animate, pixel art has some inherent workflow benefits that will help you make a project faster, and with more professional results. Especially, you will be able to get a certain very "crisp" look that comes off as professional, and that's very, very difficult to achieve in NPA - such to the point that smart designers, like the ones who drew braid, the ones who drew limbo, or the ones who drew aquaria don't even bother trying - they instead aim themselves at a more loose style, because trying to have the same "perfectly machined" look pixel has just is a weakness of the medium.


PPA is defined by a small color palette; somewhere in the neighborhood of less than 60, ideally less than 30 colors. Typically, works in pixel art are very small, and care is taken to very specifically place every pixel. Pixel art is most worthwhile on tiny canvases where the placement of individual pixels has an extreme affect on interpretation; this is especially the case with subject matter like tiny faces some mere ~6 pixels wide, which are very common in videogames. Moving one pixel can completely change the emotion or outright appearance of the character.


1] The Look
First and foremost is the only reason the above-cited artists are able to usually express - pixel art lends itself to a certain unique look that is naturally appealing to people. You don't have to have PPA to achieve this look; you can have hundreds of minor shades to your colors and essentially look the same. However, PPA makes it much easier to achieve this look, since it naturally comes out of the method.



2] Work Speed
Working in pure pixel art, when you've embraced the method, allows you to work faster, and in certain types of task, work MUCH, MUCH faster. Most notably, it lets you play around with interesting color ramps, rather than straight monochrome.

Often when you're not working in PPA, you'll end up with very monochromatic tile art, unless you plan very, very carefully from the start. In PPA, it's trivial to take one color in the series of shades, and quickly shift it to, say, more of a purple, immediately giving your art a more "impressionistic" color choice that takes into account environmental lighting and radiosity. Vis-a-vis for playing with highlights - you can shift all of the speculars in your drawing from, say, yellow to blue. You can immediately and rapidly prototype color shifts like this, which makes you able enough at exploring that possibility space to actually settle on a good decision. You can similarly do such things in photoshop by messing with the curves filter, but it's much more prone to accidentally create "valleys" in the curve at some point, and likewise is very difficult to work on small sections of the curve "in isolation".

Most important in PPA is that unlike NPA, it's very easy to take a finished piece with rather "blah" color choices, and revise them to be great color choices. In most NPA, it's rather difficult to do this, and if you're not able to isolate different elements with the filtering options available to stuff like Hue/Saturation, you'd more or less be forced to reconstruct large parts of the piece. There are many options; you can brush over sections of it, selectively, with an adjustment layer set to hue - but all of these take much more time than just paintbucketing a couple elements of a tiny 15-color palette. In specialized pixel-art programs, you can even directly alter the colors in the image, without having separate steps of choosing a new color, and then telling the program to replace an existing color with it, which greatly increases iteration time on color choices (since you're not even leaving the color-picker whilst bouncing between choices.



3] Easier Tile Art
The second thing with PPA is that it helps to make disparate tile edges seam more easily - when you're doing NPA, and your colors are "close but not quite", even if your patterning correctly tessellates, you'll see a seam where the colors are different. With PPA, there are so few colors that you've actually got the exact same color.

Typically, this means you can outright skip steps that would normally be necessary in NPA tiling, such as re-using the same strips of texture along edges and such. You can actually draw tiles from scratch and have them work together, nicely.



4] Color consistency
PPA helps prevent "color wander" during animations. If you're animating with painterly-style coloration, you're inevitably sampling from other colors already in your drawing in order to do the proceeding frames. Like in the classic game of 'telephone', there will be small discrepancies which can grossly mutate if you're sampling just the previous frame, since you're not necessarily sampling from the exact same colors; you might be sampling shades slightly brighter or darker.

There are steps you can take to mitigate this, but you can never completely eliminate it - even if you're sampling from a pure color value drawn outside of your drawing, or sampled from a palette, how you shade will have variances from frame to frame in the blending. In PPA, because you're never mixing tones, distribution becomes much easier to control, and you at least never have variances in individual tones.



5] Palette Tricks:
PPA allows a number of fun procedural tricks which aren't possible in NPA. The most basic stuff, like recoloring sprites, is possible-but-awkward in NPA; you have to explicitly mask all the areas you want recolored.

But the more fun tricks, like randomizing colors, and applying patterned shifts across the color table, aren't possible. Often, SNES et al consoles would do very cool "glowing" effects when characters got hit by spells and such, where they'd take a series of colors, and actually "step" these colors through the palette, moving all of them to the next palette slot every frame.

These tricks are important because they're nearly cost-free from your art department, and most game projects end up art-constrained. You can create such a e.g. "struck by a healing spell" palette cycle, and it will work not only on all frames of a given character, but on every single object in the entire game.

Actually creating large scenes that use palette cycling is not practical in creating games (nearly no artists have the skill), but using palette cycling for a few occasional effects, and to animate certain tiles, can be extremely cost-efficient. For an awesome example of high-end usage of the technique, see here:
http://www.effectgames.com/demos/canvascycle/



6] Data Compression
Pixel art allows wicked lossless compression. Speaking to an audience of programmers, I'm of course preaching to the choir, but the best part is that it's immediately available, not something hypothetical that you'd have to write some difficult algorithms for. For the non-programmers, it cuts loading times, download times, and disk space for graphics by about 10-100x. It can be the difference between your game loading instantly, and having to sit through a 50-second loading bar when it starts up.

Perhaps more importantly, though, it would allow you to net even better gains in memory bandwidth, if you did want to "write some difficult algorithms". Even for pixel-art games, memory bandwidth is a serious concern.

[thespaceinvader]

Dang, those are some truly gorgeous animations.

[Jetrel]

Dang, those are some truly gorgeous animations.

Yeah, that guy worked at LucasArts, and because color cycling has fallen by the wayside technically, no one is bothering to develop the skill to that level anymore. He might well be the single greatest guy alive, at doing that.

[doofus-01]

I wonder if items 1 & 6 will hold up in the long run.
1. Is pixel art naturally appealing, or is it something learned? Will a younger audience, raised on 3D and Photoshop (and maybe something else I'm not aware of), not have the same attachment? Is color cycling having fallen by the wayside a sign? That waterfall is impressive though.

6. A factor of 10 or 100 speed of what today's computers can process will not seem like much, assuming technology continues to progress. The ability to move things off a desktop and into a cheap cellphone will extend the importance, but after that?

Maybe this is too long-term and won't be relevant for 20 years.

[Eleazar]

These two points are contrary to my experience.

2] Work Speed
Working in pure pixel art, when you've embraced the method, allows you to work faster, and in certain types of task, work MUCH, MUCH faster. Most notably, it lets you play around with interesting color ramps, rather than straight monochrome.

Often when you're not working in PPA, you'll end up with very monochromatic tile art, unless you plan very, very carefully from the start. In PPA, it's trivial to take one color in the series of shades, and quickly shift it to, say, more of a purple, immediately giving your art a more "impressionistic" color choice...

On the other hand with NPA you don't have to plan your palette at all. And it's also trivial to "quickly shift it to, say, more of a purple".

Most important in PPA is that unlike NPA, it's very easy to take a finished piece with rather "blah" color choices, and revise them to be great color choices. In most NPA, it's rather difficult to do this, and if you're not able to isolate different elements with the filtering options available to stuff like Hue/Saturation, you'd more or less be forced to reconstruct large parts of the piece. There are many options; you can brush over sections of it, selectively, with an adjustment layer set to hue - but all of these take much more time than just paintbucketing a couple elements of a tiny 15-color palette.

Granted the options available to spice up blah color choices are more complicated and involved than in 15 color PPA. The obvious flip side is that these options are so much more powerful. The effectiveness of either method is rather dependent on how well made the art is for either PPA or NPA. I.E. the power of hue/saturation (etc.) is mostly wasted on 15 color art. And if your PPA was simply created by downsampling full-color art, the trival, effective color shifts Jetrel is talking about aren't gonna happen.

But again, NPA filtering is so much more powerful. It's likely that with PPA it would be (for instance) impossible to change the color of caucasian skin, sand, or wood without changing all of them. With NPA you can generally narrow in on exactly the colors you want to change. Or you can make broad global changes. With PPA you can only make broad global changes-- simpler, yes, but also less powerful.

3] Easier Tile Art
The second thing with PPA is that it helps to make disparate tile edges seam more easily - when you're doing NPA, and your colors are "close but not quite", even if your patterning correctly tessellates, you'll see a seam where the colors are different. With PPA, there are so few colors that you've actually got the exact same color.

Typically, this means you can outright skip steps that would normally be necessary in NPA tiling, such as re-using the same strips of texture along edges and such. You can actually draw tiles from scratch and have them work together, nicely.

Theoretically this could happen, but to the best of my memory, i have never taken these extra steps that NPA is supposed to cause. It's always about the pattern/texture/tessellation... I've never gotten that right, but found a color seam. I spend very little of if any of my attention getting the hues to line up on the edges. If i did end up with a tile with that problem it would probably be extremely trivial to fix with a quick fuzzy mask and a hue/saturation adjustment.



I grew up doing digital art on a computers and software with 8, 16, 32 color pallet limits (IIRC i could have more "colors" if they were all grey). I've lovingly are carefully crafted my palettes, and placed pixels one by one on 320x200px screens. I've even make color-cycling water (though not as good as the above example) And then i moved on and learned how to get things done using the strengths of the full-color range.

True pixel art may be the most efficient way to make the pixel-art look. But, I highly doubt it is a more efficient or better method in general, assuming two equally skill artists that have spent the same effort into learning the tools and tricks of their method. In my experience it is not.

[thespaceinvader]

On the other hand with NPA you don't have to plan your palette at all. And it's also trivial to "quickly shift it to, say, more of a purple".

Mm, but you can't shift different parts of the palette easily to different values. In PPA, if you see your palette is too much of one colour, it's easy to add a bunch of blue to, and desaturate, your shades, and add yellow to and saturate your highlights. More difficult in NPA, because you don't have that fine control over the regions you're selecting. It's a minor thing, true.

[Jetrel]

Often when you're not working in PPA, you'll end up with very monochromatic tile art, unless you plan very, very carefully from the start. In PPA, it's trivial to take one color in the series of shades, and quickly shift it to, say, more of a purple, immediately giving your art a more "impressionistic" color choice...

On the other hand with NPA you don't have to plan your palette at all. And it's also trivial to "quickly shift it to, say, more of a purple".

Nope, this is absolutely wrong, and is a crux of my argument.

With NPA, you have to plan your palette if you want a specific shade to be purpleish. With NPA, you can't isolate that shade (which would now be a certain range of shades) anymore, because it's mixed with thousands of other shades.

You can attempt to use the curves filter on specific color channels to move only the "corona lighting" on, say, some spherical shape, towards purple. But this is gonna be a mess; you're going to have to do quite some work to isolate that. You're gonna have to make a mask, unless you want spillage in or out of the specific item you're working on, and masks are hard. It's not gonna take long to do it cleanly - I'm sure you can do it in a minute or two. But with pixel art, you can do it in a second - one click of the paintbucket, and not only is it replaced, it's replaced cleanly.

That's the huge difference - when it's nearly instantaneous, you can iterate almost a hundred times, versus what you could do in a minute.

And then i moved on and learned how to get things done using the strengths of the full-color range.

When I say "non-pixel-art", I'm describing 'painting' something in photoshop, using a brush tool, and ultimately (as kitty and lordbob are doing) using an "oil-painting" style, where you lay down flat tones, and build the 3d shape and contours of your object by layering on successive brush strokes to build up to highlights/shadows. Specifically, I'm arguing that for drawing sprite animations, pixel art is a superior workflow. I'm not making some absurd argument that pixel art is globally superior.

I just thought it was completely obvious I was talking about sprite-based animations, and arguing that pixel-art is inherently superior for them.

And for sprites, you can't see the full-color range. On the scale of pixel-art, humans can't really distinguish between a full luminosity jump of 10 units. Stepping immediately actually ends up looking cleaner than blending between them.

[Eleazar]

On the other hand with NPA you don't have to plan your palette at all. And it's also trivial to "quickly shift it to, say, more of a purple".

Mm, but you can't shift different parts of the palette easily to different values. In PPA, if you see your palette is too much of one colour, it's easy to add a bunch of blue to, and desaturate, your shades, and add yellow to and saturate your highlights. More difficult in NPA, because you don't have that fine control over the regions you're selecting. It's a minor thing, true.

Sounds like you aren't aware of Select: Color Range, or Gradient Map adjustment layers, or various other methods to target individual colors or color ranges. The control is as fine as you want it to be.

On the other hand with NPA you don't have to plan your palette at all. And it's also trivial to "quickly shift it to, say, more of a purple".

Nope, this is absolutely wrong, and is a crux of my argument.

With NPA, you have to plan your palette if you want a specific shade to be purpleish. With NPA, you can't isolate that shade (which would now be a certain range of shades) anymore, because it's mixed with thousands of other shades.

As you say, the human eye can't distinguish all the colors a a screen can display especially when sizes are small, why would it be so important to have a specific shade of purple?

You can attempt to use the curves filter on specific color channels to move only the "corona lighting" on, say, some spherical shape, towards purple. But this is gonna be a mess; you're going to have to do quite some work to isolate that. You're gonna have to make a mask, unless you want spillage in or out of the specific item you're working on, and masks are hard. It's not gonna take long to do it cleanly - I'm sure you can do it in a minute or two. But with pixel art, you can do it in a second - one click of the paintbucket, and not only is it replaced, it's replaced cleanly.

No, seriously. What you describe really is a trivial task. 10 or 20 seconds of setup with perhaps an adjustment layer, and then you move the color sliders around until you like what you see. Granted it could be a mess if you went about it the wrong way, but that's true of any method. Am i correct in assuming that you have spent a lot more serious effort perfecting PPA skills technical and mental) as opposed to NPA?

I just thought it was completely obvious I was talking about sprite-based animations, and arguing that pixel-art is inherently superior for them..

Not with point 3 being specifically about tiles, no it wasn't obvious you were talking only about sprite-based animations.

[Zerovirus]

Just throwing in my opinion on the progress of art:

The cavemen once held pigments on cave walls as the epitome of art. That medium was outgrown and forgotten.

All mediums will be outgrown and forgotten eventually, with newer forms of creativity overtaking them. Pixelart is the same, I suppose; just as pencils and paint out-paced the cave paintings in technology, so too will newer art styles overtake pixelart at some inevitable point in the future.

But that doesn't stop anyone from drawing pixelart right now

[Sgt. Groovy]

I'm surprised nobody has mentioned vector art yet. I would say it would yield a third class of graphics, thought generally it would fall closer to NPA than PPA.

The combination of SVG and CSS would be very powerful for game graphics. If one thinks a SVG file not as a image data, but as a micro-program that instructs a renderer to create an image, and the CSS file as its parameter list, it's easier to see how dynamic manipulations of the images is done. From program's point of view, a SVG image is an object tree and it's fairly simple to manipulate it. It's also fairly simple to create one from scratch on the fly, either from predefined components or completely procedurally.

Jetrel's points can also be applied to SVG:


1. The Look. SVG can also be used to create very aesthetically appealing images, especially when representing materials such as metal, plastic, glass or polished or smooth, matte surfaces. Also, it's very well suited for making sharp and clean cartoony images or fuzzy lighting effects such as auras or lens flares. Moreover, the learning curve for these styles in SVG is fairly shallow. What's harder is a gritty, textured look.

People often think of vector images in very small sizes as blurry and smudgy, but this doesn't have to be so, if one knows what one is doing. There are two ways to make vector art look good in small size:

1. The smudgyness comes from the anti-aliasing, but there's no reason why vector art has to be rendered with anti-aliasing. Some of the existing SVG renderers probably already have an option to turn off anti-aliasing.
2. Vector images can be optimized for certain resolutions by making horizontal and vertical lines snap with the pixel grid. This way you'll have them rendered as one row of solid pixels instead of two semi-transparent ones. You'll still have anti-aliasing working for curved and slanted lines, so you'll get the benefits for both worlds. This technique sets limits for scalability, but there are tricks around this (see point 7. below).

2. Work speed. If both SVG and CSS are used, the workflow can be broken down in separate stages, much like the pencil-ink-colour scheme in comics production. If the SVG file defines the shape and logical structure of the image (what objects represent the eyes, skin, hair, clothes etc.), and the CSS file its colours, different colour versions (for different lighting, colour effects etc.) can be made very easily.

Also, component recycling (frankensteining) can be put into good use with SVG, because image components can be cleanly transformed (rotate, scale) and recoloured.

3. Easier tile art. I'm more than happy to admit that tiling is easiest in PPA, but for producing continuous textures or repeating structures, tiling is not the best, only the simplest and least resource-intensive method. SVG provides several powerful methods for making continuous surfaces, such as pattern fill (with pattern transformations), object reuse (with style and transformations individually applied), continuous fractal noise and other filter effects, which can be used in procedural fashion to make the surfaces not only continuous, but less monotonous and influenced by global factors such as global lighting.

4. Colour consistency. Because the colours and gradients are separately defined for each object, colour control in SVG is very easy. You'll have some fluctuations due anti-aliasing and blending of overlapping objects, but not random-walk degradation. Also, changing colour schemes of whole sets of frames is very easy if they all use the same CSS.

5. Palette tricks. Because the colours and gradients are separately defined for each object, all palette tricks available for PPA are also doable in SVG+CSS. Moreover, because a SVG image is inherently layered, as each object resides in its own layer, and the objects also have alpha channel, the colour shift tricks can be even more powerful (granted, they can also be quite resource intensive).

Because SVG images also have built-in masking (from a rendering point of view, each object defines a mask), there are also all kind of neat colour tricks doable with simple image-processing fuctions. For example, you could have one group of objects defining the material parts of the image and another defining the shadows and highlights. With CSS you could the define the material and lighting colours separately on the fly. You could even have a group of objects defining some 3-D information about the image, such as a normal or z-map, and use it to create dynamic lighting that also takes light direction into account (though the palette tricks in Jetrel's colour animation examples could also be used to the same effect with PPA).

6. Data Compression. SVG images can be fairly small to begin with (depending on the level of detail) and because they are XML, they compress quite well.

7. Scalability. PPA is scales poorly in either direction, so if you want to have your sprites in different sizes, you have to create them separately by hand (and all the animation frames thereof). Some quasi-tracing algorithms for scaling up pixel art exist, and while they can do pretty nice job sometimes, they can also fail spectacularly with high-frequency parts of the image, such as faces and textures.

NPA images can often be scaled up to 200% with decent results (depending on the artistic style), but not generally beyond that. Scaling down usually works well, so NPA can be made quite scalable if the original is the largest version used. This can be rather labour-intensive and produce large image files, though.

Vector art is the most scalable, but the artistic style also sets some constraints. With clever use of SVG+CSS some techniques for increasing scalability can be used:

• Slightly scaling the image or some of its parts vertically or horizontally to make it snap better with the pixel grid in small resolutions. Works a bit like hinting in outline fonts or the more advanced resolution-dependent features of Metafont.
• Defining some less important details to be turned off when rendering below certain resolution. This will make the small-scale versions look cleaner.
• Using filter effects to give the surfaces some texture in larger resolutions. This will make the larger versions look less sterile and dull. Again, this feature will be turned off below certain resolution for a cleaner look.

8. Other benefits.

• XML processing libraries exist for basically all programming languages.
• SVG mixes well with HTML. Good thing when making web games in HTML5.
• Inherently animatable and scriptable.

[dipseydoodle]

Jet... Thanks for this topic, I believe it when you say pixel art is easier and looks more professional. However I not sure I can agree about the terrain art... Surely something like paintshop or gimp(Digital Paint, rather than Pixel art) is more suitable for a job like that IMO.

[thespaceinvader]

What makes you think PS and GIMP can't be used for PPA o_O

[dipseydoodle]

PPA??? I don't no much web-slang... Can you repeat that in regular English...

[thespaceinvader]

Read the first post

[dipseydoodle]

My point is that terrain/tile art is better when done with a brush tool... IMO it just looks better and more real/artistic. You can have your own opinion however.