Unity入門 Canvasの使い方

アイキャッチ 使い方

Unity で UI を作成する場合、 Canvas というゲームオブジェクトを使うことになります。

この記事では、Canvas そのものの使い方を見ていきます。

それでは、以下、解説。

Canvas とは

Canvas とは、UI を配置していくための領域です。

UI には、Image, Text, Button などがあります。

これらの UI要素 を画面に表示するときは、必ず Canvas の子オブジェクトとして配置する必要があります。

Canvas の作り方

ヒエラルキーのCreate から UI → Canvas で作成できます。

また、UI → Text などで UI 要素を作った時に、シーン上に Canvas が1つもなければ

自動的に作成されます。

Canvas を作成すると、いっしょに EventSystem というオブジェクトが作られます。

これは、UI に対するクリックイベントなどを通知するシステムのためのオブジェクトです。

Canvas のコンポーネント

Canvas にはデフォルトで以下の4つのコンポーネントがアタッチされています。

  1. Rect Transform
  2. Canvas
  3. Canvas Scaler
  4. Graphic Raycaster

これらのコンポーネントの機能を解説していきます。

Canvas01

Rect Transform

Rect Transform は、UI 用の Transform コンポーネントです。

通常のゲームオブジェクトの Transform と同じように Position、Rotation、Scale を持っており、

加えて、下記のプロパティを持っています。

  • 矩形のサイズを表すための Width(幅) と Height(高さ)
  • 回転やサイズの基点となる位置を示す Pivot(ピボット)
  • レイアウト調整のための Anchor(アンカー)

Canvas の Rect Transform は Render Mode が WorldSpace のときのみ有効になります。

Canvas

Canvas コンポーネントは Render Mode という重要なプロパティを持っています。

Render Mode は下記の3つから指定します。

  • ScreenSpace – Overlay
  • ScreenSpace – Camera
  • World Space

Canvas コンポーネントは Render Mode によって、プロパティが変化します。

ScreenSpace – Overlay
Canvas02
  • Pixel Perfect … UI をアンチエイリアス無しで描画するかどうか。
  • Sort Order … ScreenSpace – Overlay のCanvas が複数ある場合の描画順。数値が大きいほうが優先。
  • Target Display … マルチディスプレイの時に、何番のディスプレイに表示するか。
  • Additional Shader Channels … シェーダーに追加で流し込むチャネルを指定する。
ScreenSpace – Camera
Canvas03
  • Pixel Perfect … UI をアンチエイリアス無しで描画するかどうか。
  • Render Camera … UI を描画するカメラ。
  • Plane Distance … Canvas が Render Camera から、どれくらい離れて配置されるか。
  • Sorting Layer … ソート用レイヤー。
  • Order in Layer … Sorting Layer で指定したレイヤー内での描画順序。
  • Additional Shader Channels … シェーダーに追加で流し込むチャネルを指定する。
WorldSpace
Canvas04
  • Event Camera … UI イベントを処理するために使用されるカメラ。
  • Sorting Layer … ソート用レイヤー。
  • Order in Layer … Sorting Layer で指定したレイヤー内での描画順序。
  • Additional Shader Channels … シェーダーに追加で流し込むチャネルを指定する。

Canvas Scaler

Canvas Scaler は Canvas 内の UI 要素の全体的なスケールを制御します。

シーンに配置されている Canvas が ScreenSpace か WorldSpace かでプロパティが異なります。

ScreenSpace 用の設定項目

どのようにスケーリングするかを UI Scale Mode を下記の3つから指定します。

  • Constant Pixel Size
  • Scale With Screen Size
  • Constant Physical Size

UI Scale Mode によってもプロパティが変化します。

Constant Pixel Size
Canvas05

Constant Pixel Size は、画面サイズによる拡大縮小は行わず、ピクセル単位でのサイズを保持します。

  • Scale Factor … UI 全体の拡大率。
  • Reference Pixels Per Unit … 1 Unit あたりのピクセル数。

Scale With Screen Size
Canvas06

