第09回 ゲージの表示と変化

1 / 4 横ゲージの表示範囲

このステップの目的

Imageの表示割合を操作し、空から満タンまでの範囲を確認します。

開始状態

新しいSceneをLesson09.unityとしてScenesフォルダーへ保存します。前回のCanvasの準備と同じScreen Space - OverlayのCanvasを作ります。今回は数字のPrefabやNumber Previewを置きません。

1. Canvasの子へUI > Imageを作り、GaugeBackgroundと名付けます。
2. Anchor Min・MaxとPivotを(0.5, 0.5)、Pos X・Yを0、Widthを300、Heightを30、Scaleを(1, 1, 1)にします。色は暗い灰色、Alphaは1です。
3. GaugeBackgroundの子へImageを作り、FillImageと名付けます。同じAnchor・Pivot、Pos X・Y 0、Width 300、Height 30にします。
4. FillImageのSource Imageの選択ボタンからUISpriteを検索し、Unityに含まれるSpriteを割り当てます。Source Imageが空のままでは、Filledの設定が表示されない場合があります。
5. 色は緑、Alpha 1、Image TypeはFilled、Fill MethodはHorizontal、Fill OriginはLeftにします。Preserve Aspectは無効にします。

独自画像を使う場合は、Projectへ取り込み、Texture TypeをSprite (2D and UI)、Sprite ModeをSingleにしてApplyし、Source Imageへ割り当てます。最初の確認では組み込みのUISpriteを使います。

割合の手動確認

Fill Amountを1 → 0.3 → 0 → 1へ変更します。0.3なら左から3割、0なら背景だけが見えます。背景は満タンの範囲を残すためのもので、一緒に幅を変えません。最後はFill Amountを1へ戻してSceneを保存します。

チェックリスト

• Source ImageとFilledの設定を確認し、3割の表示へ変更できる。
• 値が0になっても背景が残り、満タンの範囲が分かる。