【Unity】円形ゲージを作る

円形のゲージですが自分で実装しようとすると結構大変なんですよね。
ところがUnityには円ゲージを表示するため仕組みが用意されていてとても簡単に表示する事が出来ました。

まずは画像のような丸い画像を用意します。

書き方は下記エントリで書いてます。
今回はグラデーションで作ってますが単色で良ければ白色で作っておけばUnity側で好きな色に変更する事が可能です。

まずはゲージを表示させたいキャラクターをHierarchyに表示させて右クリック→UI→CanvasでCanvasを追加します。

Rect TransformのScaleで大きさ0.1(表示させたい大きさで良い)にしてInspectorのCanvasにあるRender ModeをWorld Spaceに変更します。これで画面上を自由に動かせるようになります。
逆に動かないゲージならOverlayで良いと思います。

追加したCanvasの子として右クリック→UI→Imageを追加します。

InspectorのImageにあるSource Imageに作製したゲージ画像を指定してImage TypeをFilledに。
Fill MethodをRadial 360にしてFill Amountのバーを左右に動かすとゲージ的に円が動きます。
(Fill MethodがHorizontalなら横ゲージ、Verticalなら縦ゲージになります)
Radial 360を180にすれば半円になりますしFill Originを変えればゲージのスタート地点を変更出来ます。
Clockwiseは時計回りか反時計回りかの選択。色々といじってみると楽しいです。

スプリクトから弄る場合はfillAmountを使うと良いです。

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

public class player_gauge_move : MonoBehaviour
{

    private Image player_gauge;
    private float gauge;

    void Start()
    {
        player_gauge = GetComponent<Image>();
    }

    void Update()
    {
        gauge += 0.01f;

        player_gauge.fillAmount = gauge;
        if (gauge >= 1) gauge = 0;
    }
}

UI系を弄る場合は最初にusing UnityEngine.UI;の記述が必要です。
上のスプリクトのように player_gauge.fillAmount = gauge;みたいに書けばgaugeの数値によって変化します。
fillAmountが1なら満タンです。

UIを使ってゲージを表示すると3Dで作ってる場合などはゲージを表示してるキャラが後ろを向いても、ちゃんとゲージだけはプレイヤーの方に向いて表示されるので細かい事を考えなくても何となく良い感じに表示してくれて便利です。

敵コアの体力ゲージを円形ゲージにしてみた。前は棒ゲージで上側に表示していたので画面外に隠れて見えない時が多々あったのよね。
円形にして自機の方を向くようにしてみたけど見やすくなったかなー
#unity #gamedev #shmups pic.twitter.com/1yrSkpJC8V

— kt. (@xxxx_kt_xxxx) April 13, 2023