Unity 使用UGUI制作简单的血条

效果图

Unity 使用UGUI制作简单的血条_第1张图片

首先

首先创建一个画布Canvas,右键Canvas选择UI,再选择Slider,打开Slider发现下面有三个控件。
在这里插入图片描述
Background不用说了,就是设置背景的。Fill Area就是填充整个Slider,在这里可以选择填充的颜色之类的。Handle Slide Area就是滑标。

第二步

我们将Handle Slide Area删除,因为血条不需要滑标这种东西。之后我们点击Slider,在他的Inspector里面,我们可以找到Min value,Max value,这两个当然代表Slider的最小值与最大值了,我们现在可以把它看为血量的值,那么我们将Max value设为10.继续看下去,我们发现有个Wholes Number选项,这个代表Silider的value值是否以整数的形式改变,我们可以把它打钩。再看下去又发现了一个有趣的东西Direction,这个应该是指填充的slider 的方向吧,我们选择Right To Left ,因为我希望血条消失的方向是从左到右的,也就是刚好与血条填充方向相反。最后设置成下面这个样子
Unity 使用UGUI制作简单的血条_第2张图片

第三步

之后我们点击 Fill Area,在他的Rec Transform里面点击左上角的框框
Unity 使用UGUI制作简单的血条_第3张图片
选择右下角的框框
Unity 使用UGUI制作简单的血条_第4张图片
最后将Left ,Right改为0
Unity 使用UGUI制作简单的血条_第5张图片
再点击Fill Area 里面的Fill控件
在这里插入图片描述
按照上面的方法将Left 和Right改为0
Unity 使用UGUI制作简单的血条_第6张图片

最后

最后,我们将Fill的color改为红色,再将他的Image Type 改为Tiled,也就是让他以平铺的形式填充Slider。让我们运行游戏,然后改变Slider的value,发现一个血条制作完成
Unity 使用UGUI制作简单的血条_第7张图片
至于要让血条在哪个位置显示,这个就要看个人需要了。

你可能感兴趣的:(Unity3d教程)