うにty生活

UnityChanを生活させたい

【まとめ】Canvasを使いこなそうのコーナー #11.1

 

どうも最近全然体力のないラブヘイトです

すぐ寝ちゃうけど長くは眠れないのです(おじいちゃ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コンポーネント

f:id:tubakihimeLoveHate:20181025160906p:plain

RenderMode

レンダーモードではCanvasの配置方法を変更します

Canvasの子になるUIにも、どのように影響するかが変わります

各モードはこちら

 

・Screen Space - Overlay

このレンダーモードではスクリーンの大きさに合わせてUIを配置・拡大縮小します

 

私がUnityを始めたての頃、驚いたのがここでした

「Canvasを配置したのにどこにあるんだろう・・・?」

f:id:tubakihimeLoveHate:20181027172620p:plain

 

 

それもそのはず、なぜならCanvasはデフォルトではとてつもなく大きいのだから

f:id:tubakihimeLoveHate:20181027173017p:plain

 

Canvasはデフォルトでこのモードになっていて

最初はスクリーンの大きさで出現するからどこにあるかわからなかった

 

このモードではCanvasの場所に関係なく必ず最初に描画されるため、UIが隠れる心配はありません

 

結構いいモードですが、このモードではCanvasのTransformは全く触れないのでちょっとでかくて邪魔かな〜とも思います

 

 

Screen space -Camera

f:id:tubakihimeLoveHate:20181027183925p:plain

 

カメラをアタッチした場合、カメラから一定の位置にCanvasが置かれます

f:id:tubakihimeLoveHate:20181027183942p:plain

 

ただこの場合カメラとCanvasの間にオブジェクトが存在するとUIが隠れてしまいます

下の画像はカメラとCanvasの間に青いキューブを配置した時の見え方

f:id:tubakihimeLoveHate:20181027190245p:plain

また、カメラをアタッチしなかった場合はOverlayと同じように描画される

 

Plane Distanceはカメラとの距離を調節することができます

あまり近すぎるとエラーが出ることもあるので注意

 

World Space

このモードだとCanvasが他のオブジェクトと同じように扱われる

つまり映像が流れるパネルのようなものも作れるし、壁掛けの絵画も表現できる

1つのオブジェクトなのでカメラと一緒に動きません(親子関係でない場合)

 

Pixel Perfect

onにするとPixelが整列されて文字とかのぼやけが綺麗になるみたい

私のエディターでは最初から鮮明すぎて違いを確認することができませんでした・・・

 

Sort Order

これはCanvasがいくつもあるときの描画順です

Canvasだけはヒエラルスキービューの順番ではないのでここで指定する必要があります

 

Terget Display

どのDisplayに表示させるか選択できます

f:id:tubakihimeLoveHate:20181027203706g:plain

ディスプレイを変更させた場合カメラが違うので実質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を押せば適用される

f:id:tubakihimeLoveHate:20181027204222p:plain

ちなみに1にした時の大きさです(1inchに1dot)

f:id:tubakihimeLoveHate:20181027204235p:plain

真ん中のちっこいのがCanvas

 

・Scale With Screen Size

Refelence Resolutionで設定した解像度に応じてサイズや比率を変更するモード

縦と横の解像度比率が同じなら同じ場所にUIが出現します

 

ここでそれぞれのモードを比較してみました

768x1024(3:4)の画面比率から1080x1920(9:16)の比率の画面に変更してみました

Screen Sizeの設定は以下の通りです

f:id:tubakihimeLoveHate:20181027221837j:plain

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を押さなくては変化はみられない

f:id:tubakihimeLoveHate:20181027204222p:plain

↑Spriteをアタッチしたら出てくる設定

Canvas以下のImageの大きさをいっぺんに変えられる機能かと思いきや、一つずつだし

変化させても普通に拡大縮小できて、例えば4の時に元の画像サイズまで伸ばすと今度はその値が基準値になったりとガバガバでどこで使うのかはよくわからない

 

◆Graphic Raycaster

これは透明な線、レイを飛ばしてCanvas上にある全てのオブジェクトを監視しているコンポーネント

このコンポーネントがないCanvasのあらゆるUIは反応しなくなります

 

例えばこんな感じでCanvasを2つ重ね、Imageの後ろに隠れたボタンが押せるかどうか検証する

f:id:tubakihimeLoveHate:20181028023228g:plain

Graphic Raycasterを有効にしている場合は「前面のImage」に隠れている場所の

「背面Buttonは押せない」もちろんない場所は押せるd

 

次に前面のGraphic Raycasterを無効にした場合

f:id:tubakihimeLoveHate:20181028023343g:plain

重なっていても背面にあるButtonが押せるようになる

 

・Ignore Reversed Graphic 

ON/OFFで反対方向のUIを検出する←?

 

・Blocking Objects

レイキャストをブロックするオブジェクトを選択する

 

・Blocking Mask

レイキャストをブロックするレイヤーを選択する 

 

この3つは一応説明は書きましたが

うまく検証することができませんでした

 

そもそもレイについてよくわかっていない・・・

どこから飛んでどうUIに当たって反応しているのかさっぱりわからない

けどとりあえず一番肝心なところは理解できたから・・・いっか笑

 

◆まとめ

CanvasのRender Modeを簡単にいうと

・Overlayモードは絶対前面に表示する

・CameraモードのUIは遠近感が出せるし、扱いやすい

・World Space1つのオブジェクトとして表現できる

ということ

 

今までCameraモードしか使ったことがなかったけど

他のモードもメリットがあるんだねd

 

Canvasに触っていて発見したことは、わざわざCanvasをカメラの子にする必要はなかったことと、Graphic RaycasterでUIを貫通させることができたこと!

 

あとはAddtional Shader Channelを扱うことができればさらに表現の幅が広がるということで、頑張って勉強します泣

 

ではまた