3 / 4 ゲージの形と切り抜き方式
Filled、画像によるMask、矩形のRect Mask 2Dを区別し、必要な形を選びます。
方式の選択
このページは選択課題です。まず横ゲージのPrefabとSceneを保存し、SceneをLesson09Shape.unityとして別名保存します。元の表示へ戻すときはLesson09を開きます。
| 方式 | 範囲を決めるもの | 用途 |
|---|---|---|
| ImageのFilled | Image自身の表示割合 | 横方向や放射状の残量 |
| Mask | 親ImageのAlphaによる形 | 不規則な外形で子を切り抜く |
| Rect Mask 2D | 親Rect Transformの長方形 | 画像を使わず矩形の範囲で子を切り抜く |
Maskは残量を計算する機能ではありません。外形をMask、残量を子のFilled Imageが担当する組み合わせも作れます。
画像によるMaskの確認
- GaugeBackgroundの子へImageを作り、
FillMaskと名付けます。中央Anchor・Pivot、Pos X・Y0、Width300、Height30にします。 - Source Imageに
UISprite、色を白・Alpha1、Image TypeをSimpleとし、Maskコンポーネントを追加します。Show Mask Graphicを無効にします。 - FillImageをFillMaskの子へ移し、中央Anchor・Pivot、Pos X・Y
0、Width300、Height30を再確認します。Filled設定とFill Amount Gaugeの参照は維持します。 - Playで30%と60%を比較します。子の残量が変わっても、親の丸い角からはみ出した部分は描かれません。
独自の外形を使う場合は、外側のAlphaが0、内側が1のSpriteをFillMaskへ割り当てます。不透明な背景を含むスクリーンショットは、切り抜き用の画像には適しません。
Rect Mask 2Dとの比較
Playを終了し、FillMaskのMaskコンポーネントとImageコンポーネントを削除して、Rect Mask 2Dを追加します。FillMaskのWidthを150にすると、中心の幅150の範囲だけが残ります。これは3割という残量ではなく、切り抜き窓の幅の変更です。確認後はWidthを300へ戻します。
左端から残量として窓を伸ばす方式を選ぶ場合は、窓のAnchorとPivotを左へそろえ、満タン時の幅 × 割合で窓の幅を変えます。子画像の幅を窓へ追従させると画像が縮むため、子は満タン時の固定幅を保ちます。今回の基本課題では、既に動くFilledを残量の制御に使います。
円形ゲージの確認
円形にする場合は元のLesson09から別名保存し、背景とFillImageのWidth・Heightをともに100へ変えます。FillImageのFill MethodをRadial 360、Fill OriginをTop、Clockwiseを有効にします。値を0.25 → 0.5 → 1相当へ変え、四分の一、半周、一周の順に満たされることを確認します。
Radial 360は表示割合を放射状に変える機能です。素材が四角なら外形は四角のままです。円やリングの外形には、その形のSpriteを別途作成してSource Imageへ割り当てます。素材を用意する前でも、UISpriteで放射状の切り取り方を確認できます。
- 残量、切り抜きの範囲、画像の外形を分けて説明できる。
- 採用した方式の理由を説明し、基本の横ゲージへ戻れる。