• Register
Post feature Report RSS Time Recoil - Color grading or how to turn your game black & white

The post describes how to use color grading in games to introduce more variety and fine tune visual style.

Posted by on

Color grading is a useful tool when you want to deliver different moods and feelings or fine tune any color aspects of an image. It is universally used in films and in most games. Color grading is basically the procedure of manipulating the colors in the image in order to modify the feeling and the atmosphere it communicates. Sometimes it is super subtle and sometimes very straightforward.

The images are from our upcoming game Time Recoil: Store.steampowered.com

The idea in the game is that when you kill someone, the time slows down. Basically: Kill to Slow Time.

One of the oldest tricks of color grading in film is to make day scenes look more like night scenes. This is done because it is much easier to shoot with some light and then make the scene more "nighty" in color grading. Sometimes this has produced comical results in film when there are stark shadows from sunlight in scenes where sun should have set. However, if done properly, it can look quite convincing.

The basic idea used by many games and other software is in the image above: You determine where the color is in the look up table (LUT) and then return the color the table has. You can determine this location from calculating the red, green and blue components of the sampled color.

In these LUTs the blue component increases with each "bigger square". The green component increases from top to bottom and the red component from left to right (within each bigger square). You could also imagine this as a 3D texture by stacking the "bigger squares". Some engines use 3D textures but in this case it is a flat 2D texture - it is also easier to paste into an image...

The image above is the unmodified image. The look up table at the top (LUT) is neutral.

For the more technical people, here's the simple shader code which basically returns a graded color for a sampled color. The lut_psize is basically the "step size" for the LUT - in this case 1/256 and 1/16 for LUTs of 256x16.

You could use larger LUTs, but with interpolation this size seems to work well enough for us. This supports two simultaneous LUTs and it has a fader to fade between those. The sample code is written in our own proprietary NXSL, but you can probably see it reminds HLSL a lot.

float3 ColorGrading(float3 color)
{

    float2 lut_psize = float2(0.00390625f, 0.0625f);
    float4 lut_uv = 0;

    color.b *= 15.0f;

    lut_uv.w  = min(floor(color.b), 15.0f);

    lut_uv.xy = color.rg * 15.0f * lut_psize + 0.5f * lut_psize ;
    lut_uv.x += lut_uv.w * lut_psize.y;

    float3 shade1 = lerp(sampleTexture(texture.color_grading_bm1, lut_uv.xy).rgb, sampleTexture(texture.color_grading_bm2, lut_uv.xy).rgb, color_grading_fader);
    float3 shade2 = lerp(sampleTexture(texture.color_grading_bm1, lut_uv.xy + float2(lut_psize.y, 0)).rgb, sampleTexture(texture.color_grading_bm2, lut_uv.xy + float2(lut_psize.y, 0)).rgb, color_grading_fader);

    color.rgb  = lerp(shade1, shade2, color.b - lut_uv.w);

    return color;
}

This is a widely used warmer color scheme in the game. You can see how the LUT has changed.

It is quite easy to make different LUTs.

  1. Grab a neutral screenshot(s) from the game.
  2. Paste the shot into an image editor along with a neutral LUT
  3. Start tweaking the colors but make sure both the shot and the LUT are changed simultaneosly.
  4. After satisfied with the results, cut the 256x16 (in this case) LUT from the image and save it into a separate file and load it as a LUT for your engine.

The process is quite similar in different engines including UE4 and Unity.

This is a blueish scheme used when player freezes the time. The game fades between two LUTs when going into different schemes.

This posterized scheme is used in dream scenes. The LUT looks suitably posterized as well.

A color scheme that replaces some hues with greys. You can seee the grey "blob" in the LUT at the top of the image.

Thanks for reading! Check out the game on Steam if a top-down shooter where you kill to slow time sounds interesting:

Post a comment

Your comment will be anonymous unless you join the community. Or sign in with your social account: