【Unity開発】uGUIのCanvasの使い方【ひよこエッセンス】

Unity5.0.0f4 Personal(2015年5月)

 

 

ひよこエッセンスの時間です〜

今回はuGUIの中でもその基礎となるCanvasについて解説していきます〜

その名前の通りGUIの支持体となるオブジェクトで、Canvasの上に全てのGUIは作成されます〜

 uGUIのCanvasまとめ

①Canvasを配置してみる

 まずはCanvasを配置してみましょう〜HierarchyビューからCreate>UI>Canvasを選択します〜

 

Canvas作成

 

作成したCanvasの子オブジェクトとして様々なGUIを作成することで、ゲーム画面にGUIを表示させることができます〜

といっても、Canvasを単体で作ることはほとんどありません〜先ほど作成したCanvasと、一緒にできたEvent Systemを一旦削除し、HierarchyビューからCreate>UI>Textを選択して下さい〜

 

Canvas・Text・EventSystemが作成される

 

このようにTextやButton等のGUIを作成すると、自動的に一緒にCanvasも作成されます〜

 

Canvasの中に作成するGUIについては、各エッセンスをご参照下さい〜

 

 

また、各GUIの大きさや位置を決定するRectTransformに関するエッセンスもありますので、よかったら見ていって下さい〜

 

 

②Canvasの各パラメーター解説

それではCanvasオブジェクトをクリックした時に見える各パラメーターの解説をしていきます〜分量が多いので今回はCanvasコンポーネントについてのみ解説し、Canvas Scalerについては別エッセンスを用意したいと思います〜

 

CanvasオブジェクトのCanvasコンポーネント

 

Render Modeは、GUIをどのように描画するかを決めます〜３つのモードから選択します〜

 

３つのモードがある

 

Screen Space - Overlayは、ゲームで使われる他のオブジェクトの描画が終わったあとにGUIが描画されます〜つまりGUIが絶対に最前面にくるというわけです〜下の画像ではCubeオブジェクトの前にTextGUIがきています〜

 

必ず最前面にくる

 

上の画像ですが、少しTextがぼやけて見えます〜もっとクッキリと表示したいという場合は、Pixel Perfectをtrueにすると解決します！

 

Pixel Perfect = trueでクッキリ表示

 

最後にSort Orderですが、これはScreen Space -Overlay設定であるCanvas間の描画順を決めるための値です〜大きいほうが前面に表示されます〜

そうです、実はCanvasはいくつでも作ってもいいですし、それが同じRender Modeだとしても全く構わないのです〜

 

試しにCanvasをふたつ作り、

 

 

それぞれ以下の設定にし、

 

Canvas1　Screen Space - Overlay　Sort Order: 1

 

Canvas2　Screen Space - Overlay　Sort Order: 0

 

Gameビューを見てみると・・・

 

 

Sort Orderを1にしたほうが上に描画されます〜

 

Screen Space - Cameraは、特定のカメラにGUIを表示させます〜

 

Screen Space - Camera

 

Render Cameraにカメラを指定すると、そのカメラにのみGUIが表示されます〜

試しにひとつCameraを作成してみましょう〜HierarchyからCreate>Cameraを選択し、名前をGUICameraにして下さい〜

 

GUICamera作成

 

Viewport RectのWとHを0.5に変更

 

画面左下にGUICameraの映像が表示される

 

この状態でCanvas1オブジェクトのRender ModeをScreen Space - Camera、Render CameraをGUICameraに設定して下さい〜

 

 

すると、Canvas1のTextのみGUICameraに表示されるようになります〜

 

Canvas1のみGUICameraに表示される

 

Plane Distanceは、カメラとGUIとの距離を設定します〜Plane Distanceを設定した結果カメラとGUIのとの間にオブジェクトが入り込むと、GUIはオブジェクトの後ろで表示されます〜

例えばCubeのposition.zを0、GUICameraのposition.zを-10に設定します〜すると、カメラとCubeとの距離は10となります〜そこでPlane Distanceを11に設定すると、Cubeと重なったGUIは後ろに表示されます〜

 

Plane Distance: 11だとGUIが奥

 

今度はPlane Distanceを9にします〜すると、GUIが前面に表示されます〜

 

Plane Distance: 9だとGUIが前面

 

Sorting Layerは、Render ModeがScreen Space -Camera同士のGUIの描画順を決定します〜Sorting Layerの順番的に下にあるほうが前面に表示されます〜

Orde In Layerは更にSorting Layerが同じ時に時に、設定します〜数が大きいほうが前面に表示されます〜

 

Canvas2のほうが下なので、

 

Canvas2が前面に表示される

 

ちなみにRender Cameraに何も指定しなければ、Screen Point - Overlayと同じ扱いになります〜

 

World Spaceは、Cube等のオブジェクトと全く同じ座標でGUIを配置します〜positionをいじることで、他のオブジェクトの後ろに表示したりできます〜

これはもうGUIというよりは、オブジェクトになったと考えても大丈夫です〜

 

オブジェクトの後ろへ持っていけば、

 

他のオブジェクトと同様オブジェクトの後ろへ隠れる

 

Event Cameraは、GUIのイベントを受信するカメラを設定しています〜例えば、ボタンの上にマウスを持ってきたりクリックした時に色が変わる、などもイベントになります〜

 

再びGUICameraに登場してもらいましょう〜

 

左下がGUICamera

 

そして次にCanvasのRender ModeをWorld SpaceにEvent CameraにGUICameraを設定し、子オブジェクトとしてButtonをひとつ作ります〜

 

Canvasの下にButton１つ

 

Render Mode: World Space　Event Camera: GUICamera

 

その状態でボタンを画面右上に配置して、両方のカメラに写るようにして下さい〜

 

こんな感じ

 

それではゲームを実行して下さい〜ボタンのイベントを受け付けるのはEvent Cameraに設定したGUICameraに移ったボタンのみとなっております〜

 

GUICameraのほうしかイベントを受け付けない

 

長々と書いてきましたが、基本的にはScreen Space - Overlayを使っておけば間違いないかと思います〜

画面サイズや縦横比を設定するCanvas Scalerについては別途エッセンスを用意させて頂きます〜

 

以上、ひよこエッセンスでした〜

ありがとうございました〜