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

2018.06.16 自習室 0

ここでは下の動画のように、テキストをオブジェクトとオブジェクトの間(壁と電柱の間)に表示する方法について説明します。

TextMeshProで3Dオブジェクトとしてテキストを作成すれば、通常のGameObjectと同様の扱いで表示位置の調整ができるのですが、後述する理由でそれができなくて困ったので記事にして残しておきます。
TextMeshProを使った場合の表示方法も合わせて書いてますので、通常はそちらの方法を使ってください。

なお、Unityでの表示順変更についてはこちらに記事をまとめていますので、合わせてみていただくと分かりやすいと思います。

Unityでオブジェクトの描画順を変更する方法

また、この記事はUnity1weekという1週間ゲームジャムで作ったゲームを元にしています。実際の見え方を知りたい場合は以下のリンクからプレイできますので、試してみてください。

ゲームはこちらからプレイできます

環境

  • Unity 2018.1.2f1

このページの構成

ポイント
事前準備
TextMeshProを使う場合
3D Textを使う場合
参考:UITextを使う方法

ポイント

TextMeshProでテキストを表示する場合は、単純にカメラからの距離を表示したい順に並べればOK
3D Textの場合は基本的に最前面に表示されるため、シェーダーで描画順を書き換えて対応する
TextMeshProを使わなかったのは、「プレイヤーが入力したテキストを、壁に書かれたように表示する」ということをしたかったから
TextMeshProの場合、使用可能な文字をあらかじめ指定しておかないといけないので、入力された文字を表示できない可能性があった

事前準備

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

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

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を使う場合

インストール

まず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」の値を変更してカメラからの距離を調整すると、テキストの表示順を変更できます。

3DTextを使う場合

TextMeshProを使わなかった理由

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

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

3D Textの表示

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

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

表示順の変更方法

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

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

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)に変えてみると、フォントは潰れてしまいますが表示順は確かに変更できるようになっていることがわかります。

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

実際の手順

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

① シェーダーを作成する

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

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

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

③ マテリアルを作成する

作成したシェーダーを選択した状態で右クリックし「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を使う方法

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

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

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です