unity3d中利(lì)用網(wǎng)格+貼圖繪製血條/進(jìn)度條
利用網格去(qù)繪(huì)製血條, 血條肯(kěn)定是一個(gè)矩(jǔ)形,網(wǎng)格是由(yóu)一個一個三角形組成(chéng)的(de),矩形可以分成兩個三角形。
創建一個空物體,添加以下腳本組件:
[RequireComponent(typeof(MeshFilter),typeof(MeshRenderer))] public class MeshAndUV : MonoBehaviour { private Mesh mh; private Renderer rd; private float size = 1; private Material mat; void Awake() { mh = GetComponent().mesh; rd = GetComponent(); } void Start() { //頂點數組 Vector3[] vertes = new Vector3[] { new Vector3(-size, -size, 0),//第一個點 new Vector3(-size, size, 0), //第二個 new Vector3(size, size, 0), //第(dì)三個 new Vector3(size, -size, 0), //第四個 }; mh.vertices = vertes; //頂點(diǎn)組成的三(sān)角形 mh.triangles = new[] { 0, 1, 2, 0, 2, 3 }; mh.RecalculateNormals(); } }運行下,就發現繪(huì)製出一(yī)個粉紅色的矩形,為啥是粉紅色,因為沒材質啊!!!@#¥%@#¥……
在scene視圖下把ShadingMode改為Wireframe模式(shì)就可以看到兩個(gè)三角形
軸點在中(zhōng)心,邊長為2的矩形(xíng),然後在腳本上設置UV映射,加上貼圖材質。
在設(shè)置三角形下麵添加一下代碼就可以顯示紋理(lǐ)了呀:
//UV貼圖的四個(gè)點,和頂點一一對應,左下角為(0,0),右上角為(1,1) //如果頂點順序(xù)沒有跟UV對應,貼圖就會出現問題 Vector2[] uvs = new Vector2[] { new Vector2(0,0),//第一個點(diǎn) new Vector2(0,1),//2 new Vector2(1,1),//3 new Vector2(1,0), //4 }; mh.uv = uvs; rd.material = mat;

封裝成一個函數 void CreateBar(int barIndex),修改UV映射,血條索引從下往上數,每個(gè)間隔(gé)0.25f
Vector2[] uvs = new Vector2[] { 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 };在Start方法調用 CreateBar(0),呀, 怎麽紅色是滿的呢?
由於滿血狀態是全(quán)紅(hóng)的,所以在(zài)UV的x映射(shè)也要做下改變
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 };
是(shì)不是(shì)有點像啦。隻要改變下長(zhǎng)寬比就好看(kàn)啦。 改成下(xià)麵這樣多(duō)一個參數試試看。
void CreateBar(Vector2 size, int barIndex) { Vector3[] vertes = new Vector3[] { new Vector3(-size.x, -size.y, 0),//第一個點(diǎn) new Vector3(-size.x, size.y, 0), //第二個 new Vector3(size.x, size.y, 0), //第三個 new Vector3(size.x, -size.y, 0), //第四個 }; }看(kàn)看血條效果吧:
改(gǎi)變(biàn)血(xuè)條的(de)值有2個辦法,
1.改變Material的mainTextureOffset值
mat.mainTextureOffset = new Vector2(0.2f,0);
但是這樣會令到所以使用者材質的物(wù)體貼圖都會改變
2.修改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; } //因為這張圖一(yī)半是亮的,一半是暗的,暗的那部分代表失去的血量,所以value要(yào)乘以0.5; void Start() { CreateBar(new Vector2(1,0.25f),0 ); SetBarRate(0.9f); }到此(cǐ)基本完成了任務, 下麵來(lái)個完整(zhěng)的代碼給各位親參考一下, 歡迎來我們網站wiseglove.com投稿哦~
using UnityEngine; using System.Collections; [RequireComponent(typeof(MeshFilter),typeof(MeshRenderer))] public class MeshAndUV : MonoBehaviour { private Mesh mh; private Renderer rd; private float rate = 0.5f; public Material mat; private int barIndex = 0; void Awake() { mh = GetComponent().mesh; rd = GetComponent(); } void Start() { CreateBar(new Vector2(1,0.25f),0 ); SetBarRate(0.9f); } ////// 利用網格創建血條 //////三角形大小///血條(tiáo)索引void CreateBar(Vector2 size, int barIndex) { this.barIndex = barIndex; //頂點數組 Vector3[] vertes = new Vector3[] { new Vector3(-size.x, -size.y, 0),//第一個(gè)點 new Vector3(-size.x, size.y, 0), //第二個(gè) new Vector3(size.x, size.y, 0), //第三個 new Vector3(size.x, -size.y, 0), //第四個 }; //給網格的(de)頂點(diǎn)賦值 mh.vertices = vertes; //頂點組成的三角形 mh.triangles = new[] { 0, 1, 2, 0, 2, 3 }; //UV貼圖的四個點,和頂(dǐng)點一一對(duì)應,左下角為(0,0),右上角為(1,1) //如果頂點順序沒(méi)有跟UV對應,貼圖(tú)就會出現問題 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 }; mh.uv = uvs; //材(cái)質 rd.material = mat; //法線重新計算 mh.RecalculateNormals(); } ////// 設置血條比例 //////血量失去的百分比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; } }按照上麵的方(fāng)法, 畫進度(dù)條也是這個方法。
- 上一篇:realsense顯示(shì)限定範圍內的圖像物體 2019/11/11
- 下一篇:Unity3D實現碰撞檢測(cè)方法技巧好簡單哦 2019/11/1