Ramblethread! A brainstorm approaches!

[Helm]

This is an idea repository thread for a tutorial I'm planning to do that deals with fundamental aspects of pixel art. At first it will seem like an incoherent mess. I will post here when I have ideas I want to come back to and put in order. Feel free to discuss them with me or offer counters and examples. Eventually the text will be pruned and images will be made to explain the vaguest points and something useful might eventually occur.

Please keep in mind that these are thoughts constantly under consideration, not my religion. It is possible I might discard some or most of the fundamental ideas behind this before I'm done with a final text. This is why it's titled 'brainstorm'.

----------------------------------------------------

Pixel art is like a Go game. Every pixel placed contributes towards a struggle between intentions that will eventually end in an state of variable equilibrium between the opposing forces. Anyone that has played Go knows of the feeling of immense mental strain when they place one piece down on the board and they ponder on the eventual ramifications of that single move towards all the clusters of pieces across the board. A piece feeds on the vital space around it, you see. Not all pixel clusters can live, some will have to die for the purposes of other, more important - towards the whole of the game - clusters. Go is a holistic game, a game about sacrifice and a game about grace. Likewise, drawing with pixels results to similar concerns of balance between clusters of pixels and their optimal positions are again about sacrifice and grace.

Let's consider what a cluster of pixel is as opposed to a single pixel.

This is a single pixel: .
This is a cluster of pixels: _ or that: ,

The cluster of pixels is made from single pixels. However, a single pixel is most of the time near-useless and meaningless if not touching pixels of the same color. 
The pixel artist is concerned with the shapes that occur when pixels of similar color touch each other and convey an opaque, flat, shape.
Most of the defeats and possible triumphs of pixel art occur in that exact moment where the artist makes a cluster of pixels.

What are the defining characteristics of a cluster of pixels on the morphological level? Besides those obvious and common with other types of art (like the information inherent to the color in terms of value/brightness, chroma/saturation or hue/tint that the cluster possesses) we are interested in the particular characteristics of that body of color as pixels. The characteristics of the shape are defined by its outline. It could be made out of straight lines, 'perfect' angled lines (will return to perfect lines later), implied curves or irregular (or jaggy) lines. A cluster has often many of these attributes around its outline. The prime job of the pixel artist is to find the ideal shape for every cluster while considering how they all come together to represent the item they are rendering. It is my belief that there are almost ideal shapes for clusters of pixels and they are those that achieve a twofold, yet holistic goal: how to optimize the resolution of the image. "What's this?" I hear you say "but isn't the resolution set anyway?" The real resolution of the image certainly is. But the fake, that is, the perceived resolution of an image is in the hands of the capable pixel artist, higher than the real one.

There it becomes important to realize what the available fineness of resolution exists for the piece of art the artist is trying to render. The less colors the artist has to convey his image, the more the available resolution tends towards 1 pixel = 1 pixel. The more colors the artist has, the more they can approximate, fake essentially, higher resolutions by proper buffering. Look at this image:



The 256 color gradient makes it impossible to even notice a pixel. The effective resolution here is considerably larger than if the artist had 4 indexes to convey the range between black and white.

In pixel art we do not deal with 256 color gradients, however and therefore the effect isn't anything bigger than perhaps 1 real pixel = 0.75 fake pixels, but it is still a very important thing to consider and makes or breaks great pieces. When looking at a piece of pixel art, the artist should be able to evaluate how many colors can be used to blend clusters of pixels better so as to optimize towards a finer resolution. This is not a point of stylistics, this is what pixels long to be, that is their ideal form. Any style can benefit from this process.

A beginning pixel artist should always start with very constrained palettes, where hue and saturation do not matter, just value. Gameboy 4 colors is excellent. Small sizes, small palette. 1 pixel = 1 pixel there and they can worry more about dealing with how clusters of pixels long for their perfect shapes together rather than care about anti-alias or dithering and other advanced resolution-upping techniques. If you can't render your item with 4 colors in a gameboy screen, you will not be able to do any better at 800x600 with 256 colors or more.

What is the perfect shape of a cluster? It has to do with its outline. The juggling act here is to think of what you're trying to represent with your pixels and then try to retain its essence while at the same time making the clusters you're using to draw it become as close as they can to 'perfect' lines. Perfect lines are the 90 and 45 degree ones. Curves can be assembled from smaller segments of perfect angles also. Avoid single pixel noise. Using perfect lines, before the artist even starts to anti-alias manually, the contours of his clusters should be as close as they can be to 1 pixel = 1 pixel resolution.



A is a freehand doodle line of pixels. This is an implied cluster too, even if it's a line. B is the same line, cleaned manually until it's made of the safest couplings of pixels possible while still retaining the intended curvature.

On the detail of A we see that the jaggies hurt the resolution of the image by conveying larger pixels than our computer monitors are capable of displaying. This is effectively, the bane of pixel art. Banding does this. Bad AA does this. Bad dithering does this. Pillow shading does this.

--

to be continued. Let's discuss while I think.

[Helm]

{...} While perfect vertical and horisontal lines are an amazing help to the pixel artist that is trying to refine their resolution as much as possible in some ways, they do the exact opposite than what they intend to in others



Here in A we have Ideal clusters of black and yellow. The resolution is practically infinite. Then on B we have two lines of buffer between the two colors. The artist might have thought they were making their image softer and therefore the resolution finer (a correct principle generally) but what they've done instead is completely give away the actual dimension of their smallest-possible pixel line. Pixel drawing is about the art of obfuscation of the single pixel. The more you can hide the actual dimension of the prime building block of the image by presenting perfect clusters of pixels in harmony, the finer the resolution of the image becomes. Of course it's impossible to completely avoid the side-products of buffering, but this principle should be kept in mind regardless.

