unity3d中利用網格+貼圖繪製血條/進度條
利用網格(gé)去繪製血條(tiáo), 血條肯(kěn)定是一個矩形,網格是由一個一個三角形組成的,矩形可以分成兩個三角形(xíng)。
創建一個空物(wù)體,添加以下腳本組件:
[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),//第(dì)一個(gè)點
new Vector3(-size, size, 0), //第二個
new Vector3(size, size, 0), //第三個
new Vector3(size, -size, 0), //第四個
};
mh.vertices = vertes;
//頂點組(zǔ)成的三角形
mh.triangles = new[]
{
0, 1, 2,
0, 2, 3
};
mh.RecalculateNormals();
}
}
運行下,就發現繪製出一個粉紅色的矩形,為啥(shá)是粉紅色,因為沒(méi)材質啊!!!@#¥%@#¥……
在scene視圖下把ShadingMode改為(wéi)Wireframe模式就可(kě)以(yǐ)看(kàn)到兩個三角形
軸點在中心,邊長為2的矩形,然後在腳本上設置UV映射,加上貼圖(tú)材質。
在(zài)設置(zhì)三角形下麵添加一下代碼就可以顯示紋理了呀:
//UV貼(tiē)圖的四個點(diǎn),和頂點一一對應,左下角為(0,0),右上角為(1,1)
//如(rú)果頂點順序(xù)沒有跟UV對應,貼(tiē)圖就會出現問題
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;
封(fēng)裝成一個函數(shù) void CreateBar(int barIndex),修改UV映射,血條索(suǒ)引從下往上數,每個間隔(gé)0.25f
Vector2[] uvs = new Vector2[]
{
new Vector2(0, 0.25f * barIndex),//第一個點(diǎn)
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),呀, 怎麽(me)紅色是滿的呢?
由於滿血狀態是全紅(hóng)的,所以在UV的x映射也要做下改變
Vector2[] uvs = new Vector2[]
{
new Vector2(0, 0.25f * barIndex),//第(dì)一個點
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
};
是不是有點(diǎn)像(xiàng)啦。隻要改變下(xià)長寬比就好看啦。 改成下麵這樣多一個參數(shù)試試看。
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), //第四個
};
}
看看血條效果(guǒ)吧(ba):
改變血(xuè)條的值有(yǒu)2個辦法,
1.改(gǎi)變(biàn)Material的mainTextureOffset值
mat.mainTextureOffset = new Vector2(0.2f,0);
但是這樣(yàng)會令到所以使用者材(cái)質的物體貼圖都會改變
2.修改UV映射
void SetBarRate(float value)
{
value *= 0.5f;
Vector2[] uvs = new Vector2[]
{
new Vector2(value, 0.25f * barIndex),//第(dì)一個點
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;
}
//因為這張圖一半是亮的,一半(bàn)是暗的,暗的那部分代表失去的血量(liàng),所以value要乘以0.5;
void Start()
{
CreateBar(new Vector2(1,0.25f),0 );
SetBarRate(0.9f);
}
到此基本完成了任務, 下麵來個完整的代碼給各(gè)位親(qīn)參考一下, 歡(huān)迎來我們網站wiseglove.com投(tóu)稿哦~
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);
}
////// 利用網格創建血條
//////三角形大小///血條索引void CreateBar(Vector2 size, int barIndex)
{
this.barIndex = barIndex;
//頂點數組
Vector3[] vertes = new Vector3[]
{
new Vector3(-size.x, -size.y, 0),//第一個點
new Vector3(-size.x, size.y, 0), //第二(èr)個
new Vector3(size.x, size.y, 0), //第(dì)三個
new Vector3(size.x, -size.y, 0), //第四個
};
//給網格的頂點賦值
mh.vertices = vertes;
//頂點組成的三角形
mh.triangles = new[]
{
0, 1, 2,
0, 2, 3
};
//UV貼圖的四個點,和頂點一一對(duì)應(yīng),左下(xià)角為(0,0),右上(shàng)角為(1,1)
//如果頂點(diǎn)順序沒有(yǒu)跟UV對應,貼圖就會出現問題
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)質(zhì)
rd.material = mat;
//法線重新計算
mh.RecalculateNormals();
}
////// 設(shè)置血(xuè)條比例
//////血量失去的百分比void SetBarRate(float value)
{
value *= 0.5f;
Vector2[] uvs = new Vector2[]
{
new Vector2(value, 0.25f * barIndex),//第一個點(diǎn)
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;
}
}
按照上麵的方法, 畫進(jìn)度條也是這個方法。
- 上一篇:realsense顯示限定範圍內(nèi)的圖像物體 2019/11/11
- 下一篇:Unity3D實現碰(pèng)撞檢測(cè)方(fāng)法技巧好簡單哦 2019/11/1
