ugui 弧形血条制作笔记

效果图

美术要求的效果 乍一看不太好做。 但是使用ugui的强大功能。几乎没什么劲就搞定了这里记录一下。

主要思路 是 使用 Image组件自带的Filled功能来实现。

思路1 （不推荐）
使用一个Image遮罩。
要求美术做一个圆形图 只是从45度到225度 有实际内容其他地方透明。
这样的话 直接使用 一个Image组件作为遮罩放到下面的控件位置。
设置 360度模式， 原点设置在上方，顺时针方向变化。

通过程序控制 使 fillAmount 在一个特定范围内变化
代码如下

    const float degMin = 0.125f;        //45度   1/360 * 45
    const float degMax = 0.625f;        //225度  1/360 * 225
    public void UpdataMp(int cur, int max)
    {
        petMPMaskImage.fillAmount = degMin + (degMax - degMin) / max * cur;
    }

---

这个方法做出来 之后 美术小哥发现了个更好的玩法。

思路2
使用 一个slider控件。。。

先说说 slider控件
slider控件一般 用来制作血条 水平方向或者垂直方向比较常见
这个控件很神奇 他通过 一个 value 值来影响他的一个子控件 名字是 Fill
fill 是一个Image类型的 一般做血条的时候 两种可能。
1.血条是拉伸出来的（效果不太好，美术给个小图就行）
2.美术要做渐进颜色的血条不许拉伸（效果好美术要提供完整血条资源）
这两种方法都很好实现
解决1. fill 的Image控件里设置ImageType 为 simple 或者 sliced
解决2 fill 的Image控件里设置ImageType 为 Tiled。

在slider下 有个一个属性 Driection 可以设置进度条的 变化方式， 有从左到右， 从右到左，从上到下，从下到上四种方式。
slider的细节不说了 说弧形血条的实现方式。

美术要做一个半圆图 像是这样。

将这个图 设置给 fill的Image组件。

设置参数filled 不是 360度 而是180度， 这里正好美术要求的效果图血条正好就是180的这里省了不少事。
fillAmount 完全不用理会。 slider的Value值自然会影响 fill控件
现在吧slider控件旋转45度 就变成这个样子

配置好一些slider参数 只要就是运动方法，拖动value看看效果对不对。外观做好了

代码基本不需要什么

    public void UpdataMp(int cur, int max)
    {
        petMPSlider.maxValue = max;        //设置最大值， 有必要也可以设最小值
        petMPSlider.value = cur; 
    }

这样功能就完成了。。。
最牛逼的是未来如果美术不想要这样的血条。 关我屁事。你们自己调去呗！！！ 你就是改成 成这样

一样是个slider 代码完全不用改动！！