开启辅助访问
 找回密码
 注册帐号

扫一扫,访问微社区

蛮牛译馆

关注:493

当前位置:游戏蛮牛 技术专区 蛮牛译馆

查看: 2566|回复: 6

[外文翻译] 【UGUI】使用UGUI制作血条显示伤害值

[复制链接]  [移动端链接]
抢楼 抢楼 本帖为抢楼帖,欢迎抢楼! 
7日久生情
2876/5000
排名
2032
昨日变化
6

103

主题

380

帖子

2876

积分

Rank: 7Rank: 7Rank: 7Rank: 7

UID
105102
好友
38
蛮牛币
4339
威望
0
注册时间
2015-6-2
在线时间
940 小时
最后登录
2016-3-28

蛮牛译员

发表于 2015-10-21 15:51:42 | 显示全部楼层 |阅读模式

马上注册,结交更多好友,享用更多功能,让你轻松玩转社区。

您需要 登录 才可以下载或查看,没有帐号?注册帐号

x
血条和伤害值显示是游戏中常见的效果,而Unity4.6新的UI系统让实现过程更加简单了。下面是我的项目Northwards of Roswell 中使用UGUI制作血条的效果:
TestingCombatFeedback2.gif
战斗吧英雄
血条

最简单的血条就是一个长方形,角色掉血时血条缩小。另外你还可以改变血条颜色来更好地让玩家知道现在的状况。

Unity46HP1.png
添加一个血条作为角色的子物体,这个物体最好没有动画(缩放)
不论是角色旋转还是摄像机旋转后,这个"公告板"效果会让血条始终面向摄像机,不需要手动实现这个行为。因为这个功能很基础,所以已经被实现过很多次了。建议你去Unify Communitywiki 看一下这个,以及其它非常棒的脚本。

Unity46HP2.png
有一个小技巧,就是将锚点设置为左侧,这样在缩放时它就会始终靠左边
根据缩放的值来改变颜色相当简单,不用单独写脚本来实现。所以我写了一个通用的脚本,适用于各种简单血条。点击这里了解更多Lerp相关内容。

[C#] 纯文本查看 复制代码
using UnityEngine;
using System.Collections;
using UnityEngine.UI;
 
// Script that Lerp the color of a image depending of the scale of the transform
public class ChangeColorByScale : MonoBehaviour {
 
 public enum SelectedAxis{
  xAxis,
  yAxis,
  zAxis
 }
 public SelectedAxis selectedAxis = SelectedAxis.xAxis;
 
 // Target
 public Image image;
 
 // Parameters
 public float minValue = 0.0f;
 public float maxValue = 1.0f;
 public Color minColor = Color.red;
 public Color maxColor = Color.green;
 
 // The default image is the one in the gameObject
 void Start(){
  if (image == null){
   image = GetComponent<Image>();
  }
 }
  
 void Update () {
  switch (selectedAxis){
  case SelectedAxis.xAxis:
   // Lerp color depending on the scale factor
   image.color = Color.Lerp(minColor,
                            maxColor,
                            Mathf.Lerp(minValue,
                     maxValue,
                     transform.localScale.x));
   break;
  case SelectedAxis.yAxis:
   // Lerp color depending on the scale factor
   image.color = Color.Lerp(minColor,
                            maxColor,
                            Mathf.Lerp(minValue,
                     maxValue, transform.localScale.y));
   break;
  case SelectedAxis.zAxis:
   // Lerp color depending on the scale factor
   image.color = Color.Lerp(minColor,
                            maxColor,
                            Mathf.Lerp(minValue,
                     maxValue,
                     transform.localScale.z));
   break;
  }
 }
}



根据实际项目不同整合血条的逻辑也会有所改变。如下:

[C#] 纯文本查看 复制代码
public GameObject healthBar;
 
// Health between [0.0f,1.0f] == (currentHealth / totalHealth)
public void SetHealthVisual(float healthNormalized){
 healthBar.transform.localScale = new Vector3( healthNormalized,
                                              healthBar.transform.localScale.y,
                                              healthBar.transform.localScale.z);
}


伤害显示

伤害显示应该要多次生成,所以将它做成预制件。
Unity46HP3.png
血条设置很简单,现在要给它加动画了


在脚本中动态创建物体也很简单:

[C#] 纯文本查看 复制代码
using UnityEngine;
  
using System.Collections;
  
  
// Destroy the gameObject or component after a timer
  
public class SetLifeSpawn : MonoBehaviour {
  
  
// Object can be a GameObject or a component
  
public Object myGameObjectOrComponent;
  
public float timer;
  
  
void Start(){
  
  // Default is the gameObject
  
  if (myGameObjectOrComponent == null)
  
   myGameObjectOrComponent =  gameObject;
  
  
  // Destroy works with GameObjects and  Components
  
  Destroy(myGameObjectOrComponent, timer);
  
}
  
}


伤害数值如何显示也取决于具体的项目,但通常都用一个函数Instantiate 。当完成了战斗和伤害逻辑之后,伤害显示的处理如下:
[C#] 纯文本查看 复制代码
using UnityEngine;
  
using System.Collections;
  
using UnityEngine.UI;
  
  
public Transform damageTransform;
  
public GameObject damagePrefab;
  
  
// The damage to show as a popup
  
public void CreateDamagePopup(int damage){
  
GameObject damageGameObject =  (GameObject)Instantiate(damagePrefab,
  
                                                       damageTransform.position,
  
                                                       damageTransform.rotation);
  
damageGameObject.GetComponentInChildren<text>().text  = damage.ToString();
  
}


Unity46HP4.png
这个动画很简单,你可以对它加工以得到你想要的效果

应该保证伤害显示的动画不会造成数字互相重叠。我用的办法是让这些数字上浮而且逐渐变小到消失。这个方法并不完美但很有效。

注意:CanvasDamage 应该和CanvasHealthBar有相同的组件,这意味着Canvas是在世界坐标下的。

到此就完成了!

原文作者:Juan Gomez


  感谢蛮牛译员“osblow_ui”对本文翻译所做的贡献~~~



本文由蛮牛译馆倾情奉献,除 合作社区 及 合作媒体 外,禁止转载。
unity3d 4.6 ui tutorial;unity health bar;unity3d ugui text;unity3d 伤害数字;unity3d 5.0 canvas;unity 世界坐标转ugui;unity3d 5 ui tutorial;health bar unity;unity3d text ugui;unity3d 弹出伤害数字;unity3d canvas;unity3d canvas 使用;unity3d 多个canvas;unity3d canvas在哪;unity ugui世界坐标

评分

参与人数 3鲜花 +9 收起 理由
enjoy0621 + 2 赞一个!
sharezer + 2 赞一个!
大飛 + 5 赞一个!

查看全部评分

[发帖际遇]: 小刺刺 在网吧通宵,花了 3 蛮牛币. 幸运榜 / 衰神榜

我是一只小刺猬丫咿呀咿呀哟~~~
回复

使用道具 举报

6蛮牛粉丝
1479/1500
排名
1338
昨日变化
6

3

主题

332

帖子

1479

积分

Rank: 6Rank: 6Rank: 6

UID
46577
好友
0
蛮牛币
1760
威望
0
注册时间
2014-9-24
在线时间
506 小时
最后登录
2017-2-23
发表于 2015-10-22 00:04:14 | 显示全部楼层
伤害文字能够自己定义出来后的图层,最后一个永远在最上面

回复

使用道具 举报

5熟悉之中
500/1000
排名
4154
昨日变化
2

0

主题

86

帖子

500

积分

Rank: 5Rank: 5

UID
114327
好友
5
蛮牛币
637
威望
0
注册时间
2015-7-20
在线时间
186 小时
最后登录
2017-2-23
发表于 2015-10-29 10:22:27 | 显示全部楼层
没怎么看懂,不知道你分别用的什么组件,做好给个demo下就好了

回复

使用道具 举报

7日久生情
2467/5000
排名
103
昨日变化

6

主题

215

帖子

2467

积分

Rank: 7Rank: 7Rank: 7Rank: 7

UID
2275
好友
1
蛮牛币
3706
威望
0
注册时间
2013-8-20
在线时间
544 小时
最后登录
2017-2-23
发表于 2015-10-31 21:00:08 | 显示全部楼层
写的很详细,省用HUD插件了,感谢分享

回复

使用道具 举报

排名
27074
昨日变化
20

0

主题

4

帖子

22

积分

Rank: 1

UID
113754
好友
0
蛮牛币
81
威望
0
注册时间
2015-7-15
在线时间
12 小时
最后登录
2016-2-15
发表于 2015-11-3 20:57:44 | 显示全部楼层
不错,赞一个

回复

使用道具 举报

4四处流浪
312/500
排名
7002
昨日变化
4

0

主题

95

帖子

312

积分

Rank: 4

UID
160770
好友
6
蛮牛币
252
威望
0
注册时间
2016-8-5
在线时间
107 小时
最后登录
2017-2-23
发表于 2016-10-26 09:05:11 | 显示全部楼层
多谢,收藏了

回复

使用道具 举报

5熟悉之中
572/1000
排名
6207
昨日变化
68

1

主题

324

帖子

572

积分

Rank: 5Rank: 5

UID
165382
好友
4
蛮牛币
251
威望
0
注册时间
2016-9-1
在线时间
111 小时
最后登录
2017-2-23
发表于 2016-12-9 14:59:10 | 显示全部楼层
谢谢楼主的分享,方便;了许多

回复

使用道具 举报

您需要登录后才可以回帖 登录 | 注册帐号

本版积分规则

快速回复 返回顶部 返回列表