unity3d中利用網格去繪制血條

 

利用網格去繪制血條

血條肯定是一個矩形，網格是由一個一個三角形組成的，

矩形可以分成兩個三角形。

創建一個空物體，添加以下腳本組件

[RequireComponent(typeof(MeshFilter),typeof(MeshRenderer))]  2 public class MeshAndUV : MonoBehaviour  3 {  4  
    private Mesh mh;  6     private Renderer rd;  7     private float size = 1;  8     private Material mat;  9     void Awake() 10  { 11         mh = GetComponent<MeshFilter>().mesh; 12         rd = GetComponent<MeshRenderer>(); 13  } 14  
    void Start() 16  { 17  
       //頂點數組
        Vector3[] vertes  = new Vector3[] 20  { 21             new Vector3(-size, -size, 0),//第一個點
            new Vector3(-size, size, 0), //第二個
            new Vector3(size, size, 0), //第三個
            new Vector3(size, -size, 0), //第四個
 }; 26  
        mh.vertices = vertes; 28  
        //頂點組成的三角形
        mh.triangles = new[] 31  { 32             0, 1, 2, 33             0, 2, 3
 }; 35  mh.RecalculateNormals(); 36  } 37 } 38  

運行下，就發現繪制出一個粉紅色的矩形，為啥是粉紅色，因為沒材質啊

 

在scene視圖下把ShadingMode改為Wireframe模式就可以看到兩個三角形

 

 

軸點在中心，邊長為2的矩形

 

然后在腳本上設置UV映射，加上貼圖材質。

 

在設置三角形下面添加

//UV貼圖的四個點，和頂點一一對應，左下角為(0,0)，右上角為(1,1)  2         //如果頂點順序沒有跟UV對應，貼圖就會出現問題
Vector2[] uvs = new Vector2[]  4  {  5             new Vector2(0,0),//第一個點
            new Vector2(0,1),//2
            new Vector2(1,1),//3
            new Vector2(1,0), //4
 }; 10 
        mh.uv = uvs; 12         rd.material = mat;

 

 

就可以把這張圖繪制出來的

效果如下

 

這張圖包含了HP，MP，我們就要把它們區分開來。

 

封裝成一個函數 void CreateBar(int barIndex)

修改UV映射

血條索引從下往上數，每個間隔0.25f

Vector2[] uvs = new Vector2[] 2  { 3             new Vector2(0, 0.25f * barIndex),//第一個點
            new Vector2(0, 0.25f * (barIndex+1)),//2
            new Vector2(1, 0.25f * (barIndex+1)),//3
            new Vector2(1, 0.25f * barIndex), //4
 }; 8  

 

在Start方法調用 CreateBar(0)

效果如下

 

由於滿血狀態是全紅的，所以在UV的x映射也要做下改變

 

Vector2[] uvs = new Vector2[] { new Vector2(0, 0.25f * barIndex),//第一個點
            new Vector2(0, 0.25f * (barIndex+1)),//2
            new Vector2(0.5f, 0.25f * (barIndex+1)),//3
            new Vector2(0.5f, 0.25f * barIndex), //4
 }; 

 

是不是有點像啦。只要改變下長寬比就好看啦。

 

函數添加多一個參數

void CreateBar(Vector2 size, int barIndex)

 

修改下頂點數組

Vector3[] vertes = new Vector3[] { new Vector3(-size.x, -size.y, 0),//第一個點
            new Vector3(-size.x, size.y, 0), //第二個
            new Vector3(size.x, size.y, 0), //第三個
            new Vector3(size.x, -size.y, 0), //第四個
        };

 

 

調用下函數

void Start() { CreateBar(new Vector2(1,0.25f),0 ); }

 

 

效果如下

 

改變血條的值有點個辦法，

第一個是改變Material的mainTextureOffset值

mat.mainTextureOffset = new Vector2(0.2f,0);

但是這樣會令到所以使用者材質的物體貼圖都會改變

 

第二個辦法就是修改UV映射

void SetBarRate(float value) { value *= 0.5f; Vector2[] uvs = new Vector2[] { new Vector2(value, 0.25f * barIndex),//第一個點
            new Vector2(value, 0.25f * (barIndex+1)),//2
            new Vector2(0.5f + value , 0.25f * (barIndex+1)),//3
            new Vector2(0.5f + value, 0.25f * barIndex), //4
 }; mh.uv = uvs; } //因為這張圖一半是亮的，一半是暗的，暗的那部分代表失去的血量，所以value要乘以0.5；
void Start() { CreateBar(new Vector2(1,0.25f),0 ); SetBarRate(0.9f); }

 

 

效果如下

 

做到這里就差不多完成了，利用網格去繪制血條。

 

最終代碼

using UnityEngine;  2 using System.Collections;  3  
[RequireComponent(typeof(MeshFilter),typeof(MeshRenderer))]  5 public class MeshAndUV : MonoBehaviour  6 {  7  
    private Mesh mh;  9     private Renderer rd; 10     
    private float rate = 0.5f; 12     public Material mat; 13  
    private int barIndex = 0; 15     void Awake() 16  { 17         mh = GetComponent<MeshFilter>().mesh; 18         rd = GetComponent<MeshRenderer>(); 19        
 } 21  
    void Start() 23  { 24         CreateBar(new Vector2(1,0.25f),0 ); 25         SetBarRate(0.9f); 26  } 27  
    /// <summary>
    /// 利用網格創建血條 30     /// </summary>
    /// <param name="size">三角形大小</param>
    /// <param name="barIndex">血條索引</param>
    void CreateBar(Vector2 size, int barIndex) 34  { 35         this.barIndex = barIndex; 36  
        //頂點數組
        Vector3[] vertes = new Vector3[] 39  { 40             new Vector3(-size.x, -size.y, 0),//第一個點
            new Vector3(-size.x, size.y, 0), //第二個
            new Vector3(size.x, size.y, 0), //第三個
            new Vector3(size.x, -size.y, 0), //第四個
 }; 45  
        //給網格的頂點賦值
        mh.vertices = vertes; 48  
        //頂點組成的三角形
        mh.triangles = new[] 51  { 52             0, 1, 2, 53             0, 2, 3
 }; 55  
        //UV貼圖的四個點，和頂點一一對應，左下角為(0,0)，右上角為(1,1) 57         //如果頂點順序沒有跟UV對應，貼圖就會出現問題
        Vector2[] uvs = new Vector2[] 59  { 60             new Vector2(0, 0.25f * barIndex),//第一個點
            new Vector2(0, 0.25f * (barIndex+1)),//2
            new Vector2(0.5f , 0.25f * (barIndex+1)),//3
            new Vector2(0.5f , 0.25f * barIndex), //4
 }; 65  
        mh.uv = uvs; 67  
        //材質
        rd.material = mat; 70  
        //法線重新計算
 mh.RecalculateNormals(); 73  
 } 75  
    /// <summary>
    /// 設置血條比例 78     /// </summary>
    /// <param name="value">血量失去的百分比</param>
    void SetBarRate(float value) 81  { 82         value *= 0.5f; 83         Vector2[] uvs = new Vector2[] 84  { 85             new Vector2(value, 0.25f * barIndex),//第一個點
            new Vector2(value, 0.25f * (barIndex+1)),//2
            new Vector2(0.5f + value , 0.25f * (barIndex+1)),//3
            new Vector2(0.5f + value, 0.25f * barIndex), //4
 }; 90         mh.uv = uvs; 91  } 92  
 
}