首页 > 编程语言 > 详细

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

时间:2016-11-12 22:15:42      阅读:6708      评论:0      收藏:0      [点我收藏+]

标签:bgm   odi   wap   pam   fin   nvi   yaf   ddl   hsrp   

最近课程实训选修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挂载到上面观察效果,画布上的内容将一直显示在相机视野里,且

  显示在所有游戏物体之前。

    技术分享

第三步:操纵血条

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

技术分享
 1 using UnityEngine;
 2 using System.Collections;
 3 using UnityEngine.UI;    //添加UI命名空间
 4 
 5 public class PlayerCollide : Collide {
 6     
 7     public Slider HPStrip;    //添加血条Slider的引用
 8     public int HP;
 9     void Start () {
10         HPStrip.value = HPStrip.maxValue = HP;    //初始化血条
11     }
12     public void OnHit(int damage){
13         HP -= damage;
14         HPStrip.value=HP;    //适当的时候对血条执行操作
15     }
16 }    
View Code

 

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

 

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

 

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

标签:bgm   odi   wap   pam   fin   nvi   yaf   ddl   hsrp   

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

(0)
(2)
   
举报
评论 一句话评论(0
0条  
登录后才能评论!
© 2014 bubuko.com 版权所有 鲁ICP备09046678号-4
打开技术之扣,分享程序人生!
             

鲁公网安备 37021202000002号