大家玩游戏时会发现所有游戏当中必定会有的元素就是血条元素，有些血条会跟随人物移动有些血条只是位于屏幕左上角，下图给大家展示一些常见的血条样式：

图一

图二

图三

观察上述图形中展示的血条我们可以发现，在血条的构成中会出现一些底框血条颜色等等，并且血条会随着人物血量的减少血条的中的颜色或者说是血量比例也会随之减少，在有些游戏中血条不仅仅只有单独的一层，它可以有多层级构成，如下图所示：

图四

下面使用Unity引擎的Image组件或者Slider组件实现简单血条，组件如下图所示：

Image组件

Slider组件

首先介绍Image组件，在层级视图中鼠标右键，找到UI选择Image进行创建

Image重要属性如下：

Source Image：指的是当前图片，图片的类型一定要是Sprite

Color：颜色

首先来给Image添加一个图片，点击Sorce Image后的小圆点，选择一张图片：

添加之后如下图所示：

出现Image Type，点开之后选择Filled，填充模式，Fill Method选择水平填充，如下图所示：

拖动Fill Amount 会发现血条在逐渐减少，所以只需要在代码当中获取Fill Amout数值和人物血量关联起来即可实现人物血量减少，血条血量减少的效果

接下来介绍Slider组件类型的血条：

首先在场景当中创建Slider组件，依然是在层级视图中鼠标右键，Create找到UI然后找到Slider，如下图所示：

样式如下：

删除Handle Slider Area：

拖动Slider的Value滑块会发现Slider填充的大小发生更改：

其实只需要简单更改Slider的样式，然后在代码当中将人物血量和Slider的Value关联即可，那么接下来更改一下Slider的样式，展开Slider选择Background，点击右侧小方框，展开之后按下Alt按键不要松手，选择下图箭头所示图标，让子物体充满父物体：

Fill Area重复上述操作：

Fill重复上述操作：

拖动Slider的Value值观察变化，0没有填充，1为充满整个滑块

接下来给Slider添加颜色，记住添加的是Fill的颜色，一个血条就制作完毕了，是不是超级简单啊！

好了，本次的分享就到这里，上述只是实现了一些类似的简易功能，具体的功能的深加工，加工的前提是要有扎实的基本功！大家有什么好的建议和想法可以联系我，让我们一起进步。