使用Unity實現動態2D水效果

http://forum.china.unity3d.com/thread-16044-1-1.html

在這片教程里面我們將會用簡單的物理效果來模擬動態的2D水效果。我們將會使用Line Renderer，Mesh Renderer，觸發器（Trigger）和粒子來創造這個水效果。最終的的效果將會包含波浪和水花濺起的特效，你可以直接加入自己的游戲中。你可以在文章的結尾下載此工程。當然，本文中使用的制作原理可以應用於任何游戲引擎之中。

最終效果
本教程要實現的最終效果如下：

設置水管理器
第一步就是使用Unity的線段渲染器（Line Renderer）和一些節點來實現水浪的形狀。如下圖：

然后還要跟蹤所有節點的位置、速度及加速度。這些信息使用數組來存儲，在類的最上面添加以下代碼：

[C#]  純文本查看  復制代碼

?

float [] xpositions;

float [] ypositions;

float [] velocities;

float [] accelerations;

LineRenderer Body;

LineRenderer用來保存所有節點及水體的輪廓。接下來使用網格來實現水體，還需創建游戲對象來使用這些網格。添加以下代碼：

[C#]  純文本查看  復制代碼

?

GameObject[] meshobjects;

Mesh[] meshes;

為了讓物體可以與水交互，還需為每個游戲對象添加碰撞器：

[C#]  純文本查看  復制代碼

?

GameObject[] colliders;

還要定義一些常量：

[C#]  純文本查看  復制代碼

?

const float springconstant = 0.02f;

const float damping = 0.04f;

const float spread = 0.05f;

const float z = -1f;

前三個常量用來控制水流速度、衰減度及傳播速度，最后的z值用於控制水體的顯示層次，這里設為-1表示會顯示在對象前面。大家也可根據自己的需求進行調整。

還要設置一些值：

[C#]  純文本查看  復制代碼

?

float baseheight;

float left;

float bottom;

這三個變量定義了水的維度。

還要定義一些可以在編輯器中修改的公共變量，首先是制作水波四濺效果所需的粒子系統：

[C#]  純文本查看  復制代碼

?

public GameObject splash:

接下來是用於Line Renderer的材質：

[C#]  純文本查看  復制代碼

?

public Material mat:

還有用於模擬水體的網格：

[C#]  純文本查看  復制代碼

?

public GameObject watermesh:

這些資源均可在工程中獲取。另外還需要一個管理器，保存所有數據並在游戲過程中生成水體。下面創建SpwanWater()函數來實現該功能。

該函數的參數分別為水體四周的邊長：

[C#]  純文本查看  復制代碼

?

public void SpawnWater( float Left, float Width, float Top, float Bottom)

{}

創建節點
下面決定總共需要的節點數量：

[C#]  純文本查看  復制代碼

?

int edgecount = Mathf.RoundToInt(Width) * 5;

int nodecount = edgecount + 1;

這里對每單位寬度的水體使用5個節點，讓整個水體運動看起來更平滑。你也可以自己權衡性能與平滑效果來選擇合適的節點數量。這樣就能得到所有的邊數了，頂點數在此基礎上加1。

下面使用LineRenderer組件來渲染水體：

[C#]  純文本查看  復制代碼

?

Body = gameObject.AddComponent<LineRenderer>();

Body.material = mat;

Body.material.renderQueue = 1000;

Body.SetVertexCount(nodecount);

Body.SetWidth(0.1f, 0.1f);

同時這里還通過渲染隊列將材質的渲染順序設為比水體更高。設置了節點總數，並將線段寬度設為0.1。

你也可以自己設置線段寬度，SetWidth()函數有兩個參數，分別是線段的起始寬度和結束寬度，設為一樣就表示線段寬度固定。

節點創建好后初始化上面聲明的變量：

[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));

}

將所有的y坐標設為水體上方，讓水體各部分緊密排列。速度和加速度都為0表示水體是靜止的。

循環結束后就通過LineRenderer將各節點設置到正確的位置。

創建網格
現在有了水波線段，下面就使用網格來實現水體。先添加以下代碼：

[C#]  純文本查看  復制代碼

?

for ( int i = 0; i < edgecount; i++)

{

     meshes[i] = new Mesh();

}

網格中也保存了一堆變量，第一個就是所有的頂點。

上圖展示了網格片段的理想顯示效果。第一個片段的頂點高亮顯示，共有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);

數組的四個元素按順序分別表示左上角、右上角、左下角和右下角的頂點位置。

網格所需的第二個數據就是UV坐標。UV坐標決定了網格用到的紋理部分。這里簡單的使用紋理左上角、右上角、左下角及右下角的部分作為網格顯示內容。

[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);

現在需要用到之前定義的數據。網格是由三角形組成的，而一個四邊形可由兩個三角形組成，所以這里要告訴網格如何繪制三角形。

按節點順序觀察各角，三角形A由節點0、1、3組成，三角形B由節點3、2、0組成。所以定義一個頂點索引數組順序包含這些索引：

[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;

網格設置好了，還需添加游戲對象將其渲染到場景中。利用工程中的watermesh預制創建游戲對象，其中包含Mesh Renderer和Mesh Filter 組件。

[C#]  純文本查看  復制代碼

?

meshobjects[i] = Instantiate(watermesh,Vector3.zero,Quaternion.identity) as GameObject;

meshobjects[i].GetComponent<MeshFilter>().mesh = meshes[i];

meshobjects[i].transform.parent = transform;

將網格對象設為水管理器的子對象以便於管理。

創建碰撞器
下面添加碰撞器：

[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>();

添加盒狀碰撞器並統一命名以便於管理，同樣將其設為管理器子對象。將碰撞器坐標設為節點中間，設置好大小並添加WaterDetector類。

下面添加函數來控制水體網格的移動：

[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;

         }

     }

該函數與上面的幾乎一樣，只是不需再設置三角形和UV。

下一步是在FixedUpdate()函數中添加物理特性讓水體可以自行流動。

[C#]  純文本查看  復制代碼

?

void FixedUpdate()

{}

添加物理特性
首先是結合胡克定律和歐拉方法獲取水體新的坐標、加速度及速度。

胡克定律即 F ＝ kx，F是指由水浪產生的力（這里的水體模型就是由一排水浪組成），k指水體強度系數，x是偏移距離。這里的偏移距離就是各節點的y坐標減去節點的基本高度。

接下來添加一個與速度成比例的阻尼因子形成水面的阻力。

[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));

         }

歐拉方法很簡單，就是在每幀用加速度更新速度然后用速度更新位置。

注意這里每個節點的作用力原子數量為1，你也可以改為其它值，這樣加速度就是：

[C#]  純文本查看  復制代碼

?

accelerations[i] = -force/mass;

下面實現水浪的傳播效果。

[C#]  純文本查看  復制代碼

?

float [] leftDeltas = new float [xpositions.Length];

float [] rightDeltas = new float [xpositions.Length];

這里創建了兩個數組，對於每個節點，都要對比前一個節點與當前節點的高度差並將差值存入leftDeltas。

然后還要比較后一個節點與當前節點的高度差並將差值存入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];

     }

}

到此就獲得了所有的高度數據，可以應用到最終效果了。由於最左與最右的節點不會動，所以需要改變坐標是第一個至倒數第二個節點。

這里將所有代碼放在一個循環，共運行八次。這樣做的目的是希望多次運行但計算量小，而非計算量過大從而導致效果不夠流暢。

添加水波飛濺的效果
現在已經實現了水的流動，下面來實現水波飛濺的效果。添加函數Splash()用於檢測水波的x坐標及入水物體接觸水面時的速度。將該函數設為公有的以供后續的碰撞器調用。

[C#]  純文本查看  復制代碼

?

public void Splash( float xpos, float velocity)

{}

首先需要確定水波飛濺的位置是在水體范圍內：

[C#]  純文本查看  復制代碼

?

if (xpos >= xpositions[0] && xpos <= xpositions[xpositions.Length-1])

{}

然后改變水波的x坐標以獲取飛濺位置與水體起始位置間的相對坐標：

[C#]  純文本查看  復制代碼

?

expos -= xpositions[0];

然后找到落水物體碰撞的節點。計算方法如下：

[C#]  純文本查看  復制代碼

?

int index = Mathf.RoundToInt((xpositions.Length-1)*(xpos / (xpositions[xpositions.Length-1] - xpositions[0])));

步驟如下：
首先獲取飛濺位置與水體左邊界的坐標差（xpos）。

然后將該差值除以水體寬度。

這樣就得到了飛濺發生位置的分數，例如飛濺發生在水體寬度的3/4處就會返回0.75。

將該分數乘以邊數后取整，就得到了離飛濺位置最近的節點索引。

[C#]  純文本查看  復制代碼

?

velocities[index] = velocity;

下面將入水物體的速度賦給該物體所碰撞的節點，這樣節點會被物體壓入水體。

注意：你可以按自己的需求來更改上面的代碼。例如，你可以將節點速度與物體速度相加，或者使用動量除以節點的作用原子數量而非直接使用速度。

下面實現產生水花的粒子系統。將該對象命名為“splash”，別跟Splash()搞混了，后者是一個函數。

首先，我們需要設置飛濺的參數，這個參數是受撞擊物體的速度影響的。

[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來實現的粒子系統，它設定粒子的起始速度是兩個隨機常量之間，但我們通過腳本無法操作Shuriken中的更多內容，所以這里設置兩次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);

Shuriken粒子在與物體碰撞后不會立即被摧毀，所以要確保粒子不會顯示在物體前方，有兩種辦法：

1.將它們固定在背景上，例如將其坐標的z值設為5。

2.讓粒子系統總是朝向水體中心，這樣就不會飛濺到邊緣以外。

第二行代碼獲取坐標中點，稍微上移，並讓粒子發射器指向該點。如果你的水體夠寬，就不需要進行該設置。如果你的水體是室內游泳池就需要用到該腳本。

[C#]  純文本查看  復制代碼

?

GameObject splish = Instantiate(splash,position,rotation) as GameObject;

Destroy(splish, lifetime+0.3f);

現在添加了飛濺對象，該對象會在粒子被摧毀后一段時間再消失，因為粒子系統發射了大量爆裂的粒子，所以粒子消失所需時間至少是Time.time + lifetime，最后的爆裂的粒子甚至需要更久。

碰撞檢測
最后還需對物體進行碰撞檢測，之前為所有的碰撞器都添加了WaterDetector腳本，在該腳本中添加下面的函數：

[C#]  純文本查看  復制代碼

?

void OnTriggerEnter2D(Collider2D Hit)

{}

在OnTriggerEnter2D()中實現2D Rigid Body與水體碰撞產生的效果。傳入Collider2D類型的參數可獲取更多關於碰撞物體的信息。需要該物體帶有Rigidbody2D組件：

[C#]  純文本查看  復制代碼

?

if (Hit.rigidbody2D != null )

{

       transform.parent.GetComponent<Water>().Splash(transform.position.x, Hit.rigidbody2D.velocity.y*Hit.rigidbody2D.mass / 40f);

     }

}

所有碰撞器都是water manager的子對象。所以直接從碰撞器父節點獲取Water組件並調用Splash()函數。如果希望物理效果更精確，可以使用動量而非速度。注意在這里也該為對應的屬性即可。如果要獲取物體動量，就將其速度乘以mass。如果只用速度，就將代碼中的mass刪掉。

在Start()函數中調用SpawnWater()：

[C#]  純文本查看  復制代碼

?

void Start()

{

     SpawnWater(-10,20,0,-10);

}

到此就完成了，所有帶有rigidbody2D和碰撞器的物體都可以撞擊水面並產生水波飛濺的效果，並且水波也會正常流動。

加分練習
在SpawnWater()函數中添加以下代碼：

[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()函數同樣帶有一個Collider2D類型的參數，用與之前一樣的方式檢測物體的作用力原子數量，然后為rigidbody2D添加力或速度讓物體漂流在水中。

總結
本教程主要教大家使用Unity 2D模擬簡單的2D水效果，用到了一點簡單的物理知識以及Line Renderer、Mesh Renderer、觸發器和粒子。教程不難，但理論知識都是適用的，希望大家發揮自己的想象力將其用到實際項目中。

原文鏈接： http://gamedevelopment.tutsplus. ... edtutorials_sidebar

原文作者： Alex Rose

本文版權歸Unity官方中文論壇所有，轉載請注明來源（forum.china.unity3d.com）。

http://download.csdn.net/download/onafioo/9966532