時代に翻弄されるエンジニアのブログ

ゲームプログラマをやっています。仕事やゲームや趣味に関してつらつら書きたいと思います。

Canvas に関して簡単なまとめ

こんにちは、久しぶりの投稿になります。

最近仕事でUnityのUIをいじることがあり、Canvasの設定が全然わかりませんでした。

今日はCanvasについて簡単にまとめてみたいと思います。

そもそもCanvasってなに?

f:id:tkymx83:20180218140909p:plain

UnityでUIを置こうとするとHierarchy上に上の画像のような"Canvas"とかかれたオブジェクトが設置されます。
ボタンなどのUIはこのCanvasの子要素として設置されます。このCanvasのオブジェクトの下に設置しないとUnity上では見ることができません。

Canvasってなにをやっているの?

簡単にいうと、子要素として設定されたボタンなどのUIの見え方の制御をしています。

f:id:tkymx83:20180218140753p:plain

Canvasには上記のようなコンポーネントが設置されています。

[Canvasコンポーネント] はUIがどのように配置されるかを表しています。
Render Mode に設定された項目で見え方が大きく変わります。

  • Screen Space - Overlay

このモードでは、キャンバスのスクリーンの大きさに合わせて、3D空間上のオブジェクトに上書きされるようにレンダリングされます。

この際パースによる影響は受けないため、ゲーム上のメニュー画面のような形で使用できます。

  • Screen Space - Camera

このモードでは、[Screen Space - Overlay] とは異なり、3D空間上の奥行きを判断してレンダリングされます。この際もパースの影響は受けないため、3D空間上に板が設置されているようなレンダリングとなります。

ゲームでは常にカメラの方を向くヘルプの情報のようなかたちでみることができます。

  • World Space

このモードが一番わかり易いですね。3D空間上にUIがあたかも存在するかのように設置できます。そのため、カメラを動かすと、それに応じてUIの見え方も変わります。

キャラクタのHPバーのような形で表示することができます。

解像度が変わった場合ってどうするの?

ゲームを作っていて一番気になるのはスマホのように解像度が違う場合にどのように対処するかですね。

f:id:tkymx83:20180218140753p:plain

その場合は上記Canvasコンポーネントの中で、[Canvas Scalerコンポーネント]を使用します。

UI Scale Mode を変更することで、解像度が違う場合の対処方法を設定することができます。

  • Constant Pixel Size

このモードはUnity上のピクセル数が解像度関係なく表示されます。
つまり、100x100px の画像を表示する場合、1000x1000pxの画面では小さく表示されるが、100x100px の画面では大きく表示されるということです。

  • Scale With Screen Size

こちらは、解像度の変化によって、実際の表示されるサイズを変更するモードです。前述の例で行くと、1000x1000pxの画面でも100x100pxの画面でも画面上の大きさは変わりません。

  • Constant Physical Size

こちは、[Constant Pixel Size] と似ており、前者がピクセル数が一定であることを保証していたように、後者は物理的(ミリメートル)なサイズを一定に保つようにレンダリングします。そのため、DPIが重要視される場合に使用されます。

まとめ

基本的にメニュー画面のようなUIを作る場合は、CanvasのRender Mode は Screen Space - Overlay がおすすめで、Canvas Scaler の UI Scale Mode は Scale With Screen Size がおすすめです。理由は解像度が変わってもUIの位置がずれることがないためです。

反対にHPバーやキャラクタの名前が3D上モデルの上部に表示される場合はそれ以外の要素を使って調節する必要があります。

あとは使ってみて、一番自分の理想に合うものを選んでいただける幸いです。