How can I fully or partially colorize a SpriteRenderer and make its "color" value match the end result at 100% opacity?

Question

I have a GameObject that looks like this:

When I change the "color" value in the GameObject's SpriteRenderer to be (255, 0, 0, 255), the GameObject ends up looking like this:

But I want it to look this like instead:

What methods can I use to accomplish this?

My goal is to have it be dynamic so that it can range anywhere from "0% red" (the original colors) to "100% red" (entirely red, except for the transparent pixels).

For example, I want 50% red to look roughly like this:

Answer 1

After much trial and error, I was able to achieve what I wanted by modifing Unity's default "GUI/Text Shader" shader, which I downloaded from here under "Downloads (Win)" > "Built in shaders".

I have very little idea how shaders work, but here's my crude explanation of what I think is happening in the shader code below:

1. It stores the original pixel art in a variable named fixed4 sprite_texture
2. It stores a solid colored copy of the pixel art, painted with the SpriteRenderer's current color, in a variable named fixed4 solid_color
3. It merges the two variables together using lerp, with the SpriteRenderer's current color's alpha value being used to determine how much the original pixel art should be colorized.

Once that shader has been applied to a GameObject's SpriteRenderer's material, I can easily change the GameObject's color through its MonoBehavior code.

Usage example (C#):

"0% red":

this.sprite_renderer.color = new Color(1f, 0f, 0f, 0f);

"50% red":

this.sprite_renderer.color = new Color(1f, 0f, 0f, .5f);

"100% red":

this.sprite_renderer.color = new Color(1f, 0f, 0f, 1f);

I'm not sure if there any drawbacks to this approach, but from what I can tell, it's easy to use, supports all colors (including pure white and black), and supports pixel art with a transparent background, which is exactly what I wanted.

Usage example (GUI):

Full shader code:

Shader "DynamicColorShader"
{
    Properties
    {
        _MainTex ("Font Texture", 2D) = "white" {}
    }

    SubShader
    {
        Tags
        {
            "Queue"="Transparent"
            "IgnoreProjector"="True"
            "RenderType"="Transparent"
            "PreviewType"="Plane"
        }

        Lighting Off Cull Off ZTest Always ZWrite Off
        Blend SrcAlpha OneMinusSrcAlpha

        Pass
        {
            CGPROGRAM
            #pragma vertex vert
            #pragma fragment frag
            #pragma multi_compile _ UNITY_SINGLE_PASS_STEREO STEREO_INSTANCING_ON STEREO_MULTIVIEW_ON
            #include "UnityCG.cginc"

            struct appdata_t
            {
                float4 vertex : POSITION;
                fixed4 color : COLOR;
                float2 texcoord : TEXCOORD0;
                UNITY_VERTEX_INPUT_INSTANCE_ID
            };

            struct v2f
            {
                float4 vertex : SV_POSITION;
                fixed4 color : COLOR;
                float2 texcoord : TEXCOORD0;
                UNITY_VERTEX_OUTPUT_STEREO
            };

            sampler2D _MainTex;
            uniform float4 _MainTex_ST;
            uniform fixed4 _Color;

            v2f vert (appdata_t v)
            {
                v2f o;
                UNITY_SETUP_INSTANCE_ID(v);
                UNITY_INITIALIZE_VERTEX_OUTPUT_STEREO(o);
                o.vertex = UnityObjectToClipPos(v.vertex);
                o.color = v.color;
                o.texcoord = TRANSFORM_TEX(v.texcoord,_MainTex);
                return o;
            }

            fixed4 frag (v2f IN) : SV_Target
            {
                fixed4 sprite_texture = tex2D (_MainTex, IN.texcoord);

                fixed4 solid_color = IN.color;
                solid_color.a *= tex2D(_MainTex, IN.texcoord).a;

                fixed4 final = lerp(sprite_texture, solid_color, solid_color.a);

                return final;
            }
            ENDCG
        }
    }
}

Answer 2

The "color" parameter on a sprite renderer is applied as a tint, multiplied by the original texture colour. So it can only ever make colours darker in each of the red/green/blue channels — it can't "add red" where there was no red before.

If you don't want to write a custom shader, you can also just make a version of this sprite texture that has the same opacity (the same pattern of transparent and non-transparent pixels), but where all the pixel colours are white (255, 255, 255), which is (1f, 1f, 1f) when normalized. One multiplied by any other number is just that other number itself, so this lets you get your tint colour to output directly as the display colour.

If you sometimes want the multicolour version and sometimes the plain red version, you can swap the sprite renderer's sprite property at the same time that you change the tint colour.

Answer 3

You don't want to change the SpriteRenderer's color, but its shader (find it in SpriteRenderer.material.shader), so that it reduces any underlying image colour to one predefined colour.

You may check this: https://answers.unity.com/questions/1546026/shader-to-set-sprite-to-solid-color.html

And this: https://answers.unity.com/questions/582145/is-there-a-way-to-set-a-sprites-color-solid-white.html