UnityのGUIでテキスト(文字)を表示させる方法【初心者向け】

UnityのGUIで【テキスト(文字)】を表示させる方法を初心者向けに解説した記事です。文字の入出力できるGUIは「TextField」と「TextArea」の2つがあるので、それぞれ順番に紹介していきます。

TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営する教育×テクノロジーのWebメディアです。初心者でもすぐ勉強できる記事が1,000以上あります。

UnityのGUIテキストを表示させる方法を初心者向けに解説した記事です。

Unityでは、様々な入出力を処理するGUIを簡単に作成できます。

 

今回は、文字の入出力を処理するためのGUIを紹介します。

文字を入力できるGUIはTextFieldとTextAreaの2つです。

 

なお、本記事はTechAcademyのUnity入門オンライン講座の内容をもとにしています。

 

20160620

 

田島メンター!!ユーザーがテキストを入力することができるようなGUIはありますか~?

 

20163020-2

 

テキスト入力のGUIは二種類存在するよ。一行だけ入力できる「TextField」と複数行のテキストが入力できる「TextArea」だね。

 

20160620

 

一行と複数行で別のものなんですね。

 

20163020-2

 

まずはTextFieldを作成して、実際に文字列が編集できるようにしてみよう。

 

TextField

TextFieldは、ユーザが1行の文字列を入力できるGUIです。

では早速、作成してみましょう。

 

スクリプトファイルのOnGUI関数内に、以下のコードを追加してください。

Javascriptの場合は以下のように記述します。

// Javascript
function OnGUI () {
// テキストフィールドを表示する
GUI.TextField(Rect(10, 10, 100, 100), “TextField”);
}

 

C#の場合は以下のように記述します。

//C#
public class TestTextField : MonoBehaviour {
void OnGUI () {
// テキストフィールドを表示する
GUI.TextField(new Rect(10, 10, 100, 100), “TextField”);
}
}

 

この状態でゲームを再生してみましょう。

001

「TextField」と書かれたテキストフィールドが表示されました。

 

TextField関数は第一引数(Rect構造体)にGUIの表示位置を指定します。

そして、第二引数(String)に表示する文字列を指定します。

 

ところで、このままではテキストフィールド内の文字列を編集することができません。なぜなら、第二引数に文字列を直接指定しているからです。

そこで、TextField関数の戻り値に、ユーザが入力した文字列が返されるので、それを利用しましょう。

 

以下のようにスクリプトを修正してください。

// Javascript
private var textToEdit : String = “TextField”;
function OnGUI () {
// テキストフィールドを表示する
textToEdit = GUI.TextField(Rect(10, 10, 100, 100), textToEdit);
}

 

//C#
public class TestTextField : MonoBehaviour {
public string textToEdit = “TextField”;
void OnGUI () {
// テキストフィールドを表示する
textToEdit = GUI.TextField(new Rect(10, 10, 100, 100), textToEdit);
}
}

 

改めてゲームを再生してみましょう。

003

これでテキストフィールド内の文字列が編集できるようになりました。

 

また、以下のように第三引数(int)を追加すると、入力文字数に上限を設定することができます。

// Javascript
private var textToEdit : String = “TextField”;
function OnGUI () {
// テキストフィールドを表示する
textToEdit = GUI.TextField(Rect(10, 10, 100, 100), textToEdit,5);
}

 

// C#
public class TestTextField : MonoBehaviour {
public string textToEdit = “TextField”;
void OnGUI () {
// テキストフィールドを表示する
textToEdit = GUI.TextField(new Rect(10, 10, 100, 100), textToEdit,5);
}
}

 TextFieldの追加方法は以上です。

 

20163020-2

 

TextFieldの基本的な実装方法だよ。

 

20160620

 

確かに一行だけしか入力できませんね。

 

20163020-2

 

次はTextAreaを作成して、同様に文字列の編集が可能な状態にしてみよう。

 

 

TextArea

TextAreaは、ユーザが複数行の文字列を入力できるGUIです。

引数や戻り値など、使い方はTextField関数と同じです。

 

以下のコードを追加してみましょう。

// Javascript
private var textToEdit : String = “TextArea”;
function OnGUI () {
// テキストエリアを表示する
textToEdit = GUI.TextArea(Rect(10, 10, 100, 100), textToEdit);
}

 

//C#
public class TestTextField : MonoBehaviour {
public string textToEdit = “TextArea”;
void OnGUI () {
// テキストエリアを表示する
textToEdit = GUI.TextArea(new Rect(10, 10, 100, 100), textToEdit);
}
}

 

先ほどを同じように、ゲームを再生してみます。

002

複数行を表示可能なテキストエリアが追加されました。

 

今回の記事は以上です。

 

20163020-2

 

TextAreaを実装したよ。文字列を編集するとどうなったかな?

 

20160620

 

あ!今度は複数行入力できました!

 

20163020-2

 

テキスト入力エリアの座標と幅・高さはそれぞれのコード内のRectで編集できるよ。使用する場面に合わせて編集しよう。

 

20160620

 

分かりました。ありがとうございます!

 

 

[お知らせ]TechAcademyではオリジナルゲームアプリが公開できるUnityオンラインブートキャンプを開催しています。現役Unityエンジニアのサポートで効率的に学びたい場合はご検討ください。