unity3d中利用网格去绘制血条
2015-10-25 16:54
543 查看
利用网格去绘制血条
血条肯定是一个矩形,网格是由一个一个三角形组成的,
矩形可以分成两个三角形。
创建一个空物体,添加以下脚本组件
运行下,就发现绘制出一个粉红色的矩形,为啥是粉红色,因为没材质啊
![](file:///C:/Users/Administrator/AppData/Local/YNote/data/dongz8888@163.com/b3a7d5e4fd6c4692bdecef4355e503f5/7bcca27daac14e71809db0748853bc63.jpg)
![](http://images2015.cnblogs.com/blog/535272/201510/535272-20151025163627552-1772942546.jpg)
在scene视图下把ShadingMode改为Wireframe模式就可以看到两个三角形
![](http://images2015.cnblogs.com/blog/535272/201510/535272-20151025164249849-895500299.png)
![](http://images2015.cnblogs.com/blog/535272/201510/535272-20151025164303739-1713194104.jpg)
![](file:///C:/Users/Administrator/AppData/Local/YNote/data/dongz8888@163.com/4b7107f3c9e1445e88a365cb27575ead/clipboard.png)
![](file:///C:/Users/Administrator/AppData/Local/YNote/data/dongz8888@163.com/5a2390b845da438dace61caba03e9e5d/85aa4422f09d4cc7b1812f27dbb06fce.jpg)
轴点在中心,边长为2的矩形
然后在脚本上设置UV映射,加上贴图材质。
![](file:///C:/Users/Administrator/AppData/Local/YNote/data/dongz8888@163.com/ad4e70ab18d34917ac00add93e85961a/bar_hp.png)
![](http://images2015.cnblogs.com/blog/535272/201510/535272-20151025164347974-1163398822.png)
在设置三角形下面添加
就可以把这张图绘制出来的
效果如下
![](file:///C:/Users/Administrator/AppData/Local/YNote/data/dongz8888@163.com/ae020d620dbe4f73bb07e9f592fe06ff/74cccf1b48124b66876d865fc9f05745.jpg)
![](http://images2015.cnblogs.com/blog/535272/201510/535272-20151025164405317-131827959.jpg)
这张图包含了HP,MP,我们就要把它们区分开来。
封装成一个函数 void CreateBar(int barIndex)
修改UV映射
血条索引从下往上数,每个间隔0.25f
在Start方法调用 CreateBar(0)
效果如下
![](http://images2015.cnblogs.com/blog/535272/201510/535272-20151025164429270-1071361372.jpg)
![](file:///C:/Users/Administrator/AppData/Local/YNote/data/dongz8888@163.com/9cfff58c97fa4337896c7bbeaf549794/44807aed9a2646a1871c89994769da8b.jpg)
由于满血状态是全红的,所以在UV的x映射也要做下改变
是不是有点像啦。只要改变下长宽比就好看啦。
![](http://images2015.cnblogs.com/blog/535272/201510/535272-20151025164502442-580928796.jpg)
函数添加多一个参数
void CreateBar(Vector2 size, int barIndex)
修改下顶点数组
调用下函数
效果如下
![](file:///C:/Users/Administrator/AppData/Local/YNote/data/dongz8888@163.com/e77780ffd5ad4fde9599e496174cc9a3/b4d999817cc742a183dfdbc3db3d10a7.jpg)
![](http://images2015.cnblogs.com/blog/535272/201510/535272-20151025164528255-94749399.jpg)
改变血条的值有点个办法,
第一个是改变Material的mainTextureOffset值
mat.mainTextureOffset = new Vector2(0.2f,0);
但是这样会令到所以使用者材质的物体贴图都会改变
![](file:///C:/Users/Administrator/AppData/Local/YNote/data/dongz8888@163.com/a6b2425c228c44ec9e47695522fba355/0d37b36cf86145a682470a6f4d5d08c0.jpg)
![](http://images2015.cnblogs.com/blog/535272/201510/535272-20151025164548911-1394740166.jpg)
第二个办法就是修改UV映射
效果如下
![](file:///C:/Users/Administrator/AppData/Local/YNote/data/dongz8888@163.com/50e9e2382fff4ea6924acce2ca9d434c/4578c089836e4966abb0d1e3d539bd00.jpg)
![](http://images2015.cnblogs.com/blog/535272/201510/535272-20151025164606052-1202613083.jpg)
做到这里就差不多完成了,利用网格去绘制血条。
最终代码
血条肯定是一个矩形,网格是由一个一个三角形组成的,
矩形可以分成两个三角形。
创建一个空物体,添加以下脚本组件
[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(); } }
运行下,就发现绘制出一个粉红色的矩形,为啥是粉红色,因为没材质啊
![](file:///C:/Users/Administrator/AppData/Local/YNote/data/dongz8888@163.com/b3a7d5e4fd6c4692bdecef4355e503f5/7bcca27daac14e71809db0748853bc63.jpg)
![](http://images2015.cnblogs.com/blog/535272/201510/535272-20151025163627552-1772942546.jpg)
在scene视图下把ShadingMode改为Wireframe模式就可以看到两个三角形
![](http://images2015.cnblogs.com/blog/535272/201510/535272-20151025164249849-895500299.png)
![](http://images2015.cnblogs.com/blog/535272/201510/535272-20151025164303739-1713194104.jpg)
![](file:///C:/Users/Administrator/AppData/Local/YNote/data/dongz8888@163.com/4b7107f3c9e1445e88a365cb27575ead/clipboard.png)
![](file:///C:/Users/Administrator/AppData/Local/YNote/data/dongz8888@163.com/5a2390b845da438dace61caba03e9e5d/85aa4422f09d4cc7b1812f27dbb06fce.jpg)
轴点在中心,边长为2的矩形
然后在脚本上设置UV映射,加上贴图材质。
![](file:///C:/Users/Administrator/AppData/Local/YNote/data/dongz8888@163.com/ad4e70ab18d34917ac00add93e85961a/bar_hp.png)
![](http://images2015.cnblogs.com/blog/535272/201510/535272-20151025164347974-1163398822.png)
在设置三角形下面添加
//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;
就可以把这张图绘制出来的
效果如下
![](file:///C:/Users/Administrator/AppData/Local/YNote/data/dongz8888@163.com/ae020d620dbe4f73bb07e9f592fe06ff/74cccf1b48124b66876d865fc9f05745.jpg)
![](http://images2015.cnblogs.com/blog/535272/201510/535272-20151025164405317-131827959.jpg)
这张图包含了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)
效果如下
![](http://images2015.cnblogs.com/blog/535272/201510/535272-20151025164429270-1071361372.jpg)
![](file:///C:/Users/Administrator/AppData/Local/YNote/data/dongz8888@163.com/9cfff58c97fa4337896c7bbeaf549794/44807aed9a2646a1871c89994769da8b.jpg)
由于满血状态是全红的,所以在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 };
是不是有点像啦。只要改变下长宽比就好看啦。
![](http://images2015.cnblogs.com/blog/535272/201510/535272-20151025164502442-580928796.jpg)
函数添加多一个参数
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 ); }
效果如下
![](file:///C:/Users/Administrator/AppData/Local/YNote/data/dongz8888@163.com/e77780ffd5ad4fde9599e496174cc9a3/b4d999817cc742a183dfdbc3db3d10a7.jpg)
![](http://images2015.cnblogs.com/blog/535272/201510/535272-20151025164528255-94749399.jpg)
改变血条的值有点个办法,
第一个是改变Material的mainTextureOffset值
mat.mainTextureOffset = new Vector2(0.2f,0);
但是这样会令到所以使用者材质的物体贴图都会改变
![](file:///C:/Users/Administrator/AppData/Local/YNote/data/dongz8888@163.com/a6b2425c228c44ec9e47695522fba355/0d37b36cf86145a682470a6f4d5d08c0.jpg)
![](http://images2015.cnblogs.com/blog/535272/201510/535272-20151025164548911-1394740166.jpg)
第二个办法就是修改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); }
效果如下
![](file:///C:/Users/Administrator/AppData/Local/YNote/data/dongz8888@163.com/50e9e2382fff4ea6924acce2ca9d434c/4578c089836e4966abb0d1e3d539bd00.jpg)
![](http://images2015.cnblogs.com/blog/535272/201510/535272-20151025164606052-1202613083.jpg)
做到这里就差不多完成了,利用网格去绘制血条。
最终代码
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;
}
}
相关文章推荐
- unity 已知cosA和sinA,求A
- Unity3d发布IOS9应用时出现中文乱码的解决方法
- unity, 什么时候用静态类,什么时候用单例
- 屏幕自动适应
- unity3D读取XML文档信息
- Unity中Awake与Start函数的调用情况总结
- 3D touch在Unity3D中的使用
- Unity3D--学习太空射击游戏制作(四)
- Unity 功夫猫
- UNITY 5.2 Mathf 结构
- unity里的几个控件说明
- Unity3D--学习太空射击游戏制作(三)
- Unity3d本地存储
- Unity3d本地存储
- Unity3D占用内存太大的解决方法
- Unity5.0安装后提示re-activate等错误
- UNITY 5.2 Vector3 结构
- UnityVS(Visual Studio Tools For Unity)的安装与使用
- Unity之NGUIUIButton点击事件的带参传递
- Loading 进度条 Ulti.MoveTo