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

最近课程实训选修Unity，讲解的是Unity官方案例——SpaceShoot，培训无聊，便想着给游戏角色制作一下血条，以此增加游戏的可玩性。

Unity版本：5.4.1

案例模版：太空射击

原文作者：茄阁云云

原文连接：http://www.cnblogs.com/vmoor2016/p/6044941.html

 

把一个大象装进冰箱里需要三步：①把冰箱门打开；②把大象塞冰箱里；③关上冰箱门。

那么制作一个角色的血条需要几部呢？在这里也划分为三步：①制作血条；②摆放血条；③操作血条。

下面就来给大家分享下血条的制作步骤。

 第一步：制作血条

• 选中游戏对象，在游戏对象下创建子物体Canvas，步骤：选择游戏物体-右键-UI 选择创建

　　Canvas；

• 创建血条，步骤：选择创建好的Canvas，然后，右键-UI 选择创建Slider；

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

　　展开Slider（如下图第二张）就可以发现组成滑动条的三个组件：

　　Background，背景颜色；Fill Area，填充颜色；Handle SliderArea：滑动柄。

　　

　　为了方便看到制作效果，现在修改Slider属性，选中Slider，在Inspector面板的组件

　　Slider(Script)里修改Min Value=0,Max Value=10,Value=10。现在开始制作血条：

• 去掉Handle（滑动柄）：选择Handle SliderArea，按Delete键删除（当然也

　　可以在Inspector面板中取消选中该物体），然后就可以发现圆圆的滑动柄消失了。

• 修改背景色与填充色：选择FillArea下的Fill，在Inspector面板下找到Image(Script)组件,

　　在其中可以修改Slider的填充色，同样选择Background修改背景色。

• 调整Fill Area（填充区域）：上一步执行后发现，虽然Slider的当前值Value等于Max Value

　　，但血条并未被填满。现在选择Fill Area在Inspector面板中修改Rect Transform中个属性，

　　将Left、Right的值都设为0（见下图），至此一个简单的血条就制作完成了。

　　　　 

　　　　

第二步：摆放血条

　　到目前为止血条还没有出现在相机视的野里，这是由于Canvas（画板）的属性设置原因，在

　　Inspector面板下查看Canvas渲染属性（Render Mode）。

　　　　

　　渲染方式有三种，默认的是Screen Space-Overlay。在本步骤后补充会简单介绍前两种渲染

　　方式，现在先将Render Mode改为World Space（全局）。

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

　　　　

　　这就意味着我们可以通过旋转拖放将血条摆放到合适的位置。具体摆放步骤如下：

• 修改Canvas的位置，将Pos x，Pos Y设为0；
• 旋转Canvas：由于Canvas相当于一个面，所以如果相机从垂直角度拍摄将看不到画板

　　上的任何东西，旋转Canvas使其正对Main Camera（我这里相机在Y轴垂直向下拍摄，

　　故将Canvas绕X轴旋转了90度），这时大大的血条便在Game场景下出现了。

　　　　

• 修改Slider尺寸：不用说，这么大的血条肯定要修改下尺寸，在这里推荐使用Scale

　　（缩放工具）进行大小修改。当然你也可以通过修改宽高来实现，不过控制不好宽高

　　比例将带来意想不到的效果（不服可以亲自尝试一下）。

　　

• 修改Canvas尺寸：这么小的血条用不了那么大的Canvas画板，因此将Canvas的大小

　　修改为与血条相当即可，这里推荐直接修改宽高，如图。至此摆放血条的工作都已经完成

　　了，可以选中移动工具进行演示，可以发现血条照预期的那样跟随角色移动。

　　

　　下面为补充内容，不感兴趣可以跳过。

　　补充：

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

　　1.Screen Space - Overlay:默认的渲染模式，此模式Canvas位置大小不可改变，但可以通过

　　移动父物体来间接改变，Canvas的起始位置就是父物体的位置，大小和设置的显示屏幕大小

　　有关（如下图1，我这里是600*900），更改不同的显示大小，Canvas的形状大小也将会发生

　　　　  改变。此模式不需要UI相机，Canvas上的内容将显示在所有游戏物体之前。

　　　　　

　　2.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;    //适当的时候对血条执行操作
    }
}    

 

　　血条制作过程就到此结束了，喜欢的话就顶一下吧。

 

　　本文的血条制作过程系作者原创，不足之处欢迎评论指证，尊重原创，转载请注明出处。