(:3[kanのメモ帳]

個人ゲーム開発者kan.kikuchiのメモ的技術ブログ。月木更新でUnity関連がメイン。

(:3[kanのメモ帳]


本ブログの運営者kan.kikuchiが個人で開発しているゲームです!


3Dモデルのメッシュ上にuGUIのImageやTextを表示する AnyUI(無料)【Unity】【uGUI】【アセット】


このエントリーをはてなブックマークに追加


この記事でのバージョン
Unity 2019.4.14f1
AnyUI - Map Your UI On Any 3D Surface 1.7


はじめに

今回は3Dモデルのメッシュ上にuGUIのImageやTextを表示するAnyUIという無料アセットの紹介です!

AnyUI - Map Your UI On Any 3D Surface | GUI Tools | Unity Asset Store


イメージとしては以下のように

uGUIのCanvas上に実装したUIをモデルのメッシュに沿って表示するという感じです。

f:id:kan_kikuchi:20210607063536g:plain


ちなみにGitHubでも公開されています。



なお、記事中では以下のアセットを使っています。

Dreamscape Nature: Meadows | 3D Fantasy | Unity Asset Store
Fantasy Skybox | 2D Sky | Unity Asset Store



AnyUI

さっそくAnyUIの使い方ですが、まず上部メニューの

Window/Any UI/Setup AnyUICanvasを選択し、


f:id:kan_kikuchi:20210606064611j:plain


ヒエラルキー上のUIを表示したい3Dモデルのオブジェクト(今回はテント)を

AnyUI Mesh to set upに設定した後、Okボタンを押します。

f:id:kan_kikuchi:20210607062043j:plain
f:id:kan_kikuchi:20210607062151p:plain


するとAnyUiCanvasFor~~~というCanvasが付いたオブジェクトが作成されます。

f:id:kan_kikuchi:20210607062252p:plain


同様に3DモデルのオブジェクトにもAny Ui MeshというコンポーネントとMaterialが一個追加され、

f:id:kan_kikuchi:20210607070506p:plain


Canvasの内容が3Dモデル上に表示されるようになります。

f:id:kan_kikuchi:20210607062407j:plain


Image以外のText等、uGUIで表示出来る物なら何でも表示出来ますし、

f:id:kan_kikuchi:20210607062429g:plain


リアルタイムで変更、移動する事も可能です。

ただしメッシュに沿って表示されるので、歪む可能性がある点には注意が必要です。

f:id:kan_kikuchi:20210607063536g:plain


ちなみにデフォルトだとUIもカメラに映ってしまうので、

UI部分は通常のカメラには映らないようにした方が使い勝手が良いかもしれません。


具体的にはAdd LayerでAnyUI用のレイヤーを作成し、

f:id:kan_kikuchi:20210607062926p:plain
f:id:kan_kikuchi:20210607062933p:plain


そのレイヤーをAnyUiCanvasFor~~~とその子に設定します

f:id:kan_kikuchi:20210607063050p:plain


同様にAnyUI_CanvasCamのCameraのCulling Masyのレイヤーも同じ物にした後、

f:id:kan_kikuchi:20210607063107p:plain


通常のカメラのCulling MaskからAnyUI用のレイヤーのチェックを外します。

f:id:kan_kikuchi:20210607063137p:plain


これでUI部分は表示されなくなります。(Sceneビューでの確認は可能)

f:id:kan_kikuchi:20210607063120j:plain