• unity3d中利用(yòng)網格+貼圖(tú)繪製(zhì)血條/進度條

    2019/11/1      點擊:

    利用網格去繪製血(xuè)條(tiáo), 血條肯定是(shì)一個矩(jǔ)形,網(wǎng)格是由一(yī)個一個三角(jiǎo)形(xíng)組成(chéng)的,矩形可(kě)以分成兩(liǎng)個三角形。
    創建(jiàn)一(yī)個空物體(tǐ),添加(jiā)以下腳本組件:

    [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()
        {
     
           //頂點(diǎn)數組
            Vector3[] vertes  = new Vector3[]
            {
                new Vector3(-size, -size, 0),//第一個點
                new Vector3(-size, size, 0), //第(dì)二個
                new Vector3(size, size, 0), //第三個
                new Vector3(size, -size, 0), //第四(sì)個
            };
     
            mh.vertices = vertes;
     
            //頂點組成(chéng)的三角形
            mh.triangles = new[]
            {
                0, 1, 2,
                0, 2, 3
            };
            mh.RecalculateNormals();
        }
    }
    運行下,就發現繪製出一個粉紅色的矩形,為啥是粉紅色,因為(wéi)沒材(cái)質啊(ā)!!!@#¥%@#¥……

    在scene視圖下把ShadingMode改為Wireframe模(mó)式就可以看到兩個(gè)三角形(xíng)

    軸點在中心,邊長為2的矩形,然後在腳(jiǎo)本上設置UV映射,加上貼圖材質。

    在設置三角形下麵添加一下代碼就可以顯示紋理了呀:

    //UV貼圖的四個點,和頂點一(yī)一對應,左下角為(0,0),右(yòu)上角為(wéi)(1,1)
    //如果頂點順序沒有跟UV對應,貼圖(tú)就會出現問(wèn)題
    Vector2[] uvs = new Vector2[]
    {
        new Vector2(0,0),//第(dì)一個點
        new Vector2(0,1),//2
         new Vector2(1,1),//3
         new Vector2(1,0), //4
    }; mh.uv = uvs;
     rd.material = mat;


    封裝成一(yī)個函數 void CreateBar(int barIndex),修改(gǎi)UV映射,血(xuè)條索引(yǐn)從(cóng)下往(wǎng)上數,每個間隔0.25f

    Vector2[] uvs = new Vector2[]
    {
         new Vector2(0, 0.25f * barIndex),//第一(yī)個點
         new Vector2(0, 0.25f * (barIndex+1)),//2
         new Vector2(1, 0.25f * (barIndex+1)),//3
         new Vector2(1, 0.25f * barIndex), //4
    };
    在Start方(fāng)法調用 CreateBar(0),呀(ya), 怎麽紅色是滿的呢?

    由於滿血狀態是(shì)全紅的(de),所以在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
    };

    是不是有點像啦。隻要改變下長寬(kuān)比就好看啦。 改成下麵這樣多一個參數試試看。


    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), //第(dì)四個
            };
    }
    看看血條效果吧:



    改變血條的值有2個辦(bàn)法,
    1.改變Material的mainTextureOffset值
    mat.mainTextureOffset = new Vector2(0.2f,0);

    但是這樣會令到所以使(shǐ)用者材質的(de)物體貼圖都會改變
    2.修改UV映射


    void SetBarRate(float value)
        {
            value *= 0.5f;
            Vector2[] uvs = new Vector2[]
            {
                new Vector2(value, 0.25f * barIndex),//第一(yī)個點
                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);
        }
    到此基本完成了任務, 下麵來個完整的代碼給各位親參考一下, 歡迎來我們網站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);
        }
        ////// 利用網格創建血條
        //////三角形大小///血條索引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), //第二個
                new Vector3(size.x, size.y, 0), //第三個
                new Vector3(size.x, -size.y, 0), //第四個
            };
            //給(gěi)網格的頂點賦值
            mh.vertices = vertes;
     
            //頂點組成的三角形
            mh.triangles = new[]
            {
                0, 1, 2,
                0, 2, 3
            };
     
            //UV貼圖的四個點,和頂點一一對應,左下角為(0,0),右上角為(1,1)
            //如果頂點順序沒有跟(gēn)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;
            //材質
            rd.material = mat;
            //法線重新計算
            mh.RecalculateNormals();
        }
        ////// 設(shè)置血條比例
        //////血量失去的百分比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ě)是這個方法。 



    AV永久天堂网_奇米狠狠色_亚洲欧美日韩动漫_欧美日韩视频在线观看免费一区二区_日韩精品一二三区_国产AV网站18禁止人_久久久久久精品人妻免费网站不卡_国产最新视频_另类免费视频在线视频二区_久久精品免视国产