在這片教程里面我們將會用簡單的物理效果來模擬動態(tài)的2D水效果。我們將會使用Line Renderer，Mesh Renderer，觸發(fā)器（Trigger）和粒子來創(chuàng)造這個水效果。最終的的效果將會包含波浪和水花濺起的特效，你可以直接加入自己的游戲中。你可以在文章的結尾下載此工程。當然，本文中使用的制作原理可以應用于任何游戲引擎之中。
最終效果
本教程要實現(xiàn)的最終效果如下：
設置水管理器
第一步就是使用Unity的線段渲染器（Line Renderer）和一些節(jié)點來實現(xiàn)水浪的形狀。如下圖：
然后還要跟蹤所有節(jié)點的位置、速度及加速度。這些信息使用數(shù)組來存儲，在類的最上面添加以下代碼：
[C#] 純文本查看 復制代碼 float[] xpositions;
float[] ypositions;
float[] velocities;
float[] accelerations;
LineRenderer Body;
|
[C#] 純文本查看 復制代碼 GameObject[] meshobjects;
Mesh[] meshes;
|
[C#] 純文本查看 復制代碼 const float springconstant = 0.02f;
const float damping = 0.04f;
const float spread = 0.05f;
const float z = -1f;
|
還要設置一些值：
[C#] 純文本查看 復制代碼 float baseheight;
float left;
float bottom;
|
還要定義一些可以在編輯器中修改的公共變量，首先是制作水波四濺效果所需的粒子系統(tǒng)：
[C#] 純文本查看 復制代碼 public GameObject splash:
|
還有用于模擬水體的網(wǎng)格：
[C#] 純文本查看 復制代碼 public GameObject watermesh:
|
該函數(shù)的參數(shù)分別為水體四周的邊長：
[C#] 純文本查看 復制代碼 public void SpawnWater(float Left, float Width, float Top, float Bottom)
{}
|
下面決定總共需要的節(jié)點數(shù)量：
[C#] 純文本查看 復制代碼 int edgecount = Mathf.RoundToInt(Width) * 5;
int nodecount = edgecount + 1;
|
下面使用LineRenderer組件來渲染水體：
[C#] 純文本查看 復制代碼 Body = gameObject.AddComponent<LineRenderer>();
Body.material = mat;
Body.material.renderQueue = 1000;
Body.SetVertexCount(nodecount);
Body.SetWidth(0.1f, 0.1f);
|
你也可以自己設置線段寬度，SetWidth()函數(shù)有兩個參數(shù)，分別是線段的起始寬度和結束寬度，設為一樣就表示線段寬度固定。
節(jié)點創(chuàng)建好后初始化上面聲明的變量：
[C#] 純文本查看 復制代碼 positions = new float[nodecount];
ypositions = new float[nodecount];
velocities = new float[nodecount];
accelerations = new float[nodecount];
meshobjects = new GameObject[edgecount];
meshes = new Mesh[edgecount];
colliders = new GameObject[edgecount];
baseheight = Top;
bottom = Bottom;
left = Left;
|
[C#] 純文本查看 復制代碼 for (int i = 0; i < nodecount; i++)
{
ypositions[i] = Top;
xpositions[i] = Left + Width * i / edgecount;
accelerations[i] = 0;
velocities[i] = 0;
Body.SetPosition(i, new Vector3(xpositions[i], ypositions[i], z));
}
|
循環(huán)結束后就通過LineRenderer將各節(jié)點設置到正確的位置。
創(chuàng)建網(wǎng)格
現(xiàn)在有了水波線段，下面就使用網(wǎng)格來實現(xiàn)水體。先添加以下代碼：
[C#] 純文本查看 復制代碼 for (int i = 0; i < edgecount; i++)
{
meshes[i] = new Mesh();
}
|
上圖展示了網(wǎng)格片段的理想顯示效果。第一個片段的頂點高亮顯示，共有4個。
[C#] 純文本查看 復制代碼 Vector3[] Vertices = new Vector3[4];
Vertices[0] = new Vector3(xpositions[i], ypositions[i], z);
Vertices[1] = new Vector3(xpositions[i + 1], ypositions[i + 1], z);
Vertices[2] = new Vector3(xpositions[i], bottom, z);
Vertices[3] = new Vector3(xpositions[i+1], bottom, z);
|
網(wǎng)格所需的第二個數(shù)據(jù)就是UV坐標。UV坐標決定了網(wǎng)格用到的紋理部分。這里簡單的使用紋理左上角、右上角、左下角及右下角的部分作為網(wǎng)格顯示內(nèi)容。
[C#] 純文本查看 復制代碼 Vector2[] UVs = new Vector2[4];
UVs[0] = new Vector2(0, 1);
UVs[1] = new Vector2(1, 1);
UVs[2] = new Vector2(0, 0);
UVs[3] = new Vector2(1, 0);
|
按節(jié)點順序觀察各角，三角形A由節(jié)點0、1、3組成，三角形B由節(jié)點3、2、0組成。所以定義一個頂點索引數(shù)組順序包含這些索引：
[C#] 純文本查看 復制代碼 int[] tris = new int[6] { 0, 1, 3, 3, 2, 0 };
|
[C#] 純文本查看 復制代碼 meshes[i].vertices = Vertices;
meshes[i].uv = UVs;
meshes[i].triangles = tris;
|
[C#] 純文本查看 復制代碼 meshobjects[i] = Instantiate(watermesh,Vector3.zero,Quaternion.identity) as GameObject;
meshobjects[i].GetComponent<MeshFilter>().mesh = meshes[i];
meshobjects[i].transform.parent = transform;
|
創(chuàng)建碰撞器
下面添加碰撞器：
[C#] 純文本查看 復制代碼 colliders[i] = new GameObject();
colliders[i].name = "Trigger";
colliders[i].AddComponent<BoxCollider2D>();
colliders[i].transform.parent = transform;
colliders[i].transform.position = new Vector3(Left + Width * (i + 0.5f) / edgecount, Top - 0.5f, 0);
colliders[i].transform.localScale = new Vector3(Width / edgecount, 1, 1);
colliders[i].GetComponent<BoxCollider2D>().isTrigger = true;
colliders[i].AddComponent<WaterDetector>();
|
下面添加函數(shù)來控制水體網(wǎng)格的移動：
[C#] 純文本查看 復制代碼 void UpdateMeshes()
{
for (int i = 0; i < meshes.Length; i++)
{
Vector3[] Vertices = new Vector3[4];
Vertices[0] = new Vector3(xpositions[i], ypositions[i], z);
Vertices[1] = new Vector3(xpositions[i+1], ypositions[i+1], z);
Vertices[2] = new Vector3(xpositions[i], bottom, z);
Vertices[3] = new Vector3(xpositions[i+1], bottom, z);
meshes[i].vertices = Vertices;
}
}
|
下一步是在FixedUpdate()函數(shù)中添加物理特性讓水體可以自行流動。
添加物理特性
首先是結合胡克定律和歐拉方法獲取水體新的坐標、加速度及速度。
胡克定律即 F ＝ kx，F(xiàn)是指由水浪產(chǎn)生的力（這里的水體模型就是由一排水浪組成），k指水體強度系數(shù)，x是偏移距離。這里的偏移距離就是各節(jié)點的y坐標減去節(jié)點的基本高度。
接下來添加一個與速度成比例的阻尼因子形成水面的阻力。
[C#] 純文本查看 復制代碼 for (int i = 0; i < xpositions.Length ; i++)
{
float force = springconstant * (ypositions[i] - baseheight) + velocities[i]*damping ;
accelerations[i] = -force;
ypositions[i] += velocities[i];
velocities[i] += accelerations[i];
Body.SetPosition(i, new Vector3(xpositions[i], ypositions[i], z));
}
|
注意這里每個節(jié)點的作用力原子數(shù)量為1，你也可以改為其它值，這樣加速度就是：
[C#] 純文本查看 復制代碼 accelerations[i] = -force/mass;
|
[C#] 純文本查看 復制代碼 float[] leftDeltas = new float[xpositions.Length];
float[] rightDeltas = new float[xpositions.Length];
|
然后還要比較后一個節(jié)點與當前節(jié)點的高度差并將差值存入rightDeltas。還需將所有的差值乘以傳播速度常量。
[C#] 純文本查看 復制代碼 for (int j = 0; j < 8; j++)
{
for (int i = 0; i < xpositions.Length; i++)
{
if (i > 0)
{
leftDeltas[i] = spread * (ypositions[i] - ypositions[i-1]);
velocities[i - 1] += leftDeltas[i];
}
if (i < xpositions.Length - 1)
{
rightDeltas[i] = spread * (ypositions[i] - ypositions[i + 1]);
velocities[i + 1] += rightDeltas[i];
}
}
}
|
[C#] 純文本查看 復制代碼 for (int i = 0; i < xpositions.Length; i++)
{
if (i > 0)
{
ypositions[i-1] += leftDeltas[i];
}
if (i < xpositions.Length - 1)
{
ypositions[i + 1] += rightDeltas[i];
}
}
|
這里將所有代碼放在一個循環(huán)，共運行八次。這樣做的目的是希望多次運行但計算量小，而非計算量過大從而導致效果不夠流暢。
添加水波飛濺的效果
現(xiàn)在已經(jīng)實現(xiàn)了水的流動，下面來實現(xiàn)水波飛濺的效果。添加函數(shù)Splash()用于檢測水波的x坐標及入水物體接觸水面時的速度。將該函數(shù)設為公有的以供后續(xù)的碰撞器調(diào)用。
[C#] 純文本查看 復制代碼 public void Splash(float xpos, float velocity)
{}
|
[C#] 純文本查看 復制代碼 if (xpos >= xpositions[0] && xpos <= xpositions[xpositions.Length-1])
{}
|
然后找到落水物體碰撞的節(jié)點。計算方法如下：
[C#] 純文本查看 復制代碼 int index = Mathf.RoundToInt((xpositions.Length-1)*(xpos / (xpositions[xpositions.Length-1] - xpositions[0])));
|
首先獲取飛濺位置與水體左邊界的坐標差（xpos）。
然后將該差值除以水體寬度。
這樣就得到了飛濺發(fā)生位置的分數(shù)，例如飛濺發(fā)生在水體寬度的3/4處就會返回0.75。
將該分數(shù)乘以邊數(shù)后取整，就得到了離飛濺位置最近的節(jié)點索引。
[C#] 純文本查看 復制代碼 velocities[index] = velocity;
|
注意：你可以按自己的需求來更改上面的代碼。例如，你可以將節(jié)點速度與物體速度相加，或者使用動量除以節(jié)點的作用原子數(shù)量而非直接使用速度。
下面實現(xiàn)產(chǎn)生水花的粒子系統(tǒng)。將該對象命名為“splash”，別跟Splash()搞混了，后者是一個函數(shù)。
首先，我們需要設置飛濺的參數(shù)，這個參數(shù)是受撞擊物體的速度影響的。
[C#] 純文本查看 復制代碼 float lifetime = 0.93f + Mathf.Abs(velocity)*0.07f;
splash.GetComponent<ParticleSystem>().startSpeed = 8+2*Mathf.Pow(Mathf.Abs(velocity),0.5f);
splash.GetComponent<ParticleSystem>().startSpeed = 9 + 2 * Mathf.Pow(Mathf.Abs(velocity), 0.5f);
splash.GetComponent<ParticleSystem>().startLifetime = lifetime;
|
上面設置兩次startSpeed的原因是，這里使用Shuriken來實現(xiàn)的粒子系統(tǒng)，它設定粒子的起始速度是兩個隨機常量之間，但我們通過腳本無法操作Shuriken中的更多內(nèi)容，所以這里設置兩次startSpeed。
下面增加的幾行代碼可能不是必須的：
[C#] 純文本查看 復制代碼 Vector3 position = new Vector3(xpositions[index],ypositions[index]-0.35f,5);
Quaternion rotation = Quaternion.LookRotation(new Vector3(xpositions[Mathf.FloorToInt(xpositions.Length / 2)], baseheight + 8, 5) - position);
|
1.將它們固定在背景上，例如將其坐標的z值設為5。
2.讓粒子系統(tǒng)總是朝向水體中心，這樣就不會飛濺到邊緣以外。
第二行代碼獲取坐標中點，稍微上移，并讓粒子發(fā)射器指向該點。如果你的水體夠?qū)挘筒恍枰M行該設置。如果你的水體是室內(nèi)游泳池就需要用到該腳本。
[C#] 純文本查看 復制代碼 GameObject splish = Instantiate(splash,position,rotation) as GameObject;
Destroy(splish, lifetime+0.3f);
|
碰撞檢測
最后還需對物體進行碰撞檢測，之前為所有的碰撞器都添加了WaterDetector腳本，在該腳本中添加下面的函數(shù)：
[C#] 純文本查看 復制代碼 void OnTriggerEnter2D(Collider2D Hit)
{}
|
[C#] 純文本查看 復制代碼 if (Hit.rigidbody2D != null)
{
transform.parent.GetComponent<Water>().Splash(transform.position.x, Hit.rigidbody2D.velocity.y*Hit.rigidbody2D.mass / 40f);
}
}
|
在Start()函數(shù)中調(diào)用SpawnWater()：
[C#] 純文本查看 復制代碼 void Start()
{
SpawnWater(-10,20,0,-10);
}
|
加分練習
在SpawnWater()函數(shù)中添加以下代碼：
[C#] 純文本查看 復制代碼 gameObject.AddComponent<BoxCollider2D>();
gameObject.GetComponent<BoxCollider2D>().center = new Vector2(Left + Width / 2, (Top + Bottom) / 2);
gameObject.GetComponent<BoxCollider2D>().size = new Vector2(Width, Top - Bottom);
gameObject.GetComponent<BoxCollider2D>().isTrigger = true;
|
添加OnTriggerStay2D()函數(shù)同樣帶有一個Collider2D類型的參數(shù)，用與之前一樣的方式檢測物體的作用力原子數(shù)量，然后為rigidbody2D添加力或速度讓物體漂流在水中。
|
