おもちゃラボ

Unityで遊びを作ってます

ワールド空間に文字を表示する

プレイヤの頭の上にポップアップで文字を表示したいことが時々あります。今回はその方法を紹介します。

f:id:nn_hokuson:20161220202056p:plain

今回の目次は次の通りです。

3D空間上に文字を表示する

ワールド空間に文字を表示するにはTextMeshを使います。ヒエラルキービューから「Create」 →「Create Empty」を選択します。

f:id:nn_hokuson:20161220193407p:plain

作成した「GameObject」を選択した上で、インスペクタから「Add Component」→「Mesh」 →「Text Mesh」を選択します。

f:id:nn_hokuson:20161220193630p:plain

インスペクタからTextの欄に文字を打ってみてください。このままだとぼやけた画像になってしまいます。

f:id:nn_hokuson:20161220193921p:plain

この対策として、フォントサイズを大きくして、キャラクタサイズを小さくします。ここでは「Character Size」を0.2、「Font Size」を100に設定しました。綺麗に表示されましたね。

f:id:nn_hokuson:20161220194207p:plain

だんだん文字を透明にする

文字を透明にするにはText Meshのcolorプロパティを変更します。Animatorを使っても良いですが、これくらいならスクリプトから操作するほうが楽かもしれません。

プロジェクトビューで右クリックして「Create」→「C# Script」を作成し、ファイル名を「TextController」にリネームします。次のスクリプトを入力してください。

using UnityEngine;
using System.Collections;

public class TextController : MonoBehaviour 
{
	IEnumerator Fadeout()
	{
		for (float i = 0; i <= 20; i++)
		{
			GetComponent<TextMesh> ().color = new Color (1, 1, 1, 1.0f-i/20.0f);
			yield return null;
		}
	}

	void Update () {
		if (Input.GetMouseButtonDown (0))
		{
			StartCoroutine (Fadeout ());
		}
	}
}

このスクリプトでは、クリックされたことを検知して、FadeOutコルーチンを作成しています。コルーチンの中ではTextMeshコンポーネントのcolorのアルファ値を徐々に下げて透明にしています。

先ほどのGameObjectにプロジェクトビューのTextControllerをドラッグ&ドロップしてアタッチします。

f:id:nn_hokuson:20161220194500p:plain

アタッチできたら、実行してみましょう。クリックするとテキストが徐々に透明になります。無駄にユニティちゃんを配置してカッコよくしてみました(笑)

f:id:nn_hokuson:20161220200427g:plain

どこからみてもカメラの方向を向くようにする

プレイヤやカメラが移動しても、頭上の文字が常に正しく読めるようにしましょう。
常に文字が読めるようにするためには、TextMeshが常にカメラの方向を向くようにします。

先ほど作ったTextControllerを次のように修正してみましょう。

using UnityEngine;
using System.Collections;

public class TextController : MonoBehaviour 
{
	void Start () {
		transform.localScale = new Vector3 (-1, 1, 1);
	}

	void Update () {
		transform.LookAt (Camera.main.transform);
	}
}

実行結果は次のようになります。カメラがプレイヤの周りを回っていますが、テキストは常にカメラの方向を向いているので、どこからでも文字が読めることがわかります。

f:id:nn_hokuson:20161220201308g:plain

私の書いたUnity5の教科書もよろしくお願いします^^/