今天分享一下如何使用微信小游戏制作工具中的“遮罩”快速的实现一个血条效果。
首先我们在场景中添加一些所需要的素材。
如图，添加了两个血条的图片，一个当作背景，一个当作前景，并且把这两个图片放到了一个“血条1”容器中，另外增加了一个“打你丫的”按钮，用来模拟攻击，点击“打你丫的”按钮，血条就会掉血。
接下来，我们选中血条，点击“管理行为”按钮。在打开的“管理行为”面板中开启“遮罩”行为。
这样在血条的属性面板中就会增加遮罩行为。
对于实现一个血条来说 ，我们只需要关注 3 个属性即可，类型使用“矩形”，血条通常都是矩形的长条形状，然后是宽度和高度，这里的宽度和高度要跟血条图片的宽度和高度相等，对于横向的血条来说，我们只需要设置其宽度即可。
了解与“遮罩”相关的其他属性，可以查看官方文档： https://gamemaker.weixin.qq.com/doc/minigame/behaviors/mask.html
可以看到血条图片的宽度和高度也是 480 x 40。
血条实现的原理是我们通过设置矩形遮罩的宽度来控制血条的显示，假设遮罩宽度设置为 240 ，那么血条只会显示出一半。
如上图，当遮罩宽度设置为 240 时，运行时的血条显示了一半。
实现原理明白了，接着我们就来实现一下血条掉血的效果吧！其实我们只需要知道“总血量”，”当前血量“以及”血条的宽度“就可以动态的计算出遮罩的宽度了。
计算公式：遮罩宽度 = 当前血量/总血量 * 血条的宽度
首先创建 2 个变量，一个记录总血量，一个记录当前血量。
接着选中“血条”，为其增加如下的积木。
*注：与遮罩有关的所有积木块都在右侧的“行为”中，这里我们只需要用到“设置遮罩的宽度”一块积木即可。
最后，我们在“打你丫的”按钮上增加如下的逻辑。
最后，运行一下。
点击“打你丫的”按钮后，血条就会掉血了。
可以看到这里的血条掉血效果很“硬”，缺少过渡，下面我们尝试着为其增加一个过渡，让其看上去更柔和一点儿。
我们重新创建一个“血条2”来实现带过渡的血条效果。
首先在“过渡血条”上创建两个局部变量。
“宽度”变量用于记录之前的遮罩宽度，“新宽度”用于记录新计算的遮罩宽度。
这里使用循环来实现血条的过渡效果，假设当前的宽度是 100，新的宽度是 90，那么血条将会使用 10 帧来完成过渡效果，每 1 帧宽度就会减少 1 （(100-90)/10=1）。如果你希望血条的过渡快一点儿，可以通过调整“循环次数”和“除数”达到目的。
再次运行一下，看看效果。
可以看到下方的带过渡效果的血条看起来会更友好一些。如果你是一个“细节控”的话，一定也会对这两种不同的表现形式有不同的感受吧！
最后，送上一句我很喜欢的话：要相信你在制作游戏中的所有的用心，玩家都会感受的到。共勉之。
