ゲージをスクリプトで減らす - Unityの使い方



Unity -> UI -> ゲージをスクリプトで減らす

ゲージをスクリプトで減らす


2色のゲージをスクリプトで増減させてみました。

まず、ヒエラルキーにImageオブジェクトを新規作成します。すると、同時に親オブジェクトとしてCanvasオブジェクトが作られます。


これをクリックして、インスペクタで、Canvas ScalerコンポーネントのUI Scale Modeを「Scale With Screen Size」にします。

これで、画像のサイズに合わせてゲージのサイズも自動で変わります。

画像をインポートします。


画像をクリックして、インスペクタで、Texure Typeを「Sprite」にします。


Imageオブジェクトの方をクリックして、インスペクタのImageコンポーネントのSource Imageに、この画像をドラッグアンドドロップします。


画像をドロップすると、Imageコンポーネントに項目が増えます。その中のImage Typeを「Filled」にして、Fill Amountの値を小さくすると、画像がすべて表示されず途切れるようになります。



これをゲージに使います。

画像の途切れ方

Fill Methodを変えると、途切れる方式が変わります。


例えば、「Horizontal」だと横方向でしたが、「Vertical」だと縦方向にFill Amountが変化します。


Fill Methodごとに違ったFill Originが用意されています。


「Horizontal」で「Right」にすると、画像の右端に向かって途切れます。


他にもいろいろな種類があります。一部を紹介します。

Vertical / Top


Radical 90 / Bottom Left


Radical 90 / Top Left


Radical 180 / Bottom


Radical 180 / Left


Radical 360 / Bottom


Radical 360 / Right

これで円形のゲージも作れます。

2色のゲージを作る

画像を2種類用意します。


Imageオブジェクトにアタッチして、Rect Transformで横長にします。

Fill Methodは「Horizontal」、Fill Originは「Left」にします。

ヒエラルキーウィンドウでCanvasオブジェクトを選択して、Ctrl + Dで複製します。


元々のCanvasをクリックします。


インスペクタでCanvasコンポーネントのSort Orderを、もう一方のCanvasのSort Orderの値より大きくします。小さい値の方から先に描画されるので、値の大きいCanvasが手前に来ます。

今回は1にしました。

もう一方は0になっています。


複製して新たに作られたCanvasに含まれるImageオブジェクトをクリックします。


Source Imageにもう一方の画像をドラッグアンドドロップします。


これで、手前に表示されている複製元のImageのFill Amountの値を減らすと、画像が途切れた部分からもう一方の画像が見えるようになります。


画像の描画順は、ヒエラルキーウィンドウのImageオブジェクトの上下の順番でも変えられます。

この場合、上にあるImageオブジェクトから描画されます。
間違って順番が変わることが多いと思ったので、今回はCanvasを複製する方法にしました。

スクリプトで制御する

Image.fillAmountに値を入れると、Fill Amountの値をスクリプトで簡単に制御できます。

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

public class GameScript : MonoBehaviour
{

    public Image image;

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

    // Update is called once per frame
    void Update()
    {

        if (Input.GetMouseButton(0))
        {
            image.fillAmount -= Time.deltaTime;
        }
        else {

            image.fillAmount += Time.deltaTime;
        }


    }
}
マウスの左クリックをしている間はゲージを減らして、離している間はゲージを増やしています。

色もスクリプトで変更できるので、画像はどちらも真っ白で良いかもしれません。


ImageコンポーネントのColorで好きな色に変えられます。


手前のImageにスクリプトを付けて、Fill Amountの値によって画像の色を変えてみます。
using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;

public class ImageScript : MonoBehaviour
{

    Image image_f; 

    // Start is called before the first frame update
    void Start()
    {
        image_f = GetComponent<Image>();
    }

    // Update is called once per frame
    void Update()
    {

        if (image_f.fillAmount > 0.5f)
        {
            image_f.color = Color.green;
        }
        else if (image_f.fillAmount > 0.2f)
        {
            image_f.color = new Color(1f, 127f / 255f, 39f / 255f);
        }
        else
        {
            image_f.color = Color.red;
        }
    }
}
Image.colorに色を入れると画像の色が変わります。

トップページへ


tags: ゲージ, Image, UI, 体力ゲージ, 体力