初めに
Unityで円形ゲージを作成する方法を調べると、uGUI ImageのImage Type をFilledにしてFill Method を Radial 360 へ設定し、Fill Amountの値を変更する方法が最も多く出てきます。
この方法だと簡単に円形ゲージを作成できますが、2Dであるオブジェクトに追従したい場合に少々めんどくさいです。SpriteRendererの画像を変化させることで円形ゲージを作成する方法を紹介します。
手順
ゲージに使う画像を用意します。今回はいらすとやから円形の画像を引っ張ってきました。
用意した画像をSpriteとしてUnityでインポートして、追従したいオブジェクトの子にします。
以下のShaderGraphを作成します。
PolarCoordinatesノードのG成分に0.5を足すことで、中心の角度によって0~1にグラデーションさせています。これにStepノードを使うことによってある角度以上の領域が切り取られるような形になります。Ratioプロパティの値を0~1の範囲で変化させることで切り取る領域を変化できるようにしました。
ShaderGraphからマテリアルを作成して、ゲージ用のオブジェクトにあてます。
マテリアルのRatioの値を変化させると表示される領域が変化します。
おわりに
2Dでゲージをオブジェクトに追従させたいときにはキャンバス上のImageを操作するよりも単純だと思います。