自制人物血条

唤境为用户提供了进度条组件,可以使用该组件制作血条等功能。在本次教程中,我们将学习如何使用精灵图自制血条,并增加一个血条生命值扣除的效果。

点我下载工程

布置场景

本教程中,血条分为两部分:红色的真实血条,以及蓝色的血条减少效果。
首先创建这两个精灵对象。

因为我们会通过改变宽度来实现血条缩短效果,所以需要将血条减少样式血条样式的锚点全部设置在左侧,避免坐标的改变。

将对象拖入场景,位置相同,红色血条在蓝色上方

添加触发按钮

新建按钮组件,拖入3个实例到场景中

为按钮添加实例变量 伤害 , 分别设置3个实例的伤害值: 10、40、90

减少生命逻辑

新建一个全局变量用于控制生命

添加事件,当点击按钮时,根据实例变量的值,减少生命。
生命值减少公式:(生命-HP减少.伤害)<0?0:生命-HP减少.伤害 (这里用了三元运算符来限制生命不能小于0)

根据生命显示血条

在本教程中,将使用两种生命减少效果

  1. 利用线性插值平滑减少
  2. 每帧固定值减少生命

红色血条直接扣除

首先,当生命减少时,先直接扣除红色血条。
公式为:血条宽度 * (当前生命/生命上限)
详细公式:300*((生命>100?100:生命)/100)

利用线性插值减少蓝色血条

蓝色血条的最终尺寸应该和红色血条保持一致。 为了使蓝色血条平滑改变尺寸,这里使用线性插值表达式。
公式为:lerp(当前值,最终值,插值)
lerp(血条减少样式.Width,血条样式.Width,dt*6)
第三个参数 dt*x 可以调节蓝色血条改变尺寸的速度。
详情请参阅系统组件

运行游戏,点击按钮即可看到实际效果

每帧固定减少血条

固定减少的原理是: 如果蓝色血条的长度大于红色血条,每帧固定减少长度。 如果蓝色血条的长度小于红色血条,蓝色血条的长度变成与红色相等。

全部事件如下图所示,请注意,两种减少方式只能激活其中一种

以上便是自制血条(进度条)的教程