嗨！大家好，我是小蚂蚁。
今天分享一下如何使用微信小游戏制作工具中的“遮罩”快速的实现一个血条效果。
首先我们在场景中添加一些所需要的素材。
如图，添加了两个血条的图片，一个当作背景，一个当作前景，并且把这两个图片放到了一个“血条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）。如果你希望血条的过渡快一点儿，可以通过调整“循环次数”和“除数”达到目的。
再次运行一下，看看效果。
可以看到下方的带过渡效果的血条看起来会更友好一些。如果你是一个“细节控”的话，一定也会对这两种不同的表现形式有不同的感受吧！
最后，送上一句我很喜欢的话：要相信你在制作游戏中的所有的用心，玩家都会感受的到。共勉之。
我是会做游戏也会教你做游戏的小蚂蚁，想学习游戏开发的话，关注我的公众号就对啦！
没有系统性的学习课程和路线？自己学习没氛围学不下去？遇到问题无人帮助即时解答？缺少经验不知该如何前行？......欢迎加入小蚂蚁的游戏开发年度课程，不只是一门课，而是围绕着学习游戏开发有关的一整套服务。帮助你用一年的时间学会做游戏，做出自己的游戏，让游戏为你带来睡后收入。欢迎来跟很多同学一起学习做游戏，一起探索游戏的更多可能。【点击这里】可了解课程服务详情，【点击这里】可了解小蚂蚁能为你提供的其它课程和服务。
学员在学会做游戏之后，如果想要继续学习推广运营，我也准备了特殊的优惠，可以半价加入【小游戏推广践行群】，继续学习，打造自己的系统全面的游戏商业能力。
这里是我制作的部分小游戏《经典消除游戏大全》《彩虹星球大冒险》《经典俄罗斯方块》《疯狂泡泡龙》大家可自行点击搜索体验。
长按识别关注
交个朋友！
