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

藍と淡々

Unityでゲーム制作日記


【Unity】uGUIよりも手前に3Dオブジェクトを配置したUIを作る

Unity uGUI

こんにちは(ી(΄◞ิ౪◟ิ‵)ʃ)
今開発中のゲームで、少し躓いたところがあったので、一応メモ(?)しておきます。

===================

この記事を書いた時のバージョン(Mac

・Unity 5.2.2f1 PersonalEdition

===================


自分はUIにuGUIを使用しているのですが、uGUIによりも手前に3Dオブジェクトを配置したい場所がありました。
しかし、どうしてもUIが手前に表示されてしまい、どうしたらよいかわからない。。

具体的にはこんな感じ。

↓この黒いUIの裏で回転しているキャラクターを、UIの前に表示させたい。
f:id:MegumiSoft:20160127231518g:plain:w250


そこで色々調べたところ、Canvasの設定を少し変えるだけでできました!( ✧Д✧) カッ!!


f:id:MegumiSoft:20160127232326p:plain:w350

①まず「Canvas」のRender Modeを「Screen Space - Camera」に設定。

Render Cameraに使用しているカメラをセット。

Plane Distanceをちょうどよい具合に調整。

だけです!簡単ですね!!


①で「Screen Space - Camera」に設定すると、今まで2Dとして表示されていたUIが、まるで3Dオブジェクトのように配置されるようになります。

↓今までのUI配置(Screen Space - Overlay)

f:id:MegumiSoft:20160127233406p:plain:w350

↓それがこんな配置に。(Screen Space - Camera)

f:id:MegumiSoft:20160127233729p:plain:w350


③がちょっとイメージしにくいのですが、「UIをカメラからどのくらい離れた場所に配置するか」、です。

↓実際にPlane Distanceの値を上げたり下げたりしているところ。

f:id:MegumiSoft:20160127233904g:plain:w350


これでもう分かったかと思います!
Plane Distanceで距離感を調整して、UIの前に表示させたいオブジェクトをUIとカメラの間に設置してあげればいいだけです!


結果、やりたいことがうまくできました‹‹\(´ω` )/›› ‹‹\(  ´)/›› ‹‹\( ´ω`)/››

f:id:MegumiSoft:20160127234320g:plain:w250


ちなみにCanvasのRender Modeの「Screen Space - Overlay」は常にUIを手前に表示、「World Space」はまさにUIをオブジェクトとして扱う設定になります。

ここら辺は少しいじってみるだけで感覚的に理解できると思いますので、もし凝ったUIを作ってみたいという方、ぜひ試してみてください!٩(•౪• ٩)


(参考にしたもの)

今回紹介した知識はこの本の144pに書かれてました。
大変良書なので、もしuGUIを使用しているのであれば、とても勉強になるかと思いますよ!