#円形ゲージとは
円形のゲージ、と言葉通りの代物だけど、具体的にはこういうものです。（↓GIF）
赤い丸が大きくなったり小さくなったりする、チャージアクションとかでありがちなアレです。
UnityのUIに用意されているSliderやfill amountなどでは満足のいく出来にならなかったので、自作することにしました。
とりあえず、丸が大きくなったり小さくなったりするだけのスクリプトをこちらではご紹介します。
0.実行環境について
Unityバージョン：2019.4.18f1
Visual Studio Community 2019バージョン：16.9.1
1.UIの配置
特に難しい配置ではないです。
Canvasを設置、その子オブジェクトにImageのUI、さらにその子オブジェクトにもう一度ImageのUIを設置、これで終了です。
最初のImageのUIは、名前をBackgroundにしておきましょうか。
適当なサイズに調整して、その後インスペクターウィンドウ、Imageコンポーネントからソース画像を"Knob"選択、あとは色を適当に決めます。色は、Backgroundの子オブジェクトのImageとかぶらなければなんでもいいです。
次に、その子オブジェクトのImageですが、こいつは最初に、インスペクターからRect transformのコンポーネントにいって、アンカープリセットをstretch×stretchにしてから、上下左右Z座標に至るまで0にします↓↓
画像みたいな感じですね。
後はBackgroundでもしましたが、Imageコンポーネントのソース画像をKnobに、色を適当に調整、これで準備完了です。
さて、これからスクリプトを書くわけですが、そこでどこを弄るのかというと、画像のRect transformの「拡大/縮小」、英語版の"scale"になります！
実際に適当な値を入れて弄るとわかりやすいですが、ここを弄るとImageが大きくなったり小さくなったりします。それをスクリプトで、って感じですね。
2.円形ゲージ
このスクリプトを、Backgroundの子オブジェクトのImageにつけたらいいかと思います。
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);
}
rect transformコンポーネントのscaleを弄るのはlocalscaleですね。これは文字通り、対応する座標がローカル座標なのが厄介でしょうか。
Unityにはローカル座標とワールド座標というのがある、というのはUnity学習の上での鬼門らしいので、ちょっとばかし忘れてる方は復習したほうがよさそうですね…！
3.スクリプトを実際に使ううえで
スクリプトには書いていませんが、円の縮小・拡大を止めたければ、speedに0を代入すればいいです。
また、この円形ゲージの結果から次の行動（つまり別のスクリプト）につながるようなものを作りたい場合、iを別のスクリプトに送れるようにすればいいと思います。
4.余談：その他の円形ゲージ
他のUIで円形ゲージを志向するとどうなるのか、サンプルを掲載しておこうと思います。
4-1.Slider
4-2.Fill Amount
以上です。