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;
}
}
}