Scale With Screen Size は、画面のサイズに合わせて、UI を拡大縮小します。

  • Reference Resolution … 基準となる解像度。
  • Screen Match Mode … 現在の画面のアスペクト比と基準解像度がフィットしないときの処理の仕方。
    Match Width or Height … 基準解像度の幅か高さのどちらかに合わせてスケーリングする。
    Expand … 現在のアスペクト比に合わせて拡大する。
    Shrink … 基準解像度のアスペクト比を維持して画面サイズに合わせて縮小する。
  • Match … Screen Match Mode を Match にした場合の、幅と高さどちらを合わせるかの割合。
  • Reference Pixels Per Unit … 1 Unit あたりのピクセル数。
Constant Physical Size
Canvas07

Constant Physical Size は、画面サイズや解像度によらず、物理的なサイズを保持します。

  • Physical Unit … サイズ指定に使用する単位。センチ、ミリ、インチなど。
  • Fallback Screen DPI … 画面の DPI が不明な場合に使用する、想定DPI 。
  • Default Sprite DPI … スプライト1インチあたりのピクセル数。
  • Reference Pixels Per Unit … 1 Unit あたりのピクセル数。

WorldSpace 用の設定項目

WorldSpace の Canvas に設定できるプロパティは下記の2つのみです。

Canvas08
  • Dynamic Pixels Per Unit … Text などに動的にテクスチャを生成するときの 1 Unit あたりのピクセル数
  • Reference Pixels Per Unit … 1 Unit あたりのピクセル数

Graphic Raycaster

Graphic Raycaster は Canvas へのレイキャストに使われます。

レイキャストとは、オブジェクトとレイのヒット情報を得る機能のことです。

つまり、スクリーンをクリックしたとき、どの UI にヒットしたかを通知してくれるコンポーネントです。

  • Ignore Reversed Graphics … Raycaster の方を向いていない UI を無視するかどうか。
  • Blocked Objects … UI より前にあるときにレイキャストをブロックできるオブジェクトのタイプを指定。
  • Blocking Mask … Blocked Objects の中で、レイキャストをブロックできるレイヤーを指定。

Render Mode による違い

Render Mode によって、どのような違いがあるのかを解説します。

ScreenSpace – Overlay

canvas10

このモードでは、Canvas はスクリーンサイズに合わせて拡大縮小して、直接レンダリングされるので

カメラビューなど他のグラフィックの上に描画されます。

つまり、ScreenSpace – Overlay では、UI の上に 3Dオブジェクトなどを表示することはできません。

また、シーンビューで見ると、このように超巨大な状態で表示されます。

canvas09

これは、カメラが写している 3D空間とは異なる、スクリーン空間で扱われるためです。

なので、UI はシーンにカメラがなくても描画されます。

このような巨大なオブジェクトがワールド空間に存在しているわけではないです。

ScreenSpace – Camera

canvas11

このモードでは、Canvas は Render Camera で指定したカメラから

Plane Distance で指定した距離をとって、平面オブジェクトのように描画されます。

Plane Distance より手前に3Dオブジェクトなどがある場合、UI よりも上に描画されます。

Render Camera を指定しない場合、ScreenSpace – Overlay のように描画されます。

canvas_anim01

WorldSpace

このモードは、UI をシーン内の3Dオブジェクトのように描画することができます。

canvas12

個人的によく使う設定

ねこくん
ねこくん

これだけ覚えておけば、だいたい大丈夫!

スマホ画面を想定した Canvas
  • Render Mode … ScreenSpace – Overlay
  • UI Scale Mode … Scale With Screen Size
  • Reference Resolution … X 1920 Y 1080 (縦画面想定なら X 1080 Y 1920)
  • Screen Match Mode … Expand

タッチした場所にエフェクトを出したいが、エフェクトが ParticleSystem で作られている場合などは、

Render Mode を ScreenSpace – Camera にします。

Pixel Perfect は、1ピクセルの細い線などをくっきり描画させたいときにチェックを入れます。

canvas13

このように細い線などが欠けたりしたとき、

canvas14

Pixel Perfect でくっきりさせる。



コメント

タイトルとURLをコピーしました