うにty生活

UnityChanを生活させたい

簡単!両端から中心に向かって減るゲージUIの作り方【uGUI】

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

 

完成形

 

 

作成方法

両端から減っていくゲージは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; } }

 

ImageタイプがSlice対応画像ならwidth変更するだけでいいと思うけど、これなら非Slice画像でもいけます!

 

[blog:g:12921228815717619800:banner]