【Unity入門】Canvasを使ってUIを配置する
この記事の目次
Canvasとは
CanvasとはUIを配置できる場所です。
CanvasはCanvasコンポーネントが追加されたゲームオブジェクトで、UIはCanvasの子階層に配置されます。
実際に使ってみる
準備
それでは、実際にCanvasを使ってみましょう。
まずは、以前作成した、『Unity Basics』というプロジェクトを開いてください。
『Unity Basics』を開いたら、Canvasを作るシーンを作りましょう。
Scenesフォルダの中に作成します。
ProjectウィンドウでScenesフォルダを選択しましょう。
選択した状態で『＋』ボタンを押しましょう。
色々と出てくるので、『Scene』をクリックしましょう。
すると、Scenesフォルダの中に新しくSceneが作成されます。
Sceneの名前を『Canvas』に変更しておきましょう。
今回は『Canvas』の中でやっていきたいので、Sceneを移動します。
『Canvas』をダブルクリックしましょう。
すると、Sceceを移動することができます。
Hierarchyウィンドウを見ると、現在のSceneが『Canvas』に変わっていますね。
Canvasを使ってみる
それでは、実際にCanvasを使ってみましょう。
今回は、適当な画像を配置して、その画像と3Dオブジェクトが重なったらどうなるのか確認してみようと思います。
まずはCanvasを作りましょう。
Hierarchyウィンドウで『+』ボタンを押しましょう。
色々と出てくるので、UI > Canvasと押していきます。
すると、Canvasというオブジェクトが作られます。
Canvasを作ると、EventSystemというオブジェクトも同時に作られます。
このオブジェクトは、ボタンを押すなどのイベント処理をするためのオブジェクトです。
Canvasを作ったら、適当な画像を配置してみましょう。
HierarchyウィンドウでCanvasを選択してください。
選択した状態で『+』ボタンを押しましょう。
色々と出てくるので、UI > Imageと押していきます。
すると、Canvasに白色の画像が作られます。
端にあると見えにくいので、適当に位置を調整しておきましょう。
画像を作ったら、3Dオブジェクトと重なったらどのような表示になるのか確認してみましょう。
3Dオブジェクトを作ります。
Hierarchyウィンドウで何も選択されていない状態で、
『+』ボタンを押しましょう。
色々と出てくるので、Sphereを押します。
すると、3Dの球のオブジェクトが出来上がります。
位置を変更して、画像と重なるようにしておきましょう。
SceneビューでSphereに焦点を当てたいので、HierarchyウィンドウでSphereをダブルクリックします。
すると、SceneビューでSphereに焦点が当たります。
この状態で位置を変更しましょう。
Gameビューで画像とSphereが重なるようにします。
重なるようにすると、Canvasに配置した画像の方が前になっていますね。
CanvasのRender Modeが
Screen Space -Overlayになっているからです。
Render ModeをScreen Space -Overlayにすると、UIが一番前に表示されます。
このように、Canvasを使えばUIを配置することができます。