Detailing levels with palette shifting

Creating a game with only 4 colours may seem easy, but it presented many challenges that games in colour don't have.

I'll explain in a future post the principles I used to draw many of the tiles that make up the levels you can play in the demo, but for now I will show you how you can reuse your sprites by shifting the colours to adapt them to the different brightness of the levels.

Look at the two following screenshots:

As you can see the packed crates all look similar, but they are blended with the background or foreground according to their placement in the level. In fact they all come from the same spritesheet. One of the golden rules I followed to style the game was that tiles and actors you can interact with should display they full range of 4 colors. In the first screenshot you can see that the crates with black borders and white labels can be stepped on, while the more bright ones are in the background.

This can be done by shifting the colours up or down on the grey scale with a simple material. Here's the full shader.

Since the colors used are greys at 0, 0.33, 0.66 and 1 (in float values), I just need to shift them by 0.33 each time I want to change color.

The first step is converting the sprite color to sRGB color space, in order to apply the calculations correctly. Then I add (or subtract) the aforementioned 0.33 for each shade of grey I want to shift. I made it easy with a scalar parmeter that gets rounded to the nearest integer and divided by 3.

After that, I simply clamp the colours to two shades (that means cutting out every color that doesn't fit a range) that default to 0 and 1, in case I want to have less contrast in my sprite.

Using UE4 material instances I created some new materials that just shift the colors up and down by setting the "Shift" parameter, ready to be applied to the sprites placed in the levels.