【Unity】円形ゲージの作り方

実行環境について

Unityバージョン：2019.4.18f1

Visual Studio Community 2019バージョン：16.9.1

円形ゲージのいろいろ

そもそも円形ゲージっていっぱいある…

前振りもいれましたが、本題に入る前にまず円形ゲージの種類の確認です。

円形ゲージ、という言葉を敢えて定義すると、「円形のゲージ」になってしまうんですが、ガワが丸いゲージって結構Unityいっぱいあるんですよね…。

①Slider

多くのUnityプログラマーがHPゲージとして使っているUI。

（Sliderの使い方をご存じない方は、Sliderをわかりやすく説明しておられる先輩諸氏のブログを探してみてください。おおよそ説明しますと、Sliderの子オブジェクトからHandle Slide Areaを削除、残りの子オブジェクトをうまい感じにサイズ調整して…という感じです）

こいつを円形にするのは簡単で、Sliderの子オブジェクトのBackgroundと孫オブジェクトのFill、ご両人のImageコンポーネントのソース画像をKnobにするだけです。

そうするとどうなるかというと…こうなります↓↓

…こんな使い方したSliderに、需要はないと思います…。

いちおう、これは左から右に、赤い円が出ていますが、この方向は上から下へとか、変更可能です。それを含めても需要ないかな…。

Unityプログラマーの皆さんとしては、慣れたSlider使いたいところかもしれないのですが、今回の目的にあいそうにありません…。

②Fill Amount

これは、ImageのUIの一機能になります。ご存じない方も多いかもしれない、Unityの影の薄い機能ですね。

どこにそんなのあったのか、と言いますと、ImageのUIのインスペクター、ImageコンポーネントのImageタイプで"Filled(埋めてある)"を選択するだけで実装できます。

基本的にImageのUIなので、Sliderよりインスペクター画面の要素がごちゃごちゃしていないのが良い部分でしょうか。Fill AmountでHPゲージも作れますので、興味がある方は後ほど調べてみてください！

さて、こいつは影薄いながらも、Sliderとは一風変わったことが色々とできます。

Fill Amountを使って三つほど円形のゲージを作ってみたので、ご覧ください↓↓

円グラフのような（謎表現）もの、雨の日の車のワイパーみたいなもの、学生時代理科の実験でフラスコに液体を入れた記憶を彷彿とさせるようなものまでーー。

小さくなって大きくなる円形ゲージ

☆UIの配置

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI; //UI弄るなら必須

public class SircleGuageSystem : MonoBehaviour
{
    float speed = 0.01f; //後で速度変更しやすいように敢えて変数にしている
    float i = 0;
    bool Increase = true;
    RectTransform rectTransform;

    // Start is called before the first frame update
    void Start()
    {
        rectTransform = this.GetComponent<RectTransform>();
    }

    // Update is called once per frame
    void Update()
    {
        if (Increase)
        {
            i += speed;
        }
        else
        {
            i -= speed;
        }
        if (i >= 1)
        {
            Increase = false;
        }
        if (i <= 0)
        {
            Increase = true;
        }
        rectTransform.localScale = new Vector3(i, i, 0);
    }