Nicolas Goles

Code & Randomness

About Pushing Pixels for 2D Game Sprites

To talk about Medium Sized Sprite (from now on MSS) animation and design  is not an easy task for me at all, because I don’t consider myself an expert in the subject. On the contrary, I’m still experimenting a lot to try to improve my results. But it is because of this reason that the following article could be useful for the people who is just starting out in Pixel Art, or even for veteran artists who could share their experience. I won’t pretend to write an all-around Game Pixel Art Style guide, but instead I will to try to present and discuss some issues that could result (and in my particular case, have been) very useful when designing pixel based sprites for games.

I Sprite Design


Introduction:

I consider a MSS to be a Sprite between 80x80 and 120x120 pixels.

An MSS offers one main advantage that presents itself also as the main challenge: synthesis.

  • Advantage: A huge amount of detail is not needed to make an effective MSS.

  • Challenge: Synthesis is not a synonym of easiness at all, and still some level of detail should be achieved to make the sprite work.

Preliminary steps, Have you already planned your Sprite ?

For an MSS to work out, it can be useful to make a set of proposals in the form of a sketch. This is something that a lot of people have said to me. Although in my limited experience this rule doesn’t necessarily apply to MSS’s. With this, I want to point out the fact that many initial pictures/sketches can make it very difficult and sometimes even frustrating to move from the sketch to an MSS, sometimes even converting the supposed aid of an initial sketch into a real obstacle.

Don’t get me wrong, I think an initial sketch is useful to understand more or less the concept of what we want to do, but doesn’t help directly when we want to deliver “executable” results (game assets).

To avoid this problem, I think that the initial sketch must be oriented more or less in a functional way. For me a useful (game asset generating) sketch is the one that instead of trying to describe the character in every way, represents a “volumetric” description of the pose and proportions of the elements composing our model. Sometimes, it can be a good idea to generate a sketch of the exact same size of the sprite that we want to make. This can add tremendous value to our process since it will give us a real notion of the available possibilities under our sprite size restrictions. Finally, it will provide a skeleton to start the construction of the Game Sprite.

Cell palette


I always try to avoid using more than four different tones per color in my palette when pushing pixels, generally two colors for the lights and two for the shadows. Generating a restricted palette, is of  huge help when the time comes to add volume to our sprite in a convincing/feasible way. Using four colors is more than enough to be able to describe virtually any volume in our limited space format.

In this is an example of two palettes, the first one is for clothes and the second one for the skin.

This is just to make a clear idea about that each palette is composed by two tuples, one for lights the other for shadows.

Local color

In painting, the technique of local color consists in filling up the elements of the composition with their most representative colors. After everything gets it’s color we keep working inside the defined elements in order to make relations between them in terms of light and shadows, but without mixing the palettes. In other words, every single element has a different palette, thus coexisting separately only by the composition and not by their color. I like to do something very similar with my Sprites, and I preffer to use the darkest light color to do so.

Darkest light color of our palettes.

For now, we won’t care about the interaction between the colors in our Sprite. We only want to create isolated color regions. For instance, if we are making a Zombie Sprite, the skin shall be a region and the clothes should be another one.

Note: If we want to make our sprite more interesting, we can even split a region into sub-regions, but we must be careful.  If we split a region too much, we could loose synthesis, and synthesis is key, so be sure to limit the number of regions per sprite.

To illustrate the concept of Region Splitting, let’s say we have a Region called “Cloth”. We could then split it into two new regions “T-Shirt “ and “Trousers” to add more detail to our Sprite. Remember, we are considering that both regions where planned as different elements in terms of colors, material, or even meaning.


Adding Volume

After arriving to a satisfactory region set, another sketching iteration should begin. This phase has the main goal of making a brief description of the game sprite as a “Colored Volume”. For this I tend to choose the “darkest illumination color” for shadows and the “clearest shadow color” for lights of each of the colors that where used in the regions.

The center colors of both palettes are the ones that we will use now.