Banding is horrible partly because of the above explained principle and also due to the 'breaks' in the bands that are ever-so amplified the more the artist piles on bands, effectively lowering the resolution of his image {...}

[Doppleganger]

That's a good start. Something like this eventually need(ed/s) to be done anyways.

I think one *very important* aspect of pixel art to discuss is that of "perfect lines". Which, you kind of went over already, but it definitely could use its own narration. What I speak of, is the unspoken rule that in any particular curve the pixels that make up any straight line that are part of the collection of straight lines that define the curve should always contain a number of pixels relative to the other straight lines that neighbor it. ie; a simple hump in a horizontal line might be; 1, 2, 3, 5, 3, 2, and back to 1 pixels long per line. That is most definitely better displayed through images as it seems like a lengthy explanation is necessary to fully introduce it otherwise. Nonetheless, I feel that it is often overlooked with novice pixel artists, and I find that it is a rule that is almost always applicable.

edit:
Also, I thought I'd comment on how abstract your approach is thus far. For me, I find it to be an interesting and theoretical read that creates new avenues for me to expound on pixel art as an artform and beyond, but I believe that lesser experienced individuals will simply read it and leave with little more understanding than they started with. This, of course, assumes that every subject will be covered in this loquacious manner. Just something worth noting. I guess the better question would be this; who exactly is your target audience?

[Gil]

I have a very interesting idea to add that I've not been able to formulate until I saw the other part of the equation, which is your well-written brainstorm here. I will try to show some examples with it, but I need to formulate it more in my head for now.

Basically, I've seen a lot of artists break their clusters with single pixels, it happens in lots of ways and it destroys what you call their heightened resolution in parts of the image, yet provides detail to an image. It happens in games like Symphony of the Night and Flashback most notably, but I've seen it in excellent isometric art and scene pieces too.

Consider for example edge highlighting with single pixel lines on mechanical parts in Flashback. It sometimes even ends with a single white pixel on the corner point of multiple edge highlights. The artist is breaking the infinite resolution by placing a single pixel line.

Here's a crude, badly done example that might or might not show you what I'm talking about. Left cube is definately near infinite resolution, right cube is what I'm talking about. It's very powerful to detail heightened resolution stuff with pixel level detail for some reason or another. Flashback mechanical parts are one example, but there is an abundance of similar methods that I might try to chronicle if it interests you.

[Jad]

Still, by using the pixels in an elegant manner and drawing lines that are harmonic and adhere well to the resolution, that way of creating detail is still in harmony with the clusters. In your example the single-pixel-width lines only define the clusters, and the single-pixel dots help define the lines. There is still harmony here O:

Doppleganger: I think it's a ramble thread because helm's audience is as of yet undefined and he just wants to ramble about, think and discuss this with us! O:

[Feron]

On the single pixel topic, one white pixel is quite often used as eyes of sprites and that is very noticeable.

[Gil]

Jad: while rim highlights are still pretty harmonic to the cluster theory, clothing detail in SOTN is not for example. I'm thinking that the contrast between heightened resolution and pixel level detail is just very visually pleasing and also makes simple detailing more powerful, since it isn't cluttered by more pixel noise around it.

Just a theory

[Arachne]

Yay, lines.

A mistake I see done every now and then, is to go from a [1 1 1] line straight to a [2 2 2] line.



The right way to draw a smooth curve in this case is not very intuitive if you think of lines merely in terms of number sequences. I like to think of it as AAing with angles instead of colors. You have two "colors", a [2 2 2 2] line and a [1 1 1 1] line. Halfway between the two would be [1.5 1.5 1.5 1.5], but we only have integers to draw the line with so we get [1 2 1 2] instead. Substitute the middle with that, like [2 2 1 2 1 1], as shown here,



I think it's always important to explain why you're using a rule or put it in some kind of context. If there's no other way to remember these rules than to memorize them to the letter, beginners might find themselves trying too hard to adhere to all the rules and forgetting to actually look at what they're drawing.

I think the most important thing you can do in pixel art is to look at the result after placing a pixel. Did it look better before or after and why? If you keep an eye out for a pattern in what looks good and what doesn't, you will find it in time (and after a few thousand iterations ).

[Gil]

In most cases (in my experience), it is better to go with example 1. Example 2 works perfectly here, but the broken sequence can sometimes do more harm than good. As you said, it's all a matter of trying it out and repeating until it looks good.

I usually go with 1 if I only have inner AA to work with (sprites for example), while I'll definately go with 2 if I can get outer AA too.

[Ai]

I usually go with 1 if I only have inner AA to work with (sprites for example), while I'll definately go with 2 if I can get outer AA too.

I totally agree. 1 is a more pleasant curve if you AA it in the right way, and is also more regular and easy to AA.

I think Arachne was talking about scenarios with no AA at all, though. In those situations, 2 is definitely nicer.
(IMO the ideal curve, in pixel art, is generally very close to a cubic spline (2 endpoints, 2 control points), and example #2 is almost perfect in this case. example #1 is like spline interpolation that is suffering from rounding errors)

I included some thoughts on this in my old advanced AAing tutorial, IIRC. (http://neota.castleparadox.com/aa_tutorial.html). IMO your technique, Arachne, is very similar to Staggering. It also mentions something else which is important for newbies, IMO: because of gamma, the midpoint of the RGB values of two colors usually *ISN'T* a 50% mix of the two. (eg black #000000, white #ffffff -> wrong result = #7f7f7f, right result = #bababa). Knowing this can help avoid ineffectual shading as well as ugly AA.