扫一扫，访问微社区
后使用快捷导航没有帐号？
签到成功!您今天第{todayrank}个签到，签到排名竞争激烈，记得每天都来签到哦！已连续签到:{constant}天，累计签到:{days}天
当前位置： &
查看: 3380|回复: 9
Unity3D中利用UGUI制作电子数字屏幕
本帖为抢楼帖，欢迎抢楼!&
72648/5000排名<font color="#FF昨日变化主题帖子积分
日久生情, 积分 2648, 距离下一级还需 2352 积分
日久生情, 积分 2648, 距离下一级还需 2352 积分
蛮牛币4450
在线时间828 小时
马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。
才可以下载或查看，没有帐号？
电子数字屏幕的效果如图所示
digitScreenResult.jpg (51.58 KB, 下载次数: 250)
UGUI电子显示屏幕
23:15 上传
这是完全利用UGUI制作的一个电子数字屏幕，在一些科技类的游戏中应该是常见的了（如赛车类等的仪器显示）。
下面是创建过程具体步骤：
1.首先是素材准备，准备一个数字电子图，网上可搜到，如下图，这个我已经用ps处理过，并在Unity中把它按各个数字分割成了Sprite。
digitSprite.jpg (128.39 KB, 下载次数: 199)
制作数字Sprite
23:23 上传
其次再准备一个单色的图，作电子屏幕的背景用，同样制作成Sprite,如下图
BG.png (2.98 KB, 下载次数: 158)
23:35 上传
2.素材准备完毕，接着就是在Unity中进行处理了。
在新建项目中，操作如图
UnityOperation1.png (76.43 KB, 下载次数: 99)
23:49 上传
下一步是制作数字Prefab,从0到9每个数字各作一个。具体为新建一个Image,在Inspector中的Source Image中指定预告准备好的数字Sprite,下图为数字0的Prefab,其它数字同样操作。
Prefab_digit0.jpg (59.86 KB, 下载次数: 79)
数字0的Prefab
00:00 上传
3.最后一步，就是让这些数字能显示出来，效果就是开篇中的那张图。这里只需要给DigitScreen（见步骤2中的第一张图）添加一个脚本。如下：
[C#] 纯文本查看 复制代码using UnityE
using System.C
public class DigitScreen : MonoBehaviour {
private Transform myT
/// &summary&
/// 10个Prefab数字图片
/// &/summary&
public GameObject[] digits = new GameObject[10];
/// &summary&
/// 显示区域的数字占位，本例显示5位数
/// &/summary&
private Transform[] digitPlace = new Transform[5];
/// &summary&
/// 要显示的数字
/// &/summary&
private float dampTime = 0.05f;
/// &summary&
/// 保存show中的各位数字，按索引顺序从低位到高位
/// &/summary&
private int[] singleDigit = new int[5];
void Start()
myTransform = this.
digitPlace[0] = myTransform.FindChild(&OnesDigit&);
digitPlace[1] = myTransform.FindChild(&TensDigit&);
digitPlace[2] = myTransform.FindChild(&HundredsDigit&);
digitPlace[3] = myTransform.FindChild(&ThousandsDigit&);
digitPlace[4] = myTransform.FindChild(&TenThousandsDigit&);
//数字屏幕初始显示为0
for (int i = 0; i & digitPlace.L i++)
GameObject digit = Instantiate(digits[0], digitPlace[i].position, Quaternion.identity) as GameO
digit.transform.SetParent(digitPlace[i]);
void Update()
dampTime -= Time.deltaT
if (dampTime&=0)
dampTime = 0.05f;
int temp =
//分解出show中各位数字，保存至singleDigit数组中
for (int i = 0; i & singleDigit.L i++)
singleDigit[i] = temp % 10;
temp = temp / 10;
if (temp &= 0)
//显示各个占位区的电子数字
for (int i = 0; i & 5; i++)
ShowDigit(digitPlace[i], singleDigit[i]);
/// &summary&
/// 在指定占位区显示数字
/// &/summary&
/// &param name=&digitPlace&&数字占位区&/param&
/// &param name=&toShow&&&/param&
void ShowDigit(Transform digitPlace, int toShow)
if (toShow & 9)
ClearDigit(digitPlace);
GameObject go = Instantiate(digits[toShow], digitPlace.position, Quaternion.identity) as GameO
go.transform.SetParent(digitPlace);
/// &summary&
/// 清除占位区的旧数字
/// &/summary&
/// &param name=&digitPlace&&数字占位区&/param&
void ClearDigit(Transform digitPlace)
int childCount = digitPlace.childC
if (childCount & 0)
GameObject go = digitPlace.GetChild(0).gameO
Destroy(go);
ugui自适应;unity 分割图片;unity3unity3d 4.6unity 图片 分割
每日推荐：
5670/1000排名<font color="#FF昨日变化2主题帖子积分
熟悉之中, 积分 670, 距离下一级还需 330 积分
熟悉之中, 积分 670, 距离下一级还需 330 积分
蛮牛币1082
在线时间216 小时
谢谢分享，学习了！
每日推荐：
71684/5000排名<font color="#FF昨日变化1主题帖子积分
日久生情, 积分 1684, 距离下一级还需 3316 积分
日久生情, 积分 1684, 距离下一级还需 3316 积分
蛮牛币6500
在线时间392 小时
Thank you for sharing I love this
每日推荐：
71848/5000排名<font color="#FF昨日变化主题帖子积分
日久生情, 积分 1848, 距离下一级还需 3152 积分
日久生情, 积分 1848, 距离下一级还需 3152 积分
蛮牛币3985
在线时间505 小时
学习了。很实用的东西
每日推荐：
73055/5000排名<font color="#FF昨日变化主题帖子积分
日久生情, 积分 3055, 距离下一级还需 1945 积分
日久生情, 积分 3055, 距离下一级还需 1945 积分
蛮牛币5570
在线时间802 小时
把这些图做一个fount不行么？
每日推荐：
7排名<font color="#FF昨日变化1主题帖子积分
蛮牛币3559
在线时间442 小时
感谢分享，好东西要支持一下
每日推荐：
5530/1000排名<font color="#FF昨日变化8主题帖子积分
熟悉之中, 积分 530, 距离下一级还需 470 积分
熟悉之中, 积分 530, 距离下一级还需 470 积分
在线时间252 小时
0-9应该做成字体& &搜索bmfont看看
每日推荐：
2131/150排名<font color="#FF昨日变化15主题帖子积分
初来乍到, 积分 131, 距离下一级还需 19 积分
初来乍到, 积分 131, 距离下一级还需 19 积分
在线时间49 小时
f不错啊，贺，加油幽幽
每日推荐：
252/150排名<font color="#FF昨日变化10主题帖子积分
初来乍到, 积分 52, 距离下一级还需 98 积分
初来乍到, 积分 52, 距离下一级还需 98 积分
在线时间15 小时
感谢楼主分享，能够用来帮别人填坑
每日推荐：
3293/300排名<font color="#FF昨日变化6主题帖子积分
偶尔光临, 积分 293, 距离下一级还需 7 积分
偶尔光临, 积分 293, 距离下一级还需 7 积分
在线时间103 小时
我刚看到地张图片的时候还以为会动的呢
每日推荐：
社区QQ达人
使用QQ帐号登录论坛的用户
连续签到30天
游戏蛮牛QQ群会员
加入游戏蛮牛官方QQ群
购买游戏蛮牛书籍他的最新文章
他的热门文章
您举报文章：
举报原因：
原文地址：
原因补充：
(最多只允许输入30个字)他的最新文章
他的热门文章
您举报文章：
举报原因：
原文地址：
原因补充：
(最多只允许输入30个字)在Unity中使用uGUI绘制自定义图形（饼状图 雷达图）
时间： 19:06:02
&&&& 阅读：1882
&&&& 评论：
&&&& 收藏：0
标签：& & & & 饼状图或者是雷达图是根据属性自动生成的自定义图形。这里展示了如何使用uGUI完成这一功能。
& & & 先附上我制作雷达图的控件的代码 &UIPropWidget.cs
using UnityE
using System.Collections.G
using UnityEngine.UI;
* 2 6位为属性0
public class UIPropWidget : Graphic
private enum AnimationStatus
NOT_START,
ANIMATING,
public List&Vector2& _maxPropV
public List&int& _testP
public bool _withAnimation =
private const int VERTEX_SIZE = 8;
// 必须为4的倍数
通过绘制两个四边形组成一个五边形
private const float ANIMATION_TIME = 0.8f;
private const float MAX_PROP_VALUE = 100.0f;
private List&Vector2& _propList = new List&Vector2&();
private List&Vector2& _currentList = new List&Vector2&();
private List&UIVertex& _vertexList = new List&UIVertex&();
private bool _isStartAnimation =
private bool _isAnimationFinish =
private bool _isSetValue =
private float _startTime = 0;
private float _currentTime = 0;
protected void Awake()
_isStartAnimation =
_isAnimationFinish =
_isSetValue =
for (int i = 0; i & VERTEX_SIZE; ++i) {
_propList.Add(Vector2.zero);
_currentList.Add(Vector2.zero);
// 设置五个属性值
public void SetPropList(List&int& list, bool withAnimation = false)
if (list.Count & 5) {
Log.Error(&必须提供5个属性&);
// 给每个属性顶点赋值
_propList[0] = (_maxPropVector[0] - Vector2.zero) * list[2] / MAX_PROP_VALUE;
_propList[2] = (_maxPropVector[2] - Vector2.zero) * list[0] / MAX_PROP_VALUE;
_propList[3] = (_maxPropVector[3] - Vector2.zero) * list[1] / MAX_PROP_VALUE;
_propList[4] = (_maxPropVector[4] - Vector2.zero) * list[3] / MAX_PROP_VALUE;
_propList[6] = (_maxPropVector[6] - Vector2.zero) * list[0] / MAX_PROP_VALUE;
_propList[7] = (_maxPropVector[7] - Vector2.zero) * list[4] / MAX_PROP_VALUE;
// 1 5值是一样的，根据0 4位置连线取中点获取
_propList[1] = (_propList[0] + _propList[4]) / 2;
_propList[5] = (_propList[0] + _propList[4]) / 2;
_isSetValue =
if (withAnimation) {
PlayAnimation();
for (int i = 0; i & VERTEX_SIZE; ++i) {
_currentList[i] = _propList[i];
SetVerticesDirty();
// 开始播放动画
public void PlayAnimation()
_isAnimationFinish =
_isStartAnimation =
_startTime = Time.
void Update()
if (_isAnimationFinish || !_isSetValue || !_isStartAnimation) {
// 动画播放完毕
if (Time.time - _startTime &= ANIMATION_TIME) {
for (int i = 0; i & VERTEX_SIZE; ++i) {
_currentList[i] = _propList[i];
_isAnimationFinish =
// 更新当前动画的数据
float percent = (Time.time - _startTime) / ANIMATION_TIME;
for (int i = 0; i & VERTEX_SIZE; ++i) {
_currentList[i] = _propList[i] *
SetVerticesDirty();
private void UpdateVertex(List&UIVertex& vbo, List&Vector2& list)
// 必须要保证填充的是4的倍数
for (int i = 0; i & VERTEX_SIZE; ++i) {
var vert = UIVertex.simpleV
vert.color =
if (i & list.Count) {
vert.position = list[i];
vert.position = list[list.Count - 1];
vbo.Add(vert);
protected override void OnFillVBO(List&UIVertex& vbo)
// 尚未赋值，不用绘制
if (!_isSetValue) {
UpdateVertex(vbo, _currentList);
& & & & & & 先要说明一下uGUI的渲染体系。 简单来说，就是一个CanvasRenderer进行绘制，所有的控件和可显示的元素都是Graphic。Graphic持有一个canvasRenderer，通过SetVertices设置顶点，最终完成绘制。 举例来说，Image控件就是一个Graphic，这个GameObject上面同时还有一个CanvasRenderer，两者结合起来最终把图片绘制完成。
& & & & & & 设置的顶点&#26684;式是UIVertex，包含position、normal、color、uv0等属性。最关键的就是position，一般传一个点的坐标是相对于它自己的坐标系的像素坐标，不是全局坐标，也不是相对于父节点的坐标。举例来说，一张100*100的图片，锚点为（0.5,0.5），那么它的四个UIVertex的&#20540;分别为 (-50, -50) &(-50, 50) &(50, 50) &(50, -50)。 无论如何移动它的位置或者改变屏幕分辨率，这几个&#20540;是不变的。除非改变Image的大小。
& & & & & & 还有一个需要注意的是，SetVertices中设置的顶点数目必须是4的倍数，因为uGUI的绘制元素是Quad而不是三角形，所以我绘制一个五边形的雷达图的时候，需要8个顶点，通过两个四边形组合成一个五边形。
& & & & & & 最后补充一些关于vertex设置的知识点。&
& & & & & & 一个控件的GameObject上面只允许有一个Graphic，所以不可能同时存在Image和Text。 我们自定义形状的控件可以通过两种方式来实现，一种是重载Graphic，这样这个控件就与Image等价，这里有两个比较重要的可以重载的函数 UpdateGeometry和OnFillVBO。如果看下uGUI的源代码可以发现，UpdateGeometry其实就是获取一个List&UIVertex&，调用OnFillVBO设置顶点数据，再调用所有的BaseVertexEffect组件进行顶点修改，最后传递给canvasRenderer。
OnFillVBO就是我们常用的设置顶点的地方，只要在里面给vbo的参数Add数据就可以了，重复一下上文说过的，Add的数目必须是4的倍数。 Image和Text都是通过这里设置顶点数据的。
& & & & & 上面有提到BaseVertexEffect，这个就是另外一个可以修改顶点信息的地方，它是一个修饰的组件，以Text和Outline为例，Text是一个Graphic，在控件上面添加的Outline
就是一个BaseVertexEffect，Graphic在运行的时候会获取控件上面所有的BaseVertexEffect，然后设置顶点的时候依次调用。 &我们可以实现一个自定义效果，继承自BaseVertexEffect，然后重载ModifyVertex函数进行顶点设置。
& & & & & 当这些知识点理清楚后，一个雷达图简直是小菜一碟。
版权声明：本文为博主原创文章，未经博主允许不得转载。
标签：原文地址：http://blog.csdn.net/langresser_king/article/details/
&&国之画&&&& &&&&chrome插件&&
版权所有 京ICP备号-2
迷上了代码！