【Unity入門】徹底的に使いこなそう!Canvasのまとめ
![](https://mogi0506.com/wp-content/uploads/2019/05/paint-1209521_1280-1024x480.jpg)
こんにちは、もぎです。
UIを配置するときに用いるCanvas。
今回の記事では、CanvasでできることやCanvasオブジェクトについているコンポーネントについてまとめてみました。
この記事の目次
Canvasとは
CanvasとはTextやImage、ButtonなどのUIを配置するときに必要となるオブジェクトのことです。
Canvasを配置せずにUIを作った場合は、自動でUIの親階層に作られます。
![](https://mogi0506.com/wp-content/uploads/2019/05/スクリーンショット-0031-05-24-0.55.54.png)
上記の画像の場合は、Canvasを配置せずにUIであるImageオブジェクトを作ったので自動でCanvasが配置されました。
また、最初の段階ではCanvasは画面に直接表示されているので、UIを配置している場合は3Dオブジェクトが隠れてしまいます。
Image配置前 Image配置後
UIの前にオブジェクトを表示したい場合は、記事後半のCanvasのRender Modeを参照してください。
できること
1.Canvas Scalerで複数の画面サイズに対応できるようにする
2.Canvasのサイズをカメラのサイズに合わせる
1.Canvas Scalerで複数の画面サイズに対応できるようにする
ゲームを作っているとUIを複数の画面サイズに対応させたい場合ってありますよね。
CanvasオブジェクトについているCanvas Scalerコンポーネントをいじると対応させられるようになります。
UIを複数の画面サイズに対応させたい方はこちらの記事をどうぞ『Canvas Scalerで複数の画面サイズに対応できるようにする方法』
2.Canvasのサイズをカメラのサイズに合わせる
2Dゲームを作っている場合などCanvasをカメラのサイズと合わせたい場合があるかと思います。
そのような場合は、まずCanvasオブジェクトを選択した状態で、
![](https://mogi0506.com/wp-content/uploads/2019/05/スクリーンショット-0031-05-24-1.37.20.png)
InspectorからCanvasコンポーネントのRender Modeを『Screen Space – Camera』に変更してください。
![](https://mogi0506.com/wp-content/uploads/2019/05/スクリーンショット-0031-05-24-1.36.03.png)
その後にCanvasのサイズと合わせたいカメラオブジェクトをRender Cameraにドラッグ&ドロップしてください。
![](https://mogi0506.com/wp-content/uploads/2019/05/スクリーンショット-0031-05-24-1.43.32.png)
これでCanvasのサイズをカメラのサイズに合わせることができました!
Canvasオブジェクトのコンポーネント
Canvasオブジェクトには三つのコンポーネントが追加されています。
1.Canvas
2.Canvas Scaler
3.Graphic Raycaster
![](https://mogi0506.com/wp-content/uploads/2019/05/スクリーンショット-0031-05-24-0.43.00.png)
それぞれどのような役割があるのか説明していきましょう!
1.Canvas
![](https://mogi0506.com/wp-content/uploads/2019/05/スクリーンショット-0031-05-24-0.43.00のコピー.png)
CanvasコンポーネントにはRenderModeといってどのようにCanvasを表示するかを決める方式があります。
Render Modeは『Screen Space – Overlay』、『Screen Space – Camera』、『World Space』の三つのモードがあります。
Screen Space – Overlay
![](https://mogi0506.com/wp-content/uploads/2019/05/スクリーンショット-0031-05-24-2.29.45.png)
『Screen Space – Overlay』はカメラに関係なしに直接画面に表示されるモードです。
試しにカメラオブジェクトを非表示にしてみてください。
![](https://mogi0506.com/wp-content/uploads/2019/05/スクリーンショット-0031-05-24-2.45.05.png)
『Screen Space – Overlay』モードでは直接画面にCanvasが表示されるので、カメラを非表示にしても子階層にあるImageオブジェクトが表示されていますね。
![](https://mogi0506.com/wp-content/uploads/2019/05/スクリーンショット-0031-05-24-2.44.07.png)
また、記事の前半でも書きましたが最初の段階ではCanvasは画面に直接表示されているので、UIを配置している場合は3Dオブジェクトが隠れてしまいます。
Image配置前 Image配置後
Screen Space – Camera
![](https://mogi0506.com/wp-content/uploads/2019/05/スクリーンショット-0031-05-24-2.29.54.png)
『Screen Space – Camera』はRender Modeに設定したカメラにCanvasが表示されるモードです。
Scene上でカメラを動かしてみるとCanvasがカメラにくっついているように見えます。
![](https://mogi0506.com/wp-content/uploads/2019/05/名称未設定.mov-5.gif)
カメラとCanvasの間にオブジェクトを配置すると、
![](https://mogi0506.com/wp-content/uploads/2019/05/スクリーンショット-0031-05-24-12.11.53.png)
Canvasに配置されたImageなどのUIよりも前にオブジェクトが表示されます。
![](https://mogi0506.com/wp-content/uploads/2019/05/スクリーンショット-0031-05-24-12.12.38.png)
また、カメラとCanvasの距離は、
![](https://mogi0506.com/wp-content/uploads/2019/05/スクリーンショット-0031-05-24-12.17.54.png)
『Plane Distans』の値で変更できます。
![](https://mogi0506.com/wp-content/uploads/2019/05/スクリーンショット-0031-05-24-12.14.28.png)
値を『0』にするとカメラとCanvasの距離がなくなるので、Canvasに配置されたUIが表示されなくなります。
World Space
![](https://mogi0506.com/wp-content/uploads/2019/05/スクリーンショット-0031-05-24-2.30.04.png)
『World Space』は他のオブジェクトと同じようにCanvasを扱うモードです。
なのでカメラを移動させることでCanvasの見え方が変わります。
実際にカメラを動かしてみましょう。
![](https://mogi0506.com/wp-content/uploads/2019/05/名称未設定.mov-6.gif)
Canvasが他のオブジェクトと同じように扱われていますね!
2.Canvas Scaler
![](https://mogi0506.com/wp-content/uploads/2019/05/スクリーンショット-0031-05-24-0.43.00-1.png)
Canvas Scalerは画面サイズが変わった時にUIを伸び縮みさせるコンポーネントのことです。
どのように伸び縮みさせるかは『UI Scale Mode』を設定します。
『UI Scale Mode』は『Constant Pixel Size』、『Scale With Screen Size』、『Constant Physical Size』の三つのモードがあります。
Constant Pixel Size
![](https://mogi0506.com/wp-content/uploads/2019/05/スクリーンショット-0031-05-24-17.25.49.png)
Constant Pixel Sizeは画面サイズに関係なしにPixel単位でUIを伸び縮みさせるモードです。
例えばUIのImageの大きさがWidth(横)100PixelでHeight(縦)100Pixelだった場合、
![](https://mogi0506.com/wp-content/uploads/2019/05/スクリーンショット-0031-05-24-17.34.40.png)
小さい画面サイズでも、
![](https://mogi0506.com/wp-content/uploads/2019/05/スクリーンショット-0031-05-24-17.39.30.png)
拡大した大きい画面サイズでも、
![](https://mogi0506.com/wp-content/uploads/2019/05/スクリーンショット-0031-05-24-17.40.56-1024x507.png)
同じように100×100Pixelで表示されます。
どのような画面サイズでも同じ大きさなので、UIは小さい画面サイズでは大きく見え、大きい画面サイズでは小さく見えてしまいますね。
Scale With Screen Size
![](https://mogi0506.com/wp-content/uploads/2019/05/スクリーンショット-0031-05-24-17.25.58.png)
Scale With Screen Sizeはどのような画面サイズでも同じようにUIが表示されるモードです。
小さい画面サイズでは、
![](https://mogi0506.com/wp-content/uploads/2019/05/スクリーンショット-0031-05-24-17.51.40.png)
拡大した大きい画面サイズでは、
![](https://mogi0506.com/wp-content/uploads/2019/05/スクリーンショット-0031-05-24-17.51.53-1024x506.png)
同じようにUIが表示されていますね!
Scale With Screen Sizeは複数の画面サイズに対応させたい場合に使えるモードです。
Constant Physical Size
![](https://mogi0506.com/wp-content/uploads/2019/05/スクリーンショット-0031-05-24-17.26.07.png)
Constant Physical Sizeは画面サイズに関係なしに複数の単位でUIを伸び縮みさせるモードです。
Constant Pixel Sizeと似ていますが、Constant Physical Sizeは『複数の単位』で伸び縮みさせられるのが違う点です。
適応できる単位はMillimeters(ミリ)、Centimeters(センチ)、Inches(インチ)、Points(ポイント)、Picas(パイカ)の五つあります。
単位は『Physical Unit』で変更することができます。
![](https://mogi0506.com/wp-content/uploads/2019/05/スクリーンショット-0031-05-24-18.07.12.png)
3.Graphic Raycaster
![](https://mogi0506.com/wp-content/uploads/2019/05/スクリーンショット-0031-05-24-0.43.00のコピー3.png)
Graphic RaycasterはUIを押したかどうか判断するためのコンポーネントです。
Graphic Raycasterがなければ、Canvasの子階層にあるButtonなどのUIは押したことを検知されることなく、押せなくなってしまいます。
まとめ
CanvasでできることやCanvasオブジェクトについているコンポーネントについてまとめてきました。
この記事を読んで少しでもCanvasについての理解が深まったのなら幸いです!