前言

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

正文

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

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

然后新建一个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，后者我嫌麻烦。

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

图中的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 framevoid 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的参数。

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