読者です 読者をやめる 読者になる 読者になる

テラシュールブログ

旧テラシュールウェアブログUnity記事。主にUnityのTipsやAR・VR、ニコニコ動画についてのメモを残します。

【Unity】uGUIのWorld Spaceを楽に配置したい

3D GUI(uGUI/NGUI/旧UI) Unity

f:id:tsubaki_t1:20161023184328j:plain

uGUIのWorld Spaceを楽に配置したい場合によく使ってるTipsです。

 

World SpaceのUI

CanvasはScreenSpace-Overlay(常に画面最前面)やScreenSpace-Camera(指定のカメラに映るように配置)の他に、World Space(World空間に配置)があります。

f:id:tsubaki_t1:20161023184320j:plain

よく一般で言われているような、画面にボタンがあるUIを作りたい場合はScreenSpace-OverlayやScreenSpace-Cameraのような使い分けになると思いますが、ソレ以外のケース、例えばVRのように画面前方にUIが張り付くのが望ましくない場合、World Spaceが活躍します。

tsubakit1.hateblo.jp

また、uGUIは複雑な形状を描画しても動かしさえしなければ非常に低コストで描画出来るので、3Dシーン内のポスターや掲示板にも使い勝手が良いかもしれません。
(World SpaceでUIを作る場合、たいてい要素や階層が深くないので、動かすのもソコまで気にしなくても良いかもしれません)

 

Word SpaceとUI解像度

World SpaceでUIを配置する際、まず気になるのは解像度です。この解像度は、RectTransformのWidthとHeightと一致します。

f:id:tsubaki_t1:20161023185314j:plain

 

ここで少し悩ましいのが、Scaleが1だとUI1ピクセルに1mの大きさがあるという点です。とりあえずUIをWorld Spaceに切り替えると、解像度を事前に決めつつ、UIのサイズを調整する必要があり、少し煩わしいです。

f:id:tsubaki_t1:20161023185718j:plain

 

個人的によくやっている方法

という事で、個人的によくやっている手法です。

 

まず最初に、該当のUIを見るであろう位置にカメラを移動します。SceneViewのカメラを動かした後、カメラを選択しつつCtrl+Shift+Fで移動してくれます。

f:id:tsubaki_t1:20161023191648j:plain

 

次にCanvasをScreenSpace-Cameraに設定し、ScreenSpace-CameraのRenderCameraに1で動かしたカメラを設定します。CanvasのDistanceはUIをカメラが見る距離を元に、適当に設定します(どうせ後で修正するので適当で)

Canvas Scalerは、Scale with screen sizeを指定し、UIの想定解像度を設定しておきます。

f:id:tsubaki_t1:20161023190403j:plain

f:id:tsubaki_t1:20161023190658j:plain

 

後はCanvasのRenderModeをWorld Spaceに設定して、UI用のCameraを削除(もしくはEditorOnlyタグを付けておく)すると、ScreenSpace-Cameraで配置した位置にWorld SpaceなCanvasが配置されます。
また、Canvasの解像度はCanvas Scalerで設定したサイズと概ね一致します(小数点誤差はあります)

f:id:tsubaki_t1:20161023191015j:plain

関連

tsubakit1.hateblo.jp

tsubakit1.hateblo.jp

tsubakit1.hateblo.jp