unity3d中利用网格去绘制血条

 

利用网格去绘制血条

血条肯定是一个矩形，网格是由一个一个三角形组成的，

矩形可以分成两个三角形。

创建一个空物体，添加以下脚本组件

[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<MeshFilter>().mesh;
        rd = GetComponent<MeshRenderer>();
    }
 
    void Start()
    {
 
       //顶点数组
        Vector3[] vertes  = new Vector3[]
        {
            new Vector3(-size, -size, 0),//第一个点
            new Vector3(-size, size, 0), //第二个
            new Vector3(size, size, 0), //第三个
            new Vector3(size, -size, 0), //第四个
        };
 
        mh.vertices = vertes;
 
        //顶点组成的三角形
        mh.triangles = new[]
        {
            0, 1, 2,
            0, 2, 3
        };
        mh.RecalculateNormals();
    }
}
 

运行下，就发现绘制出一个粉红色的矩形，为啥是粉红色，因为没材质啊

 

在scene视图下把ShadingMode改为Wireframe模式就可以看到两个三角形

 

 

轴点在中心，边长为2的矩形

 

然后在脚本上设置UV映射，加上贴图材质。

 

在设置三角形下面添加

//UV贴图的四个点，和顶点一一对应，左下角为(0,0)，右上角为(1,1)
        //如果顶点顺序没有跟UV对应，贴图就会出现问题
Vector2[] uvs = new Vector2[]
        {
            new Vector2(0,0),//第一个点
            new Vector2(0,1),//2
            new Vector2(1,1),//3
            new Vector2(1,0), //4
        };

        mh.uv = uvs;
        rd.material = mat;

 

 

就可以把这张图绘制出来的

效果如下

 

这张图包含了HP，MP，我们就要把它们区分开来。

 

封装成一个函数 void CreateBar(int barIndex)

修改UV映射

血条索引从下往上数，每个间隔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)

效果如下

 

由于满血状态是全红的，所以在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;
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<MeshFilter>().mesh;
        rd = GetComponent<MeshRenderer>();
       
    }
 
    void Start()
    {
        CreateBar(new Vector2(1,0.25f),0 );
        SetBarRate(0.9f);
    }
 
    /// <summary>
    /// 利用网格创建血条
    /// </summary>
    /// <param name="size">三角形大小</param>
    /// <param name="barIndex">血条索引</param>
    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), //第四个
        };
 
        //给网格的顶点赋值
        mh.vertices = vertes;
 
        //顶点组成的三角形
        mh.triangles = new[]
        {
            0, 1, 2,
            0, 2, 3
        };
 
        //UV贴图的四个点，和顶点一一对应，左下角为(0,0)，右上角为(1,1)
        //如果顶点顺序没有跟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();
 
    }
 
    /// <summary>
    /// 设置血条比例
    /// </summary>
    /// <param name="value">血量失去的百分比</param>
    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;
    }
 
 
}