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

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

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

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

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

 

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

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

 

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

 

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の追加方法は以上です。

 

 

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

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

 

今回の記事は以上です。

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