テキストの表示

 

ボタンの文字やラベルなどテキストを表示するコンポーネントについて説明します

Textエレメント

Textエレメントは任意の文字列を画面に表示するためのUIエレメントです。 メニューからGameObject→UI→Textを選択するとCanvasの下にTextエレメントを作成することができます。TextエレメントにはTextコンポーネントが取り付けれらています。Textコンポーネントのプロパティで表示する文字列や文字の大きさ、フォントの種類、色などを変更することができます。

テキストエレメント
テキストコンポーネント
Textエレメントの作成

Textコンポーネントのプロパティ

Textコンポーネントの各プロパティの説明をします。

Textプロパティに表示する文字列を設定
Textコンポーネント

Textプロパティ

Textエレメントに表示したい文字列は Textプロパティに設定します。設定された文字列は基本的にはTextエレメントの表示領域の内側に表示されます。Textエレメントに文字列を表示するための十分なサイズがないと文字が表示されません。表示する文字列がTextエレメントの右端に達すると文字列が折り返しが行われます。この折り返しの場所は文字列内の空白文字の場所で優先して行われます。Enterキーを使って任意の場所で折り返しすることもできますし空行も作ることもできます。

Textプロパティに表示する文字列を設定
Textプロパティに文字列を設定
Textプロパティに表示する文字列を設定
Textプロパティ設定された文字列が表示されます

なお、表示する文字列がTextエレメントの領域からはみ出た時の挙動の設定は後ほど説明するHorizontal OverflowおよびVertical Overflowプロパティで設定します。

Fontプロパティ

Fontプロパティには表示する文字に使用するフォントを指定することができます。初期値のままだと使用しているプラットフォームのシステムフォントが使用されるので、プラットフォームごとに文字の見た目が異なる場合があります。Fontプロパティに設定するフォントはアセットとしてインポートしておく必要があります。

Fontプロパティにフォントを設定
Fontプロパティにフォントを設定
Fontプロパティにフォントを設定

Font Sizeプロパティ

Font Sizeプロパティは表示する文字の大きさを設定します。 ダイナミックフォントの文字を大きくしたい場合はRect TransformのスケールではなくFont Sizeプロパティで設定したほうが綺麗に描画されます。

フォントサイズを設定
フォントサイズを設定

フォントサイズを設定
フォントサイズを32にした例
フォントサイズを設定
フォントサイズを14にした例

Font Styleプロパティ

ダイナミックフォントを使用してる場合、文字のスタイルを Font Styleプロパティで指定することができます。Bold(太文字)Italic(斜め文字)などが選べます。

Font Styleの設定
Font Styleの設定

Font Style - Normal
Font Style - Normal
Font Style - Bold(太文字)
Font Style - Bold(太文字)

Font Style - Italic
Font Style - Italic(斜体)
Font Style - Bold Italic
Font Style - Bold Italic(太文字の斜体)

Line Spacingプロパティ

Line Spacingプロパティは行間の幅を調整することができます。小数点以下も使えるので微調整もできます。

行間の調整
Line Spacingで行間を調整
Line Spacingで行間を広げた
Line Spacingを2に設定

Rich Textプロパティ

Rich Textプロパティは文字列中にタグの機能を有効にするか無効にするかを指定できます。Rich Textにチェックを入れた場合以下のタグが使用できます。

タグ 効果
<b> 太文字
<i> イタリック
<size=文字サイズ> 文字の大きさ
<color=色>

たとえば以下の文字列をTextプロパティに設定すると

文字の<size=64>大きさ</size>を変えたり<color=blue>色</color>を変えたりできます。また<b>太文字</b>や<i>イタリック</i>などスタイルを変更できます。

次のように表示されます。

Rich Textの使用例
Rich Textの使用例

Alignmentプロパティ

表示する文字列を上下左右中央のどこに寄せるか指定できます。

Horizontal Overflowプロパティ

Horizontal Overflowプロパティは表示する文字列がTextエレメントの横幅に収まらなかったときに折り返しを行うか行わないかを選択できます。

Warp
折り返す
Overflow
折り返さずTextエレメントの横幅からはみ出して表示させる

Horizontal Overflow プロパティ
Horizontal Overflow プロパティ

Horizontal Overflow - Warpのときはテキストは折り返されて表示される
Horizontal Overflow - Warpのときはテキストは折り返されて表示される

Horizontal Overflow - OverflowのときはテキストはTextエレメントから横方向にはみ出して表示される
Horizontal Overflow - OverflowのときはテキストはTextエレメントから横方向にはみ出して表示される

Vertical Overflowプロパティ

Vertical Overflowプロパティは表示する文字列がTextエレメントの縦幅に収まらなかった場合にはみ出した行を非表示にするかしないかを指定できます。

Truncate
縦幅からはみ出した行を削除(非表示)にする
Overflow
縦幅からはみ出しても表示する


Vertical Overflow プロパティ
Vertical Overflow プロパティ

Vertical Overflow - truncateのときははみ出した行は削除される
Vertical Overflow - truncateの時、はみ出した行は削除される

Vertical Overflow - Overflowのときはテキストエレメントから縦方向にはみ出して表示される
Vertical Overflow - Overflowの時、テキストエレメントから縦方向にはみ出して表示される

Best Fitプロパティ

Best FitプロパティにチェックをいれるとTextエレメントの領域内に文字列が収まるように文字の大きさを自動的に調整してくれます。Font Sizeプロパティの設定は無効になり、Min Size,Max Sizeプロパティが使われます。基本的にはMax Sizeで文字描画が行われTextエレメントの縦幅に文字列が収まらず行が削除(truncate)されてしまう行がある場合に縦幅に収まるように文字を徐々にMin Sizeまで小さくしていきます。それでも入りきらない場合はあきらめて行が削除(truncate)されます。なお、Vertical OverflowプロパティをOverflowに設定した場合は行がtruncateされることはないのでBest Fitで文字サイズの縮小が行われることはありません。

Best Fit
Best Fitプロパティ

Best Fit
Best Fit
Best Fitを使用して大きさを変更したときの例

Colorプロパティ

Colorプロパティは文字の色を設定できます。

Materialプロパティ

文字を描画するときのマテリアルを設定できます。文字を独自のシェーダーを使用して描画したいときはそのシェーダを設定したマテリアルを作成してTextコンポーネントのMaterialプロパティに設定します。 シェーダー作成についての説明は省略しますが Unity Download ArchiveからBuilt in ShaderをダウンロードしDefaultResourcesExtra/UIにあるUI-Unlit-Text.shaderを改造するとよいでしょう。

Materialプロパティを変更した例
Materialプロパティを変更した例

スクリプト

ゲームのスコアやプレイヤー名などTextエレメントが表示しているテキストの内容をスクリプトで変更するときはTextコンポーネントのtextプロパティを変更します。たとえば起動時にテキストエレメントの文字列を「こんにちは」に変更したいときは以下のようなスクリプトになります。そのほか多くのTextコンポーネントのプロパティがスクリプトから操作できます。



using UnityEngine;
using System.Collections;
using UnityEngine.UI;


public class TextTest : MonoBehaviour {
	public Text myText;  // 文字列を変更するテキストエレメントをInspectorで設定しおいてください

	// Use this for initialization
	void Start () {
		myText.text = "こんにちは";
	}
}

広告