Unity3D - 用于精灵剪辑的着色器答案

【问题标题】：Unity3D - Shader for sprite clippingUnity3D - 用于精灵剪辑的着色器
【发布时间】：2014-04-19 04:38:06
【问题描述】：

我正在尝试创建一个可用于在游戏中剪辑 2D 精灵的着色器，我在 another question 找到了这个着色器

Shader "Sprites/ClipArea"
{
Properties
{
    _MainTex ("Base (RGB), Alpha (A)", 2D) = "white" {}
    _Length ("Length", Range(0.0, 1.0)) = 1.0
    _Width ("Width", Range(0.0, 1.0)) = 0.5
 }

SubShader
{
    LOD 200

    Tags
    {
        "Queue" = "Transparent"
        "IgnoreProjector" = "True"
        "RenderType" = "Transparent"
    }

    Pass
    {
        Cull Off
        Lighting Off
        ZWrite Off
        Offset -1, -1
        Fog { Mode Off }
        ColorMask RGB
        Blend SrcAlpha OneMinusSrcAlpha

        CGPROGRAM
        #pragma vertex vert
        #pragma fragment frag

        #include "UnityCG.cginc"

        sampler2D _MainTex;
        float4 _MainTex_ST;
        float _Length;
        float _Width;

        struct appdata_t
        {
            float4 vertex : POSITION;
            float2 texcoord : TEXCOORD0;
        };

        struct v2f
        {
            float4 vertex : POSITION;
            float2 texcoord : TEXCOORD0;
        };

        v2f vert (appdata_t v)
        {
            v2f o;
            o.vertex = mul(UNITY_MATRIX_MVP, v.vertex);
            o.texcoord = v.texcoord;
            return o;
        }

        half4 frag (v2f IN) : COLOR
        {
            if ((IN.texcoord.x<0) || (IN.texcoord.x>_Width) || (IN.texcoord.y<0) || (IN.texcoord.y>_Length))

            {
                half4 colorTransparent = half4(0,0,0,0) ;
                return  colorTransparent ;
            }
            return tex2D(_MainTex, IN.texcoord);
        }
        ENDCG
    }
}
}

在单个精灵上完美运行，但我使用的是精灵表，由 Unity Sprite 编辑器划分。

着色器中的 _Width 变量覆盖了整个精灵表，而不是我正在处理的精灵。我搜索了一种在着色器中获取当前精灵矩形的方法，但找不到任何东西。

【问题讨论】：

标签： unity3d shader sprite 2d-games

【解决方案1】：

好吧，在拉了三天头发后，我设法找到了解决方法。在搜索了有关着色器如何工作以及在管道中的作用的更多信息后，我意识到精灵矩形信息可能在着色器中不可用，原因很简单，几乎所有着色器（除了我的）的功能都不需要此信息，因为着色器的工作是取一个顶点，通过顶点函数修改它的位置（如果需要），然后通过片段函数决定它的像素颜色，它不关心整个精灵，它只需要查找像素使用纹理坐标为纹理中的某个顶点着色。我确信这对于从事着色器工作的人来说是微不足道的信息，但我花了一些时间才意识到这一点（这是我的第一个着色器）。因此，作为一种解决方法，我必须使用着色器属性将着色器正在处理的当前精灵的 MinX 和 MaxX 传递到精灵表中，所以着色器现在看起来像这样：

Shader "Sprites/ClipArea"
{
    Properties
    {
        _MainTex ("Base (RGB), Alpha (A)", 2D) = "white" {}
        _Fill ("Fill", Range(0.0, 1.0)) = 1.0
        _MinX ("MinX", Float) = 0
        _MaxX ("MaxX", Float) = 1
     }

    SubShader
    {
        LOD 200

        Tags
        {
            "Queue" = "Transparent"
            "IgnoreProjector" = "True"
            "RenderType" = "Transparent"
        }

        Pass
        {
            Cull Off 
            Lighting Off
            ZWrite Off
            Offset -1, -1
            Fog { Mode Off }
            ColorMask RGB
            Blend SrcAlpha OneMinusSrcAlpha

            CGPROGRAM
            #pragma vertex vert
            #pragma fragment frag

            #include "UnityCG.cginc"

            sampler2D _MainTex;
            float4 _MainTex_ST;
            float _MinX;
            float _MaxX;
            float _Fill;

            struct appdata_t
            {
                float4 vertex : POSITION;
                float2 texcoord : TEXCOORD0; 
            };

            struct v2f
            {
                float4 vertex : POSITION;
                float2 texcoord : TEXCOORD0;
            };

            v2f vert (appdata_t v)
            {
                v2f o;
                o.vertex = mul(UNITY_MATRIX_MVP, v.vertex);
                o.texcoord = v.texcoord;
                return o;
            }

            half4 frag (v2f IN) : COLOR 
            {
            if ((IN.texcoord.x<_MinX)|| (IN.texcoord.x>(_MinX+_Fill*(_MaxX-_MinX))))
                {
                    half4 colorTransparent = half4(0,0,0,0) ;
                    return  colorTransparent ;
                }
                return tex2D(_MainTex, IN.texcoord);
            }
            ENDCG
        }
    }
}

要使用此着色器，您需要创建一个使用它的材质，然后在 SpriteRenderer 中使用该材质，您可以从检查器中更改填充量、MinX 和 MaxX，或调用 spriteRenderer.material.setFloat(属性，值）来自代码。

然后我遇到了动画精灵的另一个问题，我不得不在每一帧上不断更新 MinX 和 MaxX，但是当我在 Update 函数中这样做时，动画开始闪烁，那是因为更新是在精灵之后调用的已渲染，因此我不得不使用 Main Camera OnPreRender 事件来更新材质属性。

也许有更好的方法来实现这一切，但这是我能想到的最好的方法，我希望这对试图达到同样效果的人有所帮助。

【讨论】：

同样的事情对我不起作用，应用此着色器后，我目前有白色材料。我只有简单的精灵而不是精灵表。
很好的解决方案。它也适用于其他情况，例如，如果您只想从某些区域剪辑图像。我要添加的一个愿望清单项目是从任一侧剪辑。您可以使用 minX 来实现这一点（增加 minX 而不是减少填充），这也很好。

【解决方案2】：

我改进了 Khaled-AbuA-lkheir 着色器，添加了基本精灵颜色：

Shader "Sprites/ClipArea"
{
    Properties
    {
        _MainTex ("Base (RGB), Alpha (A)", 2D) = "white" {}
        _Fill ("Fill", Range(0.0, 1.0)) = 1.0
        _MinX ("MinX", Float) = 0
        _MaxX ("MaxX", Float) = 1
     }

    SubShader
    {
        LOD 200

        Tags
        {
            "Queue" = "Transparent"
            "IgnoreProjector" = "True"
            "RenderType" = "Transparent"
        }

        Pass
        {
            Cull Off 
            Lighting Off
            ZWrite Off
            Offset -1, -1
            Fog { Mode Off }
            ColorMask RGB
            Blend SrcAlpha OneMinusSrcAlpha

            CGPROGRAM
            #pragma vertex vert
            #pragma fragment frag

            #include "UnityCG.cginc"

            sampler2D _MainTex;
            float4 _MainTex_ST;
            float _MinX;
            float _MaxX;
            float _Fill;

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

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

            v2f vert (appdata_t v)
            {
                v2f o;
                o.vertex = mul(UNITY_MATRIX_MVP, v.vertex);
                o.texcoord = v.texcoord;
                o.color = v.color;
                return o;
            }

            half4 frag (v2f IN) : COLOR 
            {
                if ((IN.texcoord.x<_MinX)|| (IN.texcoord.x>(_MinX+_Fill*(_MaxX-_MinX))))
                {
                    half4 colorTransparent = half4(0,0,0,0) ;
                    return  colorTransparent ;
                }
                else
                {
                    return tex2D(_MainTex, IN.texcoord)*IN.color;
                }
            }
            ENDCG
        }
    }
}

【讨论】：

【解决方案3】：

我将其删除是因为我认为它很有用：我添加了设置 _MinX 大于 _MaxX 的可能性。这样，您就有了“从右到左”的剪辑，而不是“从左到右”。

Shader "Sprites/ClipArea"
{
Properties
{
    _MainTex("Base (RGB), Alpha (A)", 2D) = "white" {}
    _Fill("Fill", Range(0.0, 1.0)) = 1.0
    _MinX("MinX", Float) = 0
    _MaxX("MaxX", Float) = 1
}

    SubShader
    {
        LOD 200

        Tags
        {
            "Queue" = "Transparent"
            "IgnoreProjector" = "True"
            "RenderType" = "Transparent"
        }

        Pass
        {
            Cull Off
            Lighting Off
            ZWrite Off
            Offset -1, -1
            Fog { Mode Off }
            ColorMask RGB
            Blend SrcAlpha OneMinusSrcAlpha

            CGPROGRAM
            #pragma vertex vert
            #pragma fragment frag

            #include "UnityCG.cginc"

            sampler2D _MainTex;
            float4 _MainTex_ST;
            float _MinX;
            float _MaxX;
            float _Fill;

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

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

            v2f vert(appdata_t v)
            {
                v2f o;
                o.vertex = UnityObjectToClipPos(v.vertex);
                o.texcoord = v.texcoord;
                o.color = v.color;
                return o;
            }

            half4 frag(v2f IN) : COLOR
            {
                if (_MinX < _MaxX && ((IN.texcoord.x < _MinX) || (IN.texcoord.x > (_MinX + _Fill * (_MaxX - _MinX)))) ||
                    _MinX > _MaxX && ((IN.texcoord.x > _MinX) || (IN.texcoord.x < (_MinX + _Fill * (_MaxX - _MinX)))))
                {
                    return half4(0, 0, 0, 0);
                }
                else
                {
                    return tex2D(_MainTex, IN.texcoord) * IN.color;
                }
            }
            ENDCG
        }
    }
}

【讨论】：