どうも最近全然体力のないラブヘイトです
すぐ寝ちゃうけど長くは眠れないのです(おじいちゃn・・・w)
今回は前回の記事で触れたCanvasについて詳細に勉強していきます
tubakihimelovehate.hatenablog.com
◆Canvasとは
リファレンスでは「Canvas はすべての UI 要素を配置していくための領域で、すべての UI 要素はその Canvas の子要素でなければいけません」と明記されています
https://docs.unity3d.com/ja/current/Manual//UICanvas.html
つまりはUIを配置するためにはCanvasが必要ということなのです
＜Canvasの特徴＞
・Canvas外にUIを配置しようとしてもCanvasが自動的に作成される
・プロジェクト内のどこかにCanvasがあるとき、ない場所でUIを作成したら自動的にCanvasの子に移動されちゃう
・Canvas自体はいくらでも配置可能
つまりUnityを始めたての人は最初にこれを最低限理解しなければUI配置すらもできないという重要な部分
◆Canvasコンポーネント
RenderMode
レンダーモードではCanvasの配置方法を変更します
Canvasの子になるUIにも、どのように影響するかが変わります
各モードはこちら
・Screen Space - Overlay
このレンダーモードではスクリーンの大きさに合わせてUIを配置・拡大縮小します
私がUnityを始めたての頃、驚いたのがここでした
「Canvasを配置したのにどこにあるんだろう・・・？」
それもそのはず、なぜならCanvasはデフォルトではとてつもなく大きいのだから
Canvasはデフォルトでこのモードになっていて
最初はスクリーンの大きさで出現するからどこにあるかわからなかった
このモードではCanvasの場所に関係なく必ず最初に描画されるため、UIが隠れる心配はありません
結構いいモードですが、このモードではCanvasのTransformは全く触れないのでちょっとでかくて邪魔かな〜とも思います
・Screen space -Camera
カメラをアタッチした場合、カメラから一定の位置にCanvasが置かれます
ただこの場合カメラとCanvasの間にオブジェクトが存在するとUIが隠れてしまいます
下の画像はカメラとCanvasの間に青いキューブを配置した時の見え方
また、カメラをアタッチしなかった場合はOverlayと同じように描画される
Plane Distanceはカメラとの距離を調節することができます
あまり近すぎるとエラーが出ることもあるので注意
・World Space
このモードだとCanvasが他のオブジェクトと同じように扱われる
つまり映像が流れるパネルのようなものも作れるし、壁掛けの絵画も表現できる
１つのオブジェクトなのでカメラと一緒に動きません(親子関係でない場合)
Pixel Perfect
onにするとPixelが整列されて文字とかのぼやけが綺麗になるみたい
私のエディターでは最初から鮮明すぎて違いを確認することができませんでした・・・
Sort Order
これはCanvasがいくつもあるときの描画順です
Canvasだけはヒエラルスキービューの順番ではないのでここで指定する必要があります
Terget Display
どのDisplayに表示させるか選択できます
ディスプレイを変更させた場合カメラが違うので実質Canvasを変更したことになる
Addtional Shader Channel
この部分だけはよくわかりませんでした
UIにシェーダーを反映できるようなのですが実現できませんでした
ただ調べてみたらかなり夢のある機能だなということはわかったので、引き続き勉強していきます(ここで紹介できるほど単純な機能ではないのは確か)
◆Canvas Scaler
UI Scale Mode
・Constant Pixel Size
UI表示をピクセル単位にするモード
UIのサイズと位置が変化しないモードなので場所によってはUIが、画面外になることもある
Scale Factorでピクセルに対する比率が変更可能
・Constant Pysical Size
こちらはピクセルではなく「cm」や「inch」などの単位でUIを表示するモード
物理単位なため位置やサイズが正確になる
その下のDPIは（dots per inch）の略で、FallBack Screen DPIはスクリーンのdpiがわからない時のための仮設定です
値を変えて、ImageのSet Native Sizeを押せば適用される
ちなみに１にした時の大きさです(1inchに１dot)
真ん中のちっこいのがCanvas
・Scale With Screen Size
Refelence Resolutionで設定した解像度に応じてサイズや比率を変更するモード
縦と横の解像度比率が同じなら同じ場所にUIが出現します
ここでそれぞれのモードを比較してみました
768x1024(3:4)の画面比率から1080x1920(9:16)の比率の画面に変更してみました
Screen Sizeの設定は以下の通りです
pixel SizeやPhysical Sizeでは大きさや位置が変わらないためゲーム画面からはみ出ます
上画像の場合画面比率が違うためScreen Match Modeが適用される
Screen Match Modeは画面比率が違う場合の対応について設定できる
-Match Width Or Height
widthにすると横、heightにすると縦に調節します
基本的に横画面ならwidth、縦画面ならheigthに設定しておきます
-Expand(拡大)
Canvasが設定した解像度より小さくならない
-Shrink(縮小)
Canvasが設定した解像度より大きくならない
※CanvasコンポーネントのRender ModeがWorldの場合はUI Scale Modeは変更不可
Referenece Pixels Unit
1unit(unityの単位で1unit=1m)がどれだけのピクセル数にするか決めることが出来る
基準が100なので小さくすれば画像が小さくなるし、大きくすれば大きくなる
200にすれば単純に2倍
こちらも値を変化させた後で、ImageのSet Native Sizeを押さなくては変化はみられない
↑Spriteをアタッチしたら出てくる設定
Canvas以下のImageの大きさをいっぺんに変えられる機能かと思いきや、一つずつだし
変化させても普通に拡大縮小できて、例えば４の時に元の画像サイズまで伸ばすと今度はその値が基準値になったりとガバガバでどこで使うのかはよくわからない
◆Graphic Raycaster
これは透明な線、レイを飛ばしてCanvas上にある全てのオブジェクトを監視しているコンポーネント
このコンポーネントがないCanvasのあらゆるUIは反応しなくなります
例えばこんな感じでCanvasを２つ重ね、Imageの後ろに隠れたボタンが押せるかどうか検証する
Graphic Raycasterを有効にしている場合は「前面のImage」に隠れている場所の
「背面Buttonは押せない」もちろんない場所は押せるd
次に前面のGraphic Raycasterを無効にした場合
重なっていても背面にあるButtonが押せるようになる
・Ignore Reversed Graphic
ON/OFFで反対方向のUIを検出する←？
・Blocking Objects
レイキャストをブロックするオブジェクトを選択する
・Blocking Mask
レイキャストをブロックするレイヤーを選択する
この３つは一応説明は書きましたが
うまく検証することができませんでした
そもそもレイについてよくわかっていない・・・
どこから飛んでどうUIに当たって反応しているのかさっぱりわからない
けどとりあえず一番肝心なところは理解できたから・・・いっか笑
◆まとめ
CanvasのRender Modeを簡単にいうと
・Overlayモードは絶対前面に表示する
・CameraモードのUIは遠近感が出せるし、扱いやすい
・World Space１つのオブジェクトとして表現できる
ということ
今までCameraモードしか使ったことがなかったけど
他のモードもメリットがあるんだねd
Canvasに触っていて発見したことは、わざわざCanvasをカメラの子にする必要はなかったことと、Graphic RaycasterでUIを貫通させることができたこと！
あとはAddtional Shader Channelを扱うことができればさらに表現の幅が広がるということで、頑張って勉強します泣
ではまた
