[Unity2D/3D]实用的血条制作（第二期）_unity 血条 遮罩

[Unity2D/3D]实用的血条制作（第二期）

前言：第一期我为大家介绍了一种我自己摸索出来的血条制作方法，不是很常规，在这里我为大家介绍一种比较常用的血条制作方法，利用Mask组件来制作，让我们一起来看看叭~

效果如图：

1.首先我们把制作血条的UI摆放好，注意摆放的顺序会影响UI的遮挡关系，在最上方的UI在场景中是位于最下方的，在最下方的UI是在场景中最上方的，例如正常情况下是这样：
现在我交换一下顺序后：

2.摆放好UI后，再创建一个image图片，为其添加一个Mask组件，并调整image其大小（英文模式下快捷键T可以让鼠标在scene场景中对图片大小进行调整，缩放工具也能调整），使其能够将血条遮盖住。

接着我们将遮罩Mask组件中的ShowMaskGraphic取消勾选，这样在场景中就看不到遮罩了，并让其背后的血条显示出来


3.将血条移动到遮罩的下方，使其成为遮罩的子物体，随后我们修改遮罩的大小就能够看见血条也随之发生了改变

接下来非常重要的一点就是，调整遮罩的中心位置，我们这个血条的修改原理是通过修改遮罩的宽度来对其子物体进行遮罩的，如果其遮罩的中心在中间，那么在改变其宽度的同时，遮罩的两边会同时被修改，如下图所示：

让我们改变其遮罩的中心，使用修改图片大小的工具，对图片的中心点进行移动
将其移动到遮罩边框的最左边即可：

这样我们在代码中修改的时候就能够发现，由两边向中心修改其长度时，由于中心左边没有了遮罩，所以遮罩只能够从右边开始收拢：

4.接下来通过代码来控制遮罩，创建一个脚本添加到遮罩上，记住如果直接复制的我的脚本，脚本的名称要和我一样不然会报错，我的脚本名称是BoolController：

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;

public class BoolController : MonoBehaviour
{
    public Image mask; //定义遮罩的名称
    private float originalSize;  //定义一个控制遮罩大小的浮点数
   
    void Start()
    {
        originalSize = mask.rectTransform.rect.width;  //获取遮罩开始的宽度值
        //也可以给遮罩在这里设置一个初始值
        Debug.Log("初始遮罩的宽度为："+originalSize);
        //由于每个人创建的图片大小不一样，所以导致了遮罩的大小不一样
        //我们要知道遮罩的初始大小通过改变遮罩的大小来实现血条的变化
        //我的工程里面遮罩的大小是504.3875  所以100就是其五分之一
    }


    void Update()
    {
        if(Input.GetKeyDown(KeyCode.A))  //按A使遮罩变短
        {
            
            originalSize = originalSize - 100f;  //我的工程里面遮罩的大小是504.3875  所以100就是其五分之一 也就是说减少五分之一的血量
            Debug.Log(originalSize);
        }
        else if(Input.GetKeyDown(KeyCode.D))//按D使遮罩变长
        {
            originalSize = originalSize + 100f; 我的工程里面遮罩的大小是504.3875  所以100就是其五分之一 也就是说增加五分之一的血量
            Debug.Log(originalSize);
        }
        mask.rectTransform.SetSizeWithCurrentAnchors(RectTransform.Axis.Horizontal, originalSize);

        //mask.rectTransform.SetSizeWithCurrentAnchors(RectTransform.Axis.Vertical, originalSize);  竖向改变

        //SetSizeWithCurrentAnchors(遮罩改变的方向，可以选横轴也可以选纵轴, 改变的大小);
    }

}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43

我代码中的数值不一定与你的适用，你自己Debug出来看看，然后再具体看大小

关键代码就那一句：

 mask.rectTransform.SetSizeWithCurrentAnchors(RectTransform.Axis.Horizontal, originalSize);
 //mask 是 image
1
2

当然也可以修改纵向，如我把Horizontal改成Vertical后：

如有什么问题欢迎在下方给我留言，觉得好用的话就点个赞吧

点解链接可以看到更多实用文章：Unity必备基础技能和实用文章