Multiple Overlay Textures Shader (Card components on a card)

Unity Engine
1

Hi I am working on a card game and I am new to shaders.
I have a card which has Mana Cost, Name, Type, Description, etc. Some are text but parts of the art will change based on the type of card. Right now I just have each card component in different sprites with their position slightly higher than the order. This works for now, but to get effects like dissolving entire card I would need all the components onto 1 Mesh.

What I am wondering is if there is a way to just use shader code combined with a card script so that it writes each component’s textures onto the coordinates layered on top of each other instead of just using different sprites positioned on top of each other.

Is it possible to do all this in 1 pass? Can I do multiple vertex and fragment pragma in 1 pass or do I need a separate pass for each different texture I am overlaying onto the mesh?

Properties {
        _Color {"Color", Color} = {1.0, 1.0, 1.0, 1.0}
    }
    SubShader {
        Tags {
            "IgnoreProjector" = "True"
            "Queue" = "Transparent"
            "RenderType" = "Transparent"
        }
        // Overlay components of card onto card
        Pass {
            Name "ComponentsOverlay"
           
            CGPORGRAM
            #pragma vertex vert
            #pragma fragment frag

            // user defined variables
            uniform float4 _Color;
            uniform sampler2D _OverlayTexture;
            uniform float4 _OverlayTextureColor;
   
            // base input structs
            struct vertexInput {
                float4 vertex : POSITION;
                float2 texcoord : TEXCOORD1;
            };
            struct vertexOutput {
                float4 vertex : SV_POSITION;
                float2 texcoord : TEXCOORD1;
            };

            // vertex function
            vertexOutput vert(vertexInput v) {
                vertexOutput o;
                o.vertex = UnityObjectToClipPos(v.vertex + float4(0, 0, 0.001, 0));
                o.texcoord = v.texcoord;

                return o;
            }

            // fragment function
            float4 frag(vertexOutput o) : COLOR
            {
                // overlay texture
                float4 overlaytex = tex2D(_OverlayTexture, TRANSFORM_TEX(o.texcoord, _OverlayTexture));
                overlaytex *= _OverlayTextureColor;
                if (overlaytex.a < 0.1) discard;

                return overlaytex;
            }
            ENDCG
        }
    }
    FallBack "Diffuse"
2

Hi xtimus,

why not render each card you use to a texture with all the text and overlay images? Then you can use this texture on a card and do the effects.

3

That would be a way to do it, but it would be non-procedural and it would result in excess space. If you are referring to rendertexture, that is also a way I can go about this too. I am just wondering if there’s other ways.

After playing around with the shader code I found I can put multiple textures on top of each other in 1 pass. However, another problem I came across it, it stretches all textures to the size of the UV map. Is there a way to keep the size of textures relative to a reference texture (one texture which is the size of entire card, then all other texture sizes are relative to it)?

Right now I still think just superimposing each separate component of the card on different sprite layers is the best way to go about this.

Pass {
            //Name "ComponentsOverlay"
            Blend SrcAlpha OneMinusSrcAlpha

            CGPROGRAM
            #pragma vertex vert
            #pragma fragment frag
  
            #include "UnityCG.cginc"

            // user defined variables
            uniform sampler2D _BaseTexture;
            uniform float4 _BaseTexture_ST;
            uniform sampler2D _FrameTexture;
            uniform float4 _FrameTexture_ST;
  
            // base input structs
            struct vertexInput {
                float4 vertex : POSITION;
                float2 texcoord : TEXCOORD0;
            };
            struct vertexOutput {
                float4 vertex : SV_POSITION;
                float2 texcoord : TEXCOORD0;
            };

            // vertex function
            vertexOutput vert(vertexInput v) {
                vertexOutput o;
                o.vertex = UnityObjectToClipPos(v.vertex + float4(0, 0, 0.001, 0));
                o.texcoord = v.texcoord;
              
                return o;
            }

            // fragment function
            float4 frag(vertexOutput IN) : COLOR
            {
                // overlay texture
                
                float4 baseTex = tex2D(_BaseTexture, TRANSFORM_TEX(IN.texcoord, _BaseTexture));
                float4 frameTex = tex2D(_FrameTexture, TRANSFORM_TEX(IN.texcoord, _FrameTexture));

                float4 finalTex = lerp(baseTex, frameTex, frameTex.a*1);

                if (finalTex.a < 0.1) discard;
                return finalTex;
            }
            ENDCG
        }
4

When it comes to fill rate, which is mainly important on mobile platforms, composing the layers in the shader is the best way. The uv you use to sample the texture, is exactly that. But you can of course change that for each texture sample. It’s best to do this in the vertex shader to avoid dependent texture lookups.

struct vertexInput {
   float4 vertex : POSITION;
   float2 texcoord : TEXCOORD0;
};
struct vertexOutput {
   float4 vertex : SV_POSITION;
   float2 texcoord1 : TEXCOORD0;
   float2 texcoord2 : TEXCOORD1;
   float2 texcoord3 : TEXCOORD2;
};
vertexOutput vert(vertexInput v) {
   vertexOutput o;
   o.vertex = UnityObjectToClipPos(v.vertex + float4(0, 0, 0.001, 0));
   o.texcoord1 = v.texcoord;
   o.texcoord2 = float2(2.0, 2.0) * v.texcoord;
   o.texcoord3 = float2(4.0, 4.0) * v.texcoord;
   return o;
}
float4 frag(vertexOutput IN) : COLOR {
   float4 layer1 = tex2D(_Texture1, IN.texcoord1);
   float4 layer2 = tex2D(_Texture2, IN.texcoord2);
   float4 layer3 = tex2D(_Texture3, IN.texcoord3);
   float4 composed = lerp(layer1, layer2, layer2.a);
   composed = lerp(composed, layer3, layer3.a);
   clip(composed - 0.1);
   return composed;
}

Do set those textures to clamp to prevent them from repeating all over the card.

5

Here’s another problem. My sprites are in an atlas. I played around with using shader to place textures ontop of each other and I see that I can adjust the scale and position of the textures but since my sprites are in an atlas I can only select the entire atlas as the texture instead of the sprite within the atlas. If I place the atlas ontop of a layer then it shows the other parts of the atlas and covers up what is beneath with the unwanted sprites of the atlas. In the image below I only want to show the left “pole” and not the other yellow stuff.

1794×1337 294 KB

6

This is kind of why they’re not combined into a single shader to begin with, but it can be solved.

The short version is you’ll need another set of values for each texture to define the min-max UV area for each sprite and skip the lerp when outside the range.