# 第09回 ゲージの表示と変化のサンプル

UI Gauge Example.unityで各形状と配置、UI Mask Example.unityでマスクの例を確認できます。既存HpGaugeはDOTweenによる演出を含みます。本文のFillAmountGauge.cs・GaugePreview.csによる最小例は未整備です。

## プレビューの操作

[Scenes/09_Gauges.unity](Scenes/09_Gauges.unity)を開いてPlayを開始します。Hierarchyの`Samples`を展開し、表示中の作例をInspector上部のチェックで無効にしてから、見たい作例を有効にします。表示だけを切り替える場合、Prefabへ変更を適用する必要はありません。

`01_Gauges`と`02_Mask`を切り替えます。カメラも各グループに含まれるため、同時に有効にするグループは1つにしてください。ゲージの個別表示は`01_Gauges`内の各作例を切り替えます。

Play中の変更は停止すると戻ります。開始時の表示を変更する場合は、Playを停止してから有効状態を変更し、Sceneを保存してください。

## 主な入口

- [UI Gauge Example.unity](<Scenes/UI Gauge Example.unity>)
- [UI Mask Example.unity](<Scenes/UI Mask Example.unity>)

Sceneを開き、Playで見本を観察します。設定を比較するときはPlayを終了して一つの値だけ変更し、同じカメラ・条件で再生してください。

## ファイル一覧

- [Prefabs/Grid Gauge.prefab](<Prefabs/Grid Gauge.prefab>)
- [Prefabs/HP Gauge 2D.prefab](<Prefabs/HP Gauge 2D.prefab>)
- [Prefabs/HP Gauge 3D.prefab](<Prefabs/HP Gauge 3D.prefab>)
- [Prefabs/Ring Gauge.prefab](<Prefabs/Ring Gauge.prefab>)
- [Scenes/UI Gauge Example.unity](<Scenes/UI Gauge Example.unity>)
- [Scenes/UI Mask Example.unity](<Scenes/UI Mask Example.unity>)
- [Scripts/GridGauge.cs](<Scripts/GridGauge.cs>)
- [Scripts/HpGauge.cs](<Scripts/HpGauge.cs>)
- [Scripts/RandomWalker.cs](<Scripts/RandomWalker.cs>)
- [Scripts/RingGauge.cs](<Scripts/RingGauge.cs>)
- [Scripts/WorldToCanvasFollower.cs](<Scripts/WorldToCanvasFollower.cs>)
- [Shaders/UI Ring.shadergraph](<Shaders/UI Ring.shadergraph>)
- [Sprites/Gauge Grid.psd](<Sprites/Gauge Grid.psd>)
- [Sprites/Gauge.psd](<Sprites/Gauge.psd>)
- [Sprites/Rainbow.psd](<Sprites/Rainbow.psd>)
- [Sprites/Ring Edge.psd](<Sprites/Ring Edge.psd>)
- [Sprites/Ring.psd](<Sprites/Ring.psd>)
- [Sprites/UI Frame.psd](<Sprites/UI Frame.psd>)
- [Sprites/UI Mask.psd](<Sprites/UI Mask.psd>)
- [Sprites/Wave.psd](<Sprites/Wave.psd>)

設定を変更する場合は、Sceneと変更対象のPrefab・Materialを自分の作業フォルダへ複製し、共通の見本へ影響しないようにします。

[サンプル一覧](../../../README.md)
