おもちゃラボ

Unityの3D Textは、uGUIと違い空間上に配置できるテキストになります。ただ、この3D Text、他のオブジェクトの裏面に回っても最前面に表示されてしまいます。

f:id:nn_hokuson:20210909210615g:plain
そこで、3D Textの前後関係を正しく表示する方法を紹介したいと思います。

流れは次の通りです。

シェーダでデプスをみて描画する
マテリアルを作成する
3D Textにマテリアルをアタッチ

シェーダでデプスをみて描画する

3D Textが別オブジェクトの裏面に回った時に前後関係を正しく表示するため、ちゃんと
デプスチェックをするシェーダを作成します。プロジェクトウィンドウで右クリック→Create→Standard Surface Shaderを選択して、Font3D.shaderという名前で保存して下さい。

次にFont3Dシェーダに次のプログラムを入力して下さい。

Shader "Custom/Font3D"
{
   	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 On Fog { Mode Off }
		Blend SrcAlpha OneMinusSrcAlpha
		Pass {
			Color [_Color]
			SetTexture [_MainTex] {
				combine primary, texture * primary
			}
		}
	}
}

このプログラムではZWrite Onとすることで、カメラからみたときの3D Textのデプスを考慮して描画を行います。これにより前後関係の正しい描画ができるようになります。

また、Cull offとして3D Textを裏面から見たときにも描画されるようにしてます。ここは状況に応じてオンオフして下さい。

マテリアルを作成する

次に、いま作ったFont3Dシェーダを選択した状態で右クリックして、Create→Materialを選択します。これによりFont3Dシェーダがセットされたマテリアルが作成されます。

f:id:nn_hokuson:20210909204749p:plain:w220

作成したマテリアルにフォントテクスチャをセットします。使用したいフォントの「▶」をクリックして展開し、その中にあるFont Textureを作成したマテリアルのFont Textureの欄にドラッグ＆ドロップしてください。

f:id:nn_hokuson:20210909212502p:plain:w500

3D Textにマテリアルをアタッチ

最後に、作成したマテリアルを3D Textのオブジェクトにドラッグ＆ドロップしてアタッチします。

f:id:nn_hokuson:20210909212730p:plain:w450

フォントの色を変えたい場合はマテリアルのカラーから変更できます。カメラを動かしてみて3D Textの前後関係が正しく表示されるか試してみてください！
f:id:nn_hokuson:20210909211022g:plain

nn-hokuson.hatenablog.com
こちらも合わせてどうぞ

おもちゃラボ

Unityで遊びを作ってます

Unityで使えるTips100選

チュートリアル編

入門編

中級編

上級編

アニメーション編

ハードウエア編

iOS/Android編

アセット編

グラフィックス編

エラー対処編

AR編

【Unity】3D Textの前後関係を正しく表示する

シェーダでデプスをみて描画する

マテリアルを作成する

3D Textにマテリアルをアタッチ

はてなブログのソースコードの見た目（スマホ）を調節する

スマホでのソースコードの調節方法