Unity5(C#)初心者・入門者向けチュートリアル ひよこのたまご

AndroidやiOS向けアプリを簡単に作れるゲーム開発環境Unity(ユニティ)の使い方を、チュートリアル方式で一緒に学びましょう!

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

いつもひよこのたまごをご利用下さいましてありがとうございます!
おかげ様でチュートリアル数も10ゲーム目となりました!
チュートリアル一覧は
こちら からどうぞ!


スポンサーリンク

Unity5.0.0f4 Personal(2015年5月)

 

f:id:hiyotama:20150504205926p:plain

 

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

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

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

 uGUIのCanvasまとめ

①Canvasを配置してみる

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

 

f:id:hiyotama:20150526164632p:plain

Canvas作成

 

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

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

 

f:id:hiyotama:20150526164953p:plain

Canvas・Text・EventSystemが作成される

 

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

 

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

 

 

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

 

 

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

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

 

f:id:hiyotama:20150526165712p:plain

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

 

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

 

f:id:hiyotama:20150526170151p:plain

3つのモードがある

 

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

 

f:id:hiyotama:20150526171502p:plain

必ず最前面にくる

 

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

 

f:id:hiyotama:20150526171719p:plain

Pixel Perfect = trueでクッキリ表示

 

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

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

 

試しにCanvasをふたつ作り、

 

f:id:hiyotama:20150526172423p:plain

 

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

 

f:id:hiyotama:20150526172541p:plain

Canvas1 Screen Space - Overlay Sort Order: 1

 

f:id:hiyotama:20150526172612p:plain

Canvas2 Screen Space - Overlay Sort Order: 0

 

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

 

f:id:hiyotama:20150526172813p:plain

 

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

 

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

 

f:id:hiyotama:20150526173806p:plain

Screen Space - Camera

 

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

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

 

f:id:hiyotama:20150526180811p:plain

GUICamera作成

 

f:id:hiyotama:20150526180849p:plain

Viewport RectのWとHを0.5に変更

 

f:id:hiyotama:20150526181114p:plain

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

 

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

 

f:id:hiyotama:20150526181330p:plain

 

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

 

f:id:hiyotama:20150526181427p:plain

Canvas1のみGUICameraに表示される

 

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

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

 

f:id:hiyotama:20150526181953p:plain

Plane Distance: 11だとGUIが奥

 

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

 

f:id:hiyotama:20150526182031p:plain

Plane Distance: 9だとGUIが前面

 

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

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

 

f:id:hiyotama:20150526182812p:plain

Canvas2のほうが下なので、

 

f:id:hiyotama:20150526182845p:plain

Canvas2が前面に表示される

 

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

 

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

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

 

f:id:hiyotama:20150526184753p:plain

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

 

f:id:hiyotama:20150526184822p:plain

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

 

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

 

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

 

f:id:hiyotama:20150526185133p:plain

左下がGUICamera

 

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

 

f:id:hiyotama:20150526185259p:plain

Canvasの下にButton1つ

 

f:id:hiyotama:20150526185426p:plain

Render Mode: World Space Event Camera: GUICamera

 

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

 

f:id:hiyotama:20150526185601p:plain

こんな感じ

 

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

 

f:id:hiyotama:20150526185750p:plain

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

 

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

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

 

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

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