使用UGUI制作血条的两种方式

这篇文章为大家介绍两种血条的制作的方法

第一种就是使用Image搭配遮罩来制作一个血条。

1.新建一个unity工程,然后新建一个场景。

2.Hierarchy面板里新建一个Panel,在右边的inspector里将Color的其调为不透明,颜色调成灰色。

使用UGUI制作血条的两种方式_第1张图片

3.在Panel下面新建一个Image,将Rect Transform的Width调为400,Height调为50,为其选上一张适当的的背景图片作为血条的背景,将填充色调为黑灰色。

使用UGUI制作血条的两种方式_第2张图片

4.再在Panel下面新建一个Image,命名为fill,同样的将Rect Transform下的Width调为400,Height调为50,为其填充为蓝色,然后将fill设置为的Image的子级,并给Image添加Mask组件。这是左右拖动fill,就是产生如下效果。

使用UGUI制作血条的两种方式_第3张图片

5.接下我们为fill添加一个脚本来控制血量。

完成后改变currentHP的值就会发现血条的血量也会跟着变化.


使用UGUI制作血条的两种方式_第4张图片

第二种就是使用UGUI自身的的Slider来制作血条,这一种相对第一种来说简单许多。

1.新建一个场景,Hierarchy面板里新建一个Panel,在右边的inspector里将Color的其调为不透明,颜色调成灰色。

2.右击Panel,在UI下选择Slider,然后删除Handle Slide Area,并将Fill Area的Rect Transform的left和Right设置为0,将Fill的width设置为0.将slider的Width调为400,Height调为50。接着将Fill的颜色设置为绿色。设置好如下图所示。

使用UGUI制作血条的两种方式_第5张图片

3.下来来到Slider的inspector面板里将Max Value的值设置为100。然后运行工程拖动右侧Value的滑动条就可以控制血量。

使用UGUI制作血条的两种方式_第6张图片

你可能感兴趣的:(使用UGUI制作血条的两种方式)