Doggo Chess (chess starring dogs w/ new pieces, game modes, maps, more)

Making Sprites Pop w/ Hue Shifting

Hue shifting, before and after.

Hi all! This post is all about how I used hue shifting to make my sprites look better, the general idea behind hue shifting, and some examples.

Why hue shifting?

When I first started to create Doggo Chess, I was just trying to make a quick fun project with no intention of releasing it -- I was pretty bad at choosing my colors.

As a result, the original colors were very muddy:

But after watching two friends play, one kept attempting to use the opposing side's pieces because he couldn't tell the colors apart. This was no good and kicked off re-coloring the sprites.

Fortunately while working on Doggo Chess I discovered the book Pixel Logic by Michafrar and worked on a few side projects to improve my use of color, subpixeling, and anti-aliasing -- all things taught in his awesome book.

Here's an example:

So let's apply one major color technique -- hue shifting -- to Doggo Chess to improve the colors.

What is hue shifting?

Hue shifting is a technique where we shift the hue as our primary technique for shading. It gives your art a much more vibrant look as well helping you avoid muddy colors by relying less on saturation and value for shading. First we need to understand what hue, saturation, and value are (HSV).

Hue is what we think of as the pigment -- where does the color land on the color wheel. Is this a blue, red, green, magenta, etc.
Saturation is how full of pigment our color is. How full-bodied is the color.
Value is how light or dark the color is. A higher value means the color will be lighter.
For example a high value, low saturation color within the blue hue would give us a baby blue pastel.

Let's dive in

Typically hue shifting is done by moving your base color closer to yellow for lighter shades and closer to purple for darker shades. Let's use our Dark Bishop to see what the shades look like with and without hue shifting.

Here is our old, muddy looking dark bishop. Here we can see our lightest and darkest values of our bishop share a hue -- the only differences here is the darker color has a little more saturation than the highlight and has a much lower value.

Now let's look at the new dark bishop.

Here we can see that we hue shift from a lighter -- almost sea foam blue -- to purple. We also increase the saturation of our midtones. Just with these changes we can see the sprite move into the foreground. Here we are using the traditional hue shifting method moving toward yellow for highlights and purple for shadows and keeping it tightly around our base hue but let's experiment taking hue shifting in a different direction.

Here we are moving toward purple for our highlights and green for our shadows. To me this gives a very neat dungeon look that I'd love to experiment with in the future for another game.

Thank you for reading!

I hope you found this helpful and that you can use hue shifting to improve the look of your game.

I learned this technique from Michafrar's book Pixel Logic. This is an amazing book and one that I can't recommend it enough. Buy this book! Here is his Twitter and a link to where you can get Pixel Logic.

https://twitter.com/Michafrar
https://pixellogicbook.com/

Also here's Doggo Chess's website. Sign up for the newsletter.
Website: doggochess.com

Also feel free to DM me on here, Discord, or Twitter.

Thank you,

Charles