【Unity】テキストをオブジェクトの後ろに表示する方法(3D編)

説明のため、簡単にステージを作成しておきます。
なんでもいいのですが、ここでは以下のように壁と電柱っぽいオブジェクトを作成しました。

適当に作っていただけば大丈夫ですが、一応、各オブジェクトの設定も書いておきます。

Cube(壁)

Position x:0 y:0 z:0

Scale x:10 y:2 z:0

Cylinder(電柱)

Position x:1 y:1 z:-2

Scale x:1 y:2 z:1

Main Camera

Position x:5 y:1.5 z:-5

Rotation x:10 y:-40 z:0

Scale x:1 y:1 z:1

もし画面が暗い場合は、Directional Lightも追加しておいてください。

インストール

まずTextMeshProをプロジェクトにインストールします。
メニューバーから「Window」-「Package Manager」を選択してください。

「All」から「TextMeshPro」を選択し、「Install」ボタンを押してください。

ヒエラルキービューから「create」-「3D Object」-「TextMeshPro – Text」が選択できるようになっていればOKです。

テキスト表示

「create」-「3D Object」-「TextMeshPro – Text」を選択し、テキストを表示してください。
「TextMeshPro Resources Importer」が表示される場合は、「Import TMP Essencials」をクリックすればテキストが表示されるようになります。

TextMeshProの場合は、上図のように「Rect Transform」の「Pos Z」の値を変更してカメラからの距離を調整すると、テキストの表示順を変更できます。

TextMeshProを使わなかった理由

通常は上記の方法で問題ないと思いますが、今回は以下のように「input Fieldで入力された内容を表示順を調整して表示する」というのがやりたいことでした。

「TextMeshPro」で日本語を使う場合、フォントと使う文字をあらかじめ指定しておく必要があります。
表示されるテキストを自分でコントロールできるなら使う文字だけ指定しておけば問題ありません。しかし今回のように何が入力されるか分からない場合、文字を表示できない可能性があるので別の方法を考えました。

3D Textの表示

というわけで、3DTextを使ってみることにします。まずは普通に3DTextを表示してみます。
「create」-「3D Object」-「3D Text」を選択し、テキストを表示してください。

この状態で先ほどと同じようにzの位置を変えてみてください。以下のようにゲーム画面では常に最前面に表示されていることが確認できると思います。

表示順の変更方法

通常の方法では表示順を変更できなかったので、他の方法を考えます。
色々調べてみると、以下の記事が見つかりました。

• Unity、3Dテキストをオブジェクトの後ろに隠すには 2013.12.22
• 上記記事のリンク先(英語ですが、具体的な手順はこちらに書かれています)

使い方を見てみると、以下のように書かれています。

Place this shader somewhere in your Assets folder hierarchy. Then, replace the font material on the mesh renderer of the 3D text with a different material that uses this shader (and the appropriate font texture of course—this won’t work for the built-in font because the font texture for that is not available). Also make sure the 3DText object is using the same font that was used to generate the font texture.

要約すると、(上記リンク先に掲載されている)シェーダーを適用したマテリアルを作って、そのマテリアルを適用した3DTextだと後ろに表示できるよ、ということのようです。

試しに3DTextの「Mesh Renderer」-「Materials」を適当なマテリアル(ここではDefault-Difffuse)に変えてみると、フォントは潰れてしまいますが表示順は確かに変更できるようになっていることがわかります。

ちなみに「シェーダーを変えるとなぜ、表示順を変えることができるのか」ということについては、以下のリンク先が分かりやすいと思います。

• 【Unityシェーダ入門】Unityのシェーダで遊んでみよう 2016.9.12
• 【Unityシェーダ入門】透明なシェーダを作る 2016.10.05

実際の手順

シェーダーを変えれば対応できそうなことは分かったので、実際に修正していきます。
手順については上記のサイトにもかなり詳しく書かれていますので、簡単に書きます。

① シェーダーを作成する

「create」-「Shader」-「Standard Surface Shadar」を選択して新しいシェーダーを作成します。名前はなんでもいいですが、ここでは”3DText”という名前にしました。

② シェーダーの中身を修正する

作成したシェーダーをダブルクリックし、中身を以下の内容に修正してください。
(このスクリプトは先ほど紹介したリンク先に掲載されているものと同様です)

Shadar

Shader "Custom/3DText" { Properties { _MainTex ("Font Texture", 2D) = "white" {} _Color ("Text Color", Color) = (1,1,1,1) } SubShader { Tags { "Queue"="Transparent" "IgnoreProjector"="True" "RenderType"="Transparent" } Lighting Off Cull Off ZWrite Off Fog { Mode Off } Blend SrcAlpha OneMinusSrcAlpha Pass { Color [_Color] SetTexture [_MainTex] { combine primary, texture * primary } } } }

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

Shader "Custom/3DText" { Properties { _MainTex ("Font Texture", 2D) = "white" {} _Color ("Text Color", Color) = (1,1,1,1) } SubShader { Tags { "Queue"="Transparent" "IgnoreProjector"="True" "RenderType"="Transparent" } Lighting Off Cull Off ZWrite Off Fog { Mode Off } Blend SrcAlpha OneMinusSrcAlpha Pass { Color [_Color] SetTexture [_MainTex] { combine primary, texture * primary } } } }

③ マテリアルを作成する

作成したシェーダーを選択した状態で右クリックし「create」-「Material」を選択してください。
マテリアルの名前が”Custom_(作成したシェーダー名)”になっていればOKです。ここでは”3DText”という名前でシェーダーを作成していたので、”Custom_3DText”というマテリアルが作られました。

④ フォントをインポートする

なんでもいいので日本語フォントをインポートします。ちなみに最初に紹介したゲームでは以下のフォントを使っています。

源界明朝は限界ギリギリ読める源ノ明朝の派生フリーフォント

インポート方法はフォントファイル(上記のフォントだと”genkai-mincho.ttf”)をProjectビューにドラッグ＆ドロップするだけです。

⑤ 作成したマテリアルのテクスチャにフォントのテクスチャを設定する

先ほど作成したマテリアルのinspectorに”Font Texture”という項目があるはずなので、そこにインポートしたフォントのテクスチャを設定してください。
フォントのテクスチャは、フォントファイルの子要素として”Font Texture”という名前で入っていると思います。

⑥ 3DTextに反映する

最初に作成した3DTextにマテリアルを適用します。
3DTextのinspectorから「Mesh Renderer」-「Materials」-「Element0」に作成したマテリアル(Custom_3DText)を設定してください。
また、「Text Mesh」-「Font」にもインポートしたフォント(genkai-mincho)を設定しておきます。

以上で準備は完了です！
3D Textの位置を変えると、TextMeshProの時と同様に表示順が変わるようになっていると思います。

UITextを使っても実装はできたと思うので別の記事にしてまとめておきました。
こちらの方法については以下の記事をご覧ください。

【Unity】テキストをオブジェクトの後ろに表示する方法(2D編)