Time Recoil is a top-down shooter by 10tons - the creators of Crimsonland and Neon Chrome. In Time Recoil you'll kill to slow time, witness top-down Hollywood-style slow motion gunfights, trigger devastating special moves, and travel in time via wormholes. Can you change the past and save the world?

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
Sign in or join with:

Only registered members can share their thoughts. So come on! Join the community today (totally free - or sign in with your social account on the right) and join in the conversation.

Follow Report Profile
Icon
Time Recoil
Platforms
Windows, Mac, iOS, XONE, PS4
Developer & Publisher
10tons
Engine
Custom
Contact
Send Message
Homepage
Timerecoil.com
Release date
Game watch
Follow
Feature
Browse
Features
Report
Report
Share
Related Games
Time Recoil
Time Recoil Third Person Shooter
Related Groups
10tons
10tons Developer & Publisher with 3 members
Indie Devs
Indie Devs Hobbies & Interests with 1,547 members
Indie Gamers
Indie Gamers Hobbies & Interests with 1,518 members
Science fiction fans
Science fiction fans Arts & Literature with 762 members