How to make a blood bar in the game

hi ！ Hello everyone , The ant is me . Welcome to my WeChat official account. 【 Little ants teach you to play games 】, Learn more original game development tutorials .

Today, I'd like to share how to use... In wechat game making tools “ Mask ” Quickly achieve a blood bar effect .

First, we add some required materials to the scene .

Pictured , Added two pictures of blood strips , One as the background , One as a prospect , And put these two pictures into one “ Blood strip 1” In the container , In addition, an “ Hit you ” Button , Used to simulate a blow , Click on “ Hit you ” Button , The blood strip will shed blood .

Next , We choose the blood bar , Click on “ Management behavior ” Button . On the “ Management behavior ” Open in the panel “ Mask ” Behavior .

This will increase the mask behavior in the property panel of the blood bar .

For realizing a blood bar , We just need to pay attention 3 Only attributes , Type used “ rectangular ”, Blood strips are usually rectangular strips , Then width and height , The width and height here should be equal to the width and height of the blood bar picture , For horizontal blood strips , We just need to set its width .

Understand and “ Mask ” Other related properties , You can view the official documentation ：https://gamemaker.weixin.qq.com/doc/minigame/behaviors/mask.html

You can see that the width and height of the blood bar picture are also 480 x 40.

The principle of blood bar implementation is that we control the display of blood bar by setting the width of rectangular mask , Suppose the mask width is set to 240 , Then the blood bar will only show half .

Pictured above , When the mask width is set to 240 when , The running blood bar shows half .

The implementation principle is clear , Then let's realize the effect of blood strip losing blood ！ In fact, we just need to know “ Total blood volume ”,” Current health “ as well as ” The width of the blood bar “ You can dynamically calculate the width of the mask .

Calculation formula ： Mask width = Current health / Total blood volume * The width of the blood bar

First create 2 A variable , A record of total blood volume , A record of current blood volume .

Then choose “ Blood strip ”, Add the following building blocks .

* notes ： All building blocks related to the mask are on the right “ Behavior ” in , All we need here is “ Set the width of the mask ” One block is enough .

Last , We are “ Hit you ” Add the following logic on the button .

Last , Run it .

Click on “ Hit you ” After button , The blood strip will lose blood .

You can see that the blood strip here has a very good blood loss effect “ hard ”, Lack of transition , Now we try to add a transition , Make it look softer .

Let's recreate a “ Blood strip 2” To achieve the effect of blood strips with transition .

First, in the “ Transitional blood strip ” Create two local variables on .

“ Width ” The variable is used to record the previous mask width ,“ New width ” Used to record the newly calculated mask width .

Here, circulation is used to achieve the transition effect of blood strips , Suppose the current width is 100, The new width is 90, Then the blood bar will be used 10 Frame to complete the transition effect , Every time 1 The frame width will be reduced 1 （(100-90)/10=1）. If you want the blood bar to transition faster , Can be adjusted by “ cycles ” and “ Divisor ” Achieve a goal .

Run it again , Look at the effect .

You can see that the blood bar with transition effect below will look more friendly . If you are one “ Detail control ” Words , There must be different feelings about these two different forms of expression ！

Last , Send me a sentence I like very much ： Believe in all your intentions in making games , Players will feel . Encourage them together .

---

I am a little ant who can play games and teach you to play games , Welcome to WeChat official account. 【 Little ants teach you to play games 】, Get the most complete wechat game development original tutorial materials in the whole network , Learn some game development knowledge every day .