The important thing to notice about this phase is that we still looking our sprite as a set of isolated regions. But what we will try to do here, is to describe the different regions that  now compose our sprite with simple volumes using only the center of both palettes as mentioned before.

Generated a “Colored Volume” only using the central colors of our palettes.

It is important to notice that it’s not the job of the colors to make the sprite stand-out. It’s the region treatment in terms of volume characterization (light/dark), what will bring our sprite to life (Remember that you can always feel free to choose your favorite combination of colors for your sprite regions).

I preffer to resolve the naked bodies before starting to work on the Clothes. This helps a lot to understand where and how will you add the dressing elements to your Sprite. It can also help you to identify how to illuminate this elements properly.

In the case of working with humanoid shapes, it is very useful to have at least a basic anatomy knowledge. However in case of not feeling confident about it, you can Google around. A lot of muscular description models can be found on the net, the same applies to clothes and weapons. In the particular case of clothes, checking out classical sculptures of the Hellenistic Greek period can help a lot.

Why Cell coloring?

I tried many times to make a realistic sprite in terms of coloring and lightning, using many colors as possible to make a perfect gradation between light and dark to make volumes look very realistic. I consider, in my humble opinion, this does not look nice in 2d Sprites without a strict management of the light source. To look nice, every single element on the screen must be under same kind of light, and that means

  1. Same relation between light zones and dark zones (how dark and how bright everything is).

  2. The Color of the light must be the same for everything, and I really recommend to use other color than white.

Working this way is very difficult, takes longer, and at many cases does not look very nice at all and can be really frustrating.

On the other hand, cell coloring gives you freedom in terms of color selection, working in the volume description can be extremely fast, and in a lot of games we can see this kind of sprites working very nicely over backgrounds done with varied techniques, treatments, palettes and  in some cases even a high degree of realism (like some iterations of Street Fighter for example).

Because of the reasons proposed, I believe that cell coloring is the most appropriate solution to develop 2D Sprites, at least for me.

Note: ordering yourself


In the previous step, it is a good idea to divide our sprite in parts (legs, torso, head, arms…etc.), and use different layers for them. Even if it’s the slower thing to do for now, it will save us quite a bit  of time if we need to animate it later.

Characterization and Details

After we resolve the bodies, we will start working on every detail that will characterize our sprite (cloth, eyes, weapons, etc.). As i said above, we can repeat the idea of region coloring for clothes, but is important to mention that at this point I like to give more freedom to color selection than before. For example the color for the eyes could be completely different to every single color in our sprite in order to highlight them. Another example; if you are thinking on small details for the clothes, the colors you can choose can be completely out of the “clothe palette”, but you should be aware that this doesn’t mean that any color we pick for the “details” will look fine on your sprite.

Conclusion

We started working from a super synthetic Sprite to a final version with the details that should make it look as the one we planned (or at least very similar). The nice thing about working in this way, is that in my opinion, you can go straight to the idea that you have in mind, from sketch to full featured pixel sprite. Working from a synthetic version to a detailed one progressively gives you one big plus: the chance to stop at any point and realize that you don’t need to add more details.

A typical case is to finish a sprite, only to look back at 100% scale, and say “Hey!, This looks really bad!”. Pushing pixels is a very tricky way of work, because you are working with an enormous zoom most of the time, so a detail could look awesome with a big zoom, but once you go 100% scale, it can actually look quite bad.

So as a piece of advice, always review your work at 100% scale to be sure that you are working well, but it’s also wise to stop in every step pointed out and question yourself  ”where I am going with this sprite?“, “do I really need to work more on this?”, “is this level of detail fine for a functional sprite ?”.

The second thing that you must have in mind is that sprite design is only  50% of the work, the other 50% is about animation. This sounds obvious, but this 50/50 is not equivalent at all. I mean that a bad animation can destroy even the most amazing fully detailed and outstanding at 100% view sprite. But a good animation can make the most poorly designed sprite to look spectacular. It’s quite obvious that a synthetic sprite can be animated easier than a complex one, so always feel comfortable with the simplicity, as we said at the beginning, synthesis is the key.

Be sure to check other tutorials in the tutorials section!