首页 > 游戏开发 >  Unity UGUI Canvas 使用Slider制作角色血条正文

Unity UGUI Canvas 使用Slider制作角色血条

第一步:制作血条

选中游戏对象,在游戏对象下创建子物体Canvas,步骤:选择游戏物体-右键-UI 选择创建 Canvas;

创建血条,步骤:选择创建好的Canvas,然后,右键-UI 选择创建Slider;

此时在游戏Scene视图中便可以看到一个白框即Canvas画布,还有血条原型Slider。

展开Slider(如下图第二张)就可以发现组成滑动条的三个组件:Background,背景颜色;Fill Area,填充颜色;Handle SliderArea:滑动柄。

unity slider制作血条教程


为了方便看到制作效果,现在修改Slider属性,选中Slider,在Inspector面板的组件Slider(Script)里修改Min Value=0,Max Value=10,Value=10。现在开始制作血条:

unity slider制作血条教程


去掉Handle(滑动柄):选择Handle SliderArea,按Delete键删除(当然也可以在Inspector面板中取消选中该物体),然后就可以发现圆圆的滑动柄消失了。

unity slider制作血条教程


修改背景色与填充色:选择FillArea下的Fill,在Inspector面板下找到Image(Script)组件,在其中可以修改Slider的填充色,同样选择Background修改背景色。

unity slider制作血条教程


调整Fill Area(填充区域):上一步执行后发现,虽然Slider的当前值Value等于Max Value,但血条并未被填满。现在选择Fill Area在Inspector面板中修改Rect Transform中个属性,将Left、Right的值都设为0(见下图),然后选中Fill节点,将Fill左右宽度调整为和Fill Area相同宽度,至此一个简单的血条就制作完成了:

unity slider制作血条教程

unity slider制作血条教程


第二步:摆放血条

到目前为止血条还没有出现在相机视的野里,这是由于Canvas(画板)的属性设置原因,在Inspector面板下查看Canvas渲染属性(Render Mode)。

unity slider制作血条教程


渲染方式有三种,默认的是Screen Space-Overlay。在本步骤后补充会简单介绍前两种渲染方式,现在先将Render Mode改为World Space(全局)。

修改后便会发现,Inspector面板中的Rect Transform组件可以修改了。

unity slider制作血条教程


将Rect Transform reset下,此时canvas就和画布差不多大了

unity slider制作血条教程


再将Rect Transform 的scale都设置为0.01,再看下画面:

unity slider制作血条教程

unity slider制作血条教程


将Canvas放置到需要用到血条的节点的下面,将血条作为子物体,这样节点移动,血条也会跟着移动。再修改下血条的尺寸大小:

unity slider制作血条教程

unity slider制作血条教程


补充:

上面提到Canvas的三种渲染模式,在这里再对前两种进行简单说明:

  • Screen Space - Overlay:默认的渲染模式,此模式Canvas位置大小不可改变,但可以通过移动父物体来间接改变,Canvas的起始位置就是父物体的位置,大小和设置的显示屏幕大小有关,更改不同的显示大小,Canvas的形状大小也将会发生改变。此模式不需要UI相机,Canvas上的内容将显示在所有游戏物体之前。

  • Screen Space - Camera:此模式Canvas位置大小不可改变,需要指定UI相机(可以发现多出来一个Render Camera,默认是不指定相机的),Canvas画布大小根据相机视野来定,可以将Main Camera挂载到上面观察效果,画布上的内容将一直显示在相机视野里,且显示在所有游戏物体之前。


第三步:操纵血条

关于血条的操作就要用到脚本来控制了。操作很简单,因此脚本很简单,感兴趣可以查看一下。

using UnityEngine;
using System.Collections;
using UnityEngine.UI;    //添加UI命名空间
public class PlayerCollide : Collide {
    public Slider HPStrip;    //添加血条Slider的引用
    public int HP;
    void Start () {
        HPStrip.value = HPStrip.maxValue = HP;    //初始化血条
    }
    public void OnHit(int damage){
        HP -= damage;
        HPStrip.value=HP;    //适当的时候对血条执行操作
    }
}