Table of Contents

Custom color transforms

Advanced Programmer

You can write your own custom color transform effects. For example, you can create:

  • water droplets on the camera
  • screen transitions (such as fade-ins and fade-outs)
  • effects simulating pain or intoxication (eg by applying tints or other effects)
  • object outlines

To create a custom color transform, you need to write two files: an effect shader (containing the effect itself), and a C# class (to make the effect accessible in Game Studio).

1. Create a shader

  1. Make sure you have the Stride Visual Studio extension installed. This is necessary to convert the shader files from SDSL (Stride shading language) to .cs files.

  2. In Game Studio, in the toolbar, click Open in IDE (Open in IDE) to open your project in Visual Studio.

  3. In the Visual Studio Solution Explorer, right-click the project (eg MyGame.Game) and select New item.

    New item

  4. Select Class.

    Select class

  5. In the Name field, specify a name with the extension .sdsl (eg MyColorTransformShader.sdsl), and click Add.

    Create post effect

    The Stride Visual Studio extension automatically generates a .cs file from the .sdsl file. The Solution Explorer lists it as a child of the .sdsl file.

    My post effect

  6. Open the .sdsl file, remove the existing lines, and write your shader.

    Shaders are written in Stride Shading Language (SDSL), which is based on HLSL. For more information, see Shading language.

    For example, the shader below multiplies the image color by the MyColor parameter:

    shader MyColorTransformShader : ColorTransformShader
    {
        [Color]
        float4 MyColor;
    
        override float4 Compute(float4 color)
        {
            return color * MyColor;
        }
    };
    
    Note

    Make sure the shader name in the file (eg MyColorTransformShader in the code above) is the same as the filename (eg MyColorTransformShader.sdsl).

2. Create a C# class

  1. In the Visual Studio Solution Explorer, right-click the project (eg MyGame.Game) and select Add > New item.

    New item

  2. Select Class, specify a name (eg MyColorTransform.cs), and click Add.

    Add script

    Open the file and write the class.

    For example, the code below creates the class MyColorTransform, which uses the shader and supplies a value for the color MyColor (defined in the shader).

    using Stride.Core;
    using Stride.Core.Mathematics;
    using Stride.Rendering;
    using Stride.Rendering.Images;
    
    namespace MyGame
    {
        [DataContract("MyColorTransform")]
        public class MyColorTransform : ColorTransform
        {
            /// <inheritdoc />
            public MyColorTransform() 
                : base("MyColorTransformShader")
            {
            }
    
            public Color4 MyColor { get; set; }
    
            public override void UpdateParameters(ColorTransformContext context)
            {
                Parameters.Set(MyColorTransformShaderKeys.MyColor, MyColor);
    
                // Copy parameters to parent
                base.UpdateParameters(context);
            }
        }
    }
    
    Note

    Make sure the class name in the file (eg MyColorTransform in the class above) is the same as the filename (eg MyColorTransform.cs).

  3. Save all the files in the solution (File > Save All).

  4. In Game Studio, reload the assemblies.

    Reload assemblies

    The Asset View lists the class and effect shader in the same directory as your scripts (eg MyGame.Game).

    Shader in Asset View

    Note

    In some situations, Game Studio incorrectly detects the shader as a script, as in the screenshot below:

    Shader as script

    If this happens, restart Game Studio (File > Reload project).

3. Use a custom color transform

  1. In the Asset View (in the bottom pane by default), double-click the Graphics Compositor asset.

    Graphics Compositor asset

    The graphics compositor editor opens.

    Graphics Compositor editor

  2. Select the Post-processing effects node.

  3. In the Property Grid, under Color transforms, click Green plus button (Change) and select your color transform (eg MyColorTransform).

    Add script

  • To enable and disable the effect, use the check box next to the item.

    Enable and disable custom post effect

  • To edit the public properties you specified in the class, expand the item.

    Expand item

    When you adjust the properties, Game Studio updates the effect automatically.

Warning

Unfortunately, this part of Game Studio has a memory leak problem. Every time you change a value in the graphics compositor, it uses 60MB of memory. To prevent Game Studio using too much memory, we recommend you restart it after you change a property a few times. This is a known issue.

See also