Unity Shader模拟微信跳一跳中方块的弹性效果
发表于2018-07-05
相信大家都玩过或听过微信上的跳一跳游戏，在网上也有人用Unity模拟做了类似的小游戏，不过主要是模拟逻辑部分，而本片文章不是教大家如何去做跳一跳这款游戏，而是要研究下其中的方块弹性效果用Shader实现的方式。
正文
开始，我大概是想既然是压缩，那么将模型的顶点坐标的y值减去一个值即可，但如此一来，效果就太僵直，比较好的做法是越靠近下方的顶点减去的值越小，越靠上的顶点减去的值越大。那么我想到了用抛物线方程x2=2pyx2=2py来做，网上搜了下方程式，再根据模型空间坐标范围，最后定下了方程式为：(x+0.5)2=2y(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的参数。
来自：https://blog.csdn.net/qq_34469717/article/details/79053532