Unity3D - 用于精灵剪裁的着色器

时间:2014-04-19 04:38:06

标签: unity3d shader sprite 2d-games

我正在尝试创建一个可用于在游戏中剪辑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变量覆盖整个精灵表,而不是我正在处理的精灵。我搜索了一种方法来获取着色器中当前的精灵矩形但却找不到任何东西。

3 个答案:

答案 0 :(得分:5)

好吧,拔了头发三天后,我找到了一个解决方法。 在更多地了解着色器如何工作以及管道中的角色之后,我意识到sprite rect信息可能在着色器中不可用,原因很简单,几乎所有着色器(除了我的)的功能都不需要这个信息,因为着色器的工作是取一个顶点,通过顶点函数修改它的位置(如果需要)然后通过片段函数决定它的像素颜色,它不关心整个精灵,它只需要查找像素使用纹理坐标从纹理中选择某个顶点的颜色。 我确信这对于使用着色器工作的人来说是微不足道的信息,但我花了很多时间才意识到这一点(这是我的第一个着色器)。 因此,作为一种解决方法,我必须使用着色器属性来传递当前精灵的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事件来更新材质属性。

也许有更好的方法可以实现这一切,但这是我能想到的最好的方法,我希望这会让有人试图达到同样的效果。

答案 1 :(得分:1)

我已经改进了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
        }
    }
} 

答案 2 :(得分:0)

我正在对此加以整理,因为我认为它可能有用: 我添加了将_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
        }
    }
}