几种状态栏UI的简单做法

好，现在我们看到的是森林的状态栏UI。对于这种比较简单且美感的曲线UI一直以来都是我的追求。假的

这是堕落之主的状态栏UI，顺带一提这个游戏风评不好但也不至于彻底玩不下去。最近正好通关了，拿来做个素材。心脏病误入

这种就是常见的条状状态栏UI类型了。我一开始接触Unity时就喜欢用Slider做血条。因为这玩意本身并不是为血条这种东西设置的。

不论是父子层级的复杂程度还是“就算把Value调到最小还是不能完全消失的弊端都让我不爽。

于是就稍微探究了下这种状态栏UI怎么做好点。

Mask组件

父物体添加Mask组件后，子物体仅在父物体内容上显示。（白父，黑子）

我们用Mask组件可以实现按图像路径变化的状态栏。

这是一个随便画的状态栏。

它的层级也很简单，一个Bar1物体，作为父级，上面有Mask组件。下面是一个Image纯色图像。

Image的矩形大小与Bar1的完全相同。

可以看到改变Image的RectTransform上的Right组件可以实现血量变化。不过这里要注意Anchors的设置，这里的Min是指相对于父物体单位最小左下角锚点，Max则是相对于父物体的单位最大右上角。好吧，这样说肯定看不懂，不过关系，目前只需要简单记住这四个锚点时决定子物体缩放时的限定范围的，上面的Left和Right可以理解为偏移量而不是衡量大小的。

        可以看出，在我改变Right时，Image左半部分并没有发生变化（固定在那里了），因为我们已经把最小锚点设在那里，既然已经时最小那么就不会再往左了。但是改变Left还是会有变化，因为正如我上面讲的，Left跟Right视作偏移量。所以当Right越大时，图像越往左（因为我们把Max设在最右边了，即右边锚点位置是图像最右边，如果还想往右就只能为负数，负偏移了）

        其实没啥好研究的，做的时候就自然而然会了。说这些是因为我们要用到它们写脚本。方才我是手动控制的，游戏中肯定得有脚本。

using UnityEngine;
/// <summary>
/// 挂载在Bar1上
/// </summary>
public class Bar : MonoBehaviour
{
    private RectTransform ImageRect;//负责变化的图像的矩形变换组件
    [Range(0f, 1f)]
    public float value = 1f;

    private void Start()
    {
        ImageRect = transform.GetChild(0).GetComponent<RectTransform>();
    }

    private void Update()
    {
        ImageRect.anchorMax = new Vector2(value, 1);//就这一串简单的就行了
    }
}

就这么简单，先看看效果。

GIF可能有点不同步，不过应该能看出来，Value的值为1是血条是满的，0时是空的。

正如代码所描述的，这里其实是把Max从最右边移动到最左边，让图像压缩。但要注意，如果直接修改Max不会有此效果，反而是偏移量为了适应Max的变化而变化，即Right变化但图像不会变化。

有知道的请指教。

不只有一种方式，

using UnityEngine;
/// <summary>
/// 挂载在Bar1上
/// </summary>
public class Bar : MonoBehaviour
{
    private RectTransform ImageRect;//负责变化的图像的矩形变换组件
    [Range(0f, 1f)]
    public float value = 1f;

    private void Start()
    {
        ImageRect = transform.GetChild(0).GetComponent<RectTransform>();
    }

    private void Update()
    {
        RectTransform parentRect = GetComponent<RectTransform>();//获取父物体的矩形变换组件
        ImageRect.offsetMax = new Vector2 (value*parentRect.rect.width - parentRect.rect.width, 0f);
    }
}

这里是利用偏移量。offsetMax就是指Right和Up;还记得上面说过的吗，Right越大，图像就越往左，所以当value为1时，Right应该为0（即offsetMax.x）。这里的parentRect是普适操作，为了让子图像能和贴合父图像缩放。还有很烦的就是，这个offsetMax的数值与inspector正好是相反的，应该说是（-Right，-top）比较合适。

还是大家自己研究一下吧，这些思路规避了复杂的层级关系，却有了锚点之间的复杂问题。

森林

        下面的方式就更为简单粗暴了，就是使用Image们自带的填充模式。

直接上图：

 大体思路就是以一个曲线图像作父级和底层，再复制一个自己作为子物体，将子物体的ImageType改为Filled,然后像我这样设置即可。因为填充类型很多，适配方案更多，这里就不谈论了。

        控制脚本就不用演示了，和上边差不多，也是获取Image组件后关联一下Fill Amount值即可。

甚至可以结合Mask组件，比如森林UI那个饱食度，画一个肠胃的图像，再用Mask遮住子级图像，调节子级图像即可实现。反正思路千奇百怪的，这里只是分享一下，这是我认为制作森林状态栏UI最简单的办法了。

自己对UI的理解

        个人不太喜欢复杂的UI，像XX传奇那种就更加不喜欢了，但是卡牌二游那些不能同类讨论，毕竟人家就是全靠UI交互。UI简洁点不失为优化方案之一。有特点又美观的UI才是美术的追求。

        所以我觉得上边这些奇奇怪怪的UI方法应该够用了。

直观，占用空间小（视觉和运行），美观，简洁。（如果有特殊需求除外）