両端から中心に向かって減るゲージUIの作り方

タイトル通り両端から減っていく(もしくは増えていく)ゲージを作成していきます。

完成形

作成方法
ヒエラルキービューの状態
コード

作成方法

両端から減っていくゲージはImageコンポーネントだけでは作成不可能なので自作していきます。

※SliceタイプのSpriteを使えばwidthを変更するだけでそれっぽくは見える

やり方としてシェーダーでも作成可能なのですが、今回はRectMask2Dコンポーネントを使ってさくっと作っていきます。

ヒエラルキービューの状態

BarBackgroundImage(背景)、BarFrontImage(増減ゲージ)はただのImageコンポーネントが付いたものです。

間にRectMaskがあり、ここにRectMask 2Dコンポーネントと後述するコード(BothSidesFill.cs)がアタッチされています。

width,heightは全て同じ

Sliderは動作確認用なのであってもなくても大丈夫です。

コード

public class BothSidesFill : MonoBehaviour
{
    private RectTransform _maskRectTransform;
    private float _defaultWidth;
    private float _fillAmount;
    public float fillAmount {
        get { return _fillAmount; }
        set { 
            _fillAmount = Mathf.Clamp01(value); //設定値を0～1に変更
            _maskRectTransform.sizeDelta = new Vector2(Mathf.Lerp(0, _defaultWidth, _fillAmount), _maskRectTransform.sizeDelta.y);
        } 
    }

    public void Init()
    {
        _maskRectTransform = transform as RectTransform;
        _defaultWidth = _maskRectTransform.sizeDelta.x;
    }

    // Start is called before the first frame update
    void Start()
    {
        Init();
    }

    //以下は無くても動きます(動作確認用)
    public Slider fillSlider;
    public void OnChangeFillAmount()
    {
        fillAmount = fillSlider.value;
    }
}