【Unity】TMP_InputFieldの使い方を徹底解説

この記事について
この記事で学べること
TMP_InputFieldとは？
UnityのInputFieldの導入
1. InputFieldの導入方法
Placeholderで未入力時のヒントを表示
1. InspectorでPlaceholderの文字を設定
スクリプトで入力値（テキスト）を取得・設定
パスワード入力や制限の設定
よくあるエラーと対策
まとめ

この記事について

この記事は私がゲーム制作・学習等で学んだ知識を元にInputField（TMP_InputField）の使い方をわかりやすく説明していきます。

この記事で学べること

UnityのInputField（TMP_InputField）の基本的な使い方
スクリプトからテキスト・プレースホルダーを取得・設定する方法
パスワード入力や数値入力の制限方法
よくあるエラーと解決策

TMP_InputFieldとは？

TMP_InputField は TextMeshProの入力欄コンポーネント です。
従来の InputField の代わりに使われるもので、TextMeshProUGUI をベースに作られています。

特徴

高品質なテキスト描画
InputField は UI.Text を使いますが、TMP_InputField は TextMeshProUGUI を使うので文字がきれい。
リッチテキスト対応
太字・色変えなど、より高度なフォーマットを扱える。
多言語対応が強力
日本語や中国語などのCJK文字もフォントアセットを設定すれば安定表示。
豊富なプレースホルダーやスタイル設定
Placeholderのデザインやカーソルの点滅速度、選択範囲の色などを細かく設定可能。

UnityのInputFieldの導入

InputFieldの導入方法

① Hierarchy から追加

[Hierarchy]→[右クリック]→ [UI] → [InputField – TextMeshPro] を選択

② InputFieldの構成要素

InputField(TMP) → 入力を管理するコンポーネント
TextMeshPro(TMP) → ユーザーが入力したテキストを表示
Placeholder（プレースホルダー） → 未入力時に表示されるテキスト
Image（枠） → 入力欄の背景デザイン

※ TextMeshProUGUIは以下のサイトを参考にしてください。

Placeholderで未入力時のヒントを表示

InputFieldを使うとなると初期時に薄いグレーの文字でヒントを出すことが多いと思います。一般的にはユーザーにどういう情報を入力してほしいかを書くところです。
Placeholderは未入力時のヒントで、入力値には含まれません。最初から入力欄に文字を入れておく場合は、TMP_InputFieldのtextに設定します。

InspectorでPlaceholderの文字を設定

スクリプトで入力値（テキスト）を取得・設定

初期入力値を設定する場合は、TMP_InputFieldの参照をinputFieldに割り当てたうえで、次のようにtextへ代入します。

inputField.text = "Player";

スクリプトでInputFieldを制御する方法は以下を参考にしてください。

パスワード入力や制限の設定

パスワード入力をマスクする（Inspector）

InputFieldの Content Type を Password に設定することで可能

パスワード入力をマスクする（スクリプト）

InputFieldの Content Type を Password に設定することで可能
➡ ユーザーが入力した文字を ● や * で表示

inputField.contentType = TMP_InputField.ContentType.Password;
inputField.ForceLabelUpdate(); // ラベルの表示を更新

パスワード以外の設定

前項でパスワードの設定ができたが他にもいくつか設定できるので紹介しておきます。

よくあるエラーと対策

NullReferenceException が出る

・スクリプトでinputField.textを使う前に、InspectorでInputField(TMP) をセットしているか確認
・GetComponentで取得している場合は、取得先にTMP_InputFieldが付いているか確認
inputFieldがnullのままでは、ForceLabelUpdate()も呼び出せません。