Unity

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

この記事について

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

この記事で学べること

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

TMP_InputFiledとは?

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

特徴

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

UnityのInputFieldの導入

InputFieldの導入方法

① Hierarchy から追加

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

② InputFieldの構成要素

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

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

Placeholderを使用して初期値を設定

InputFieldを使うとなると初期時に薄いグレーの文字でヒントを出すことが多いと思います。一般的にはユーザーにどういう情報を入力してほしいかを書くところです。

InspectorでPlaceholderの初期値を設定

Unity InputTextのコンポーネントの画像

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

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

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

パスワード入力をマスクする(Inspector)

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

Unity InputTextの入力制限の画像

パスワード入力をマスクする(スクリプト)

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

inputField.contentType = TMP_InputField.ContentType.Password;
inputField.ForceLabelUpdate(); // 変更を即時反映

パスワード以外の設定

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

よくあるエラーと対策

NullReferenceException が出る

・スクリプトでinputField.textを使う前に、InspectorでInputField(TMP) をセットしているか確認
・inputField.ForceLabelUpdate(); を呼び出して変更を即時適用する

入力しても反映されない

・InputFieldのRead Onlyがオフになっているか確認
・スクリプトでForceLabelUpdate()を実行して強制更新

モバイルでキーボードが開かない

・TouchScreenKeyboardを手動で有効化

inputField.ActivateInputField();

まとめ

・TMP_InputField.textで入力された文字を取得できる
・Content Typeを設定すれば、パスワード入力・数値入力も制限可能
・プレースホルダーやフォント、枠線のカスタマイズもできる
・スクリプトでForceLabelUpdate()を実行すれば、変更を即時適用可能