Unity Shader--模拟微信跳一跳中方块的弹性效果

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/qq_34469717/article/details/79053532

前言

最近微信小程序跳一跳很火,在网上也有人用Unity模拟做了小游戏,不过主要是模拟逻辑部分,我闲来无事,研究了一下其中的方块弹性效果用Shader实现的方式,今天把研究过程分享出来,供像我这样非科班又不算聪明的同学参考。

正文

开始,我大概是想既然是压缩,那么将模型的顶点坐标的y值减去一个值即可,但如此一来,效果就太僵直,比较好的做法是越靠近下方的顶点减去的值越小,越靠上的顶点减去的值越大。那么我想到了用抛物线方程x2=2py来做,网上搜了下方程式,再根据模型空间坐标范围,最后定下了方程式为:(x+0.5)2=2y,其中,x为模型空间下顶点y坐标,范围为[-0.5,0.5],y为对应的压缩长度,我设定范围为[0,0.5],方程的推导比较简单,结果函数图:

这里写图片描述

然后新建一个unlit的Shader,Properties中加一个变量:

_CompressLengthInY ("Compress Length",Range(0,0.5)) = 0

然后在顶点函数中加入方程式:

v2f vert(appdata v)
{
    v2f o;
    //根据抛物线公式(x + 0.5)^2 =2py而来,其中x为顶点y坐标,y为需要压缩的最大长度
    v.vertex.y -= pow(v.vertex.y + 0.5,2) * _CompressLengthInY;
    o.pos = UnityObjectToClipPos(v.vertex);
    o.uv = v.uv;
    return o;
}

然后我发现没有阴影,于是在网上搜了下,加上了阴影,接收阴影的Pass如下:

Pass
        {
            Tags
            {
                "LightMode" = "ForwardBase"//使用前向渲染路径
            }

            CGPROGRAM
            #pragma vertex vert
            #pragma fragment frag
            #pragma multi_compile_fwdbase//不能少

            #include "UnityCg.cginc"
            #include "Lighting.cginc"
            #include "AutoLight.cginc"

            sampler2D _MainTex;
            fixed4 _Specular;
            float _Gloss;
            float _CompressLengthInY;

            struct appdata
            {
                float4 vertex : POSITION;
                float2 uv : TEXCOORD0;
                float3 normal : NORMAL;
            };

            struct v2f
            {
                float4 pos : SV_POSITION;
                float2 uv : TEXCOORD0;
                float3 worldNormal : TEXCOORD1;
                float4 worldPos: TEXCOORD2;
                SHADOW_COORDS(3)//这里的3是可用寄存器索引值,0,1,2都用了,所以用3
            };

            v2f vert(appdata v)
            {
                v2f o;
                //根据抛物线公式(x + 0.5)^2 =2py而来,其中x为顶点y坐标,y为需要压缩的最大长度
                v.vertex.y -= pow(v.vertex.y + 0.5,2) * _CompressLengthInY;

                o.pos = UnityObjectToClipPos(v.vertex);
                o.uv = v.uv;
                o.worldNormal = UnityObjectToWorldNormal(v.normal);
                o.worldPos = mul(unity_ObjectToWorld, v.vertex);
                TRANSFER_SHADOW(o);
                return o;
            }

            fixed4 frag(v2f i) : SV_TARGET
            {
                fixed4 albedo = tex2D(_MainTex, i.uv);
                fixed4 ambient = albedo * UNITY_LIGHTMODEL_AMBIENT;

                float3 worldLight = normalize(UnityWorldSpaceLightDir(i.worldPos.xyz));
                float3 worldView = normalize(UnityWorldSpaceViewDir(i.worldPos.xyz));
                fixed4 diff = albedo * _LightColor0 * max(0, dot(i.worldNormal, worldLight));

                float3 halfDir = normalize(worldView + worldLight);
                fixed4 spec = albedo * _Specular * pow(max(0, dot(halfDir, i.worldNormal)), _Gloss);

                float shadow = SHADOW_ATTENUATION(i);
                fixed4 col = ambient + (diff + spec) * shadow;
                return col;
            }

            ENDCG
        }

关于接收阴影的“三步走”(SHADOW_COORDS、TRANSFER_SHADOW、SHADOW_ATTENUATION)用法,可以参考网上。
接下来是投射阴影部分,网上大多都是借助FallBack "VertexLit"这样的方式实现,或者用Render Texture的方式,前者会出现下图的bug,后者我嫌麻烦。

这里写图片描述

图中的bug是因为,我修改了顶点坐标,但是在投射阴影的Pass中并没有,所以阴影也就没有同步更改,压缩到一定长度后就会看见自己的阴影,后来我选用了一种简单方式–定义LightMode为ShadowCaster即可,至于bug,在其中加入修改顶点坐标的公式即可,Pass代码如下:

Pass{
            Tags {"LightMode"="ShadowCaster"}
            CGPROGRAM
            #pragma vertex vert
            #pragma fragment frag

            #include "UnityCg.cginc"
            #include "Lighting.cginc"
            #include "AutoLight.cginc"

            float _CompressLengthInY;

            struct appdata
            {
                float4 vertex : POSITION;
                float2 uv : TEXCOORD0;
            };

            struct v2f
            {
                float4 pos : SV_POSITION;
                float2 uv : TEXCOORD0;

            };

            v2f vert(appdata v)
            {
                v2f o;
                //根据抛物线公式(x + 0.5)^2 =2py而来,其中x为顶点y坐标,y为需要压缩的最大长度
                v.vertex.y -= pow(v.vertex.y + 0.5,2) * _CompressLengthInY;

                o.pos = UnityObjectToClipPos(v.vertex);
                o.uv = v.uv;
                return o;
            }

            fixed4 frag(v2f i) : SV_TARGET
            {
                return fixed4(0.5,0.5,0.5,1);
            }

            ENDCG

        }

接下来,那种弹簧发力后的“抖动”效果怎么做呢?我想到了DoTween的SetEase,我感觉应该是可以的,于是对应的c#脚本如下:

public class Test : MonoBehaviour {

    private float touchStartTime;
    private float touchTime;
    private float targetCompressLength;
    public float maxCompressLength = 0.5f;

    // Update is called once per frame
    void Update () {
        if (Input.GetMouseButtonDown(0))
        {
            touchStartTime = Time.time;
        }
        if (Input.GetMouseButton(0))
        {
            touchTime = Time.time - touchStartTime;
            targetCompressLength = touchTime / 10;
            targetCompressLength = Mathf.Clamp(targetCompressLength, 0, maxCompressLength);
            GetComponent<MeshRenderer>().material.SetFloat("_CompressLengthInY", targetCompressLength);
        }
        if (Input.GetMouseButtonUp(0))
        {
            GetComponent<MeshRenderer>().material.DOFloat(0, "_CompressLengthInY", 1f).SetEase(Ease.OutElastic, 0.7f);
        }
    }
}

结果

效果不算太好,可以自行调节DoTween的参数。

这里写图片描述

展开阅读全文

没有更多推荐了,返回首页