このブログはUnityの初心者向けに、Untiyの機能の使い方、基本のスクリプトファイルの使い方から応用までをご説明しています。中級以上の方に読んでいただきたい内容も随時更新していますので、お時間がある方、検索でここにアクセスされた方はぜひ立ち寄っていってください。
前回に引き続きUI活用シリーズ。今回は InputField の活用方法についてご紹介いたします。今回のショート動画ではかなり詰め込んでしまったので、1分間じゃ説明しきれず、うまく使わらなかったと思います。こちらで詳細を説明します。
下の動画は、その詰め込みすぎた「ファイブボックス 一分間Unity講座 InputFieldの活用方法」 のショート動画です。ご興味がございましたら、こちらの動画もご参照ください。
1，素材作成
事前にCanvasの配下に Textツールを3つ、さらに InputField を1つ配置します。Text及び、InputField は Legacy でもT extMeshPro でもどちらでもOKです。
今回はInputField に入力されたテキストを、3つのTextに表示するだけなので、配置位置やその他設定は、任意で結構です。
2，InputFieldの子要素とコンポーネントのプロパティ
UIツール
InputFieldは、初期状態で2つの子要素を含め3つのオブジェクトで構成されます。
InputField
ユーザーが入力することができるフィールドになる部分です。入力の条件や見た目の管理など様々なプロパティを持ちます。
Placeholder
テキストが未入力のときに表示される「ヒント」や「サンプルテキスト」を表示します。例えば「ここに名前を入力」などの案内を表示するのに使用したりします。テキストが入力されると非表示になります。
Text
ユーザーが入力したテキストの内容が表示されるUIオブジェクトです。この後説明するInputFieldのTextプロパティと連動しまが、Textプロパティがデータそのものを意味するのに対し、子要素のTextオブジェクトは実際に作品中に表示される部分になります。
InputFieldコンポーネントのプロパティ
InputFieldコンポーネントには様々なプロパティ―があります。主なプロパティをご紹介します。
Text
ユーザーが入力したテキストの内容です。InputFieldにテキストを表示したい場合や、入力されたテキストを他の処理に渡すプロパティ値として使用します。
Content Type
入力されるテキストの種類やフォーマットを制限するプロパティです。プロパティ値には以下のものがあります。
Standard: 何でも入力可能
Integer Number: 整数のみ入力可能
Decimal Number: 小数点を含む数値が入力可能
Alphanumeric: 文字と数字のみ入力可能
Email Address: メールアドレス形式の入力を期待する
Password: パスワード入力の際に使い、入力内容を伏せ字にする
Character Limit
入力可能な文字数の上限を設定します。例えば、ユーザー名や電話番号など、入力文字数を制限したい場合に使用します。
Line Type
入力フィールドで許可する行のタイプを指定することができます。LineTypeには以下のようなものがあります。
Single Line: 1行のみのテキスト入力
Multi Line Newline: 複数行の入力が可能で、改行もできる
Multi Line Submit: 複数行の入力はできるが、Enterキーで送信される
Caret Blink Rate
入力カーソル（キャレット）の点滅速度を調整することができるプロパティです
Caret Width
入力カーソルの幅を調整することができるプロパティです。
Read Only
チェックを入れるとInputFieldは読み取り専用になり、テキストを表示するだけになります
On Value Changed
ユーザーがテキストを入力するたびに呼び出されるイベント。
リアルタイムで入力内容を追跡したい場合や、入力中に自動的に処理を行いたい場合に使用します。
On Submit
ユーザーが入力を終了し、Enterキーや確定ボタンを押したときに呼び出されるイベント。
入力が完了した後の処理を実行したい場合に使用します
On End Edit
ユーザーが入力フィールドからフォーカスが外れたときに呼び出されるイベント。.フォーカスが外れたタイミングでデータを保存したり、入力内容を検証したりする場合に使用します。
今回は「On Value Changed」「On Submit」 「On End Edit」それぞれのタイミングで呼び出される関数を作って、それぞれのイベントに登録してみます。
3，データ取得プログラム
1，配列と変数
事前に「InputFieldManager」というスクリプトファイルを用意し、Canvasにアタッチしておきます。
まずは InputFieldManager を立ち上げて、NameSpace に UnityEngine.UI を宣言します。
using UnityEngine.UI;続いて3つのTextを使用するためのText型の配列、および InputField型の変数で宣言します。
[SerializeField] Text[] texts;
[SerializeField] InputField field;今回は変数の前に [SerializeField]を指定してるので、UnityEditor の Inspector からオブジェクトをAssignすることができます。
下の図のように、先に配列：texts の index数に 3 を指定します。要素を展開して、Element0にText0、Element1にText1、Element2にText3 をそれぞれAssign。
さらに変数：field には InputField をAssignします。
[SerializeField] で指定しなかった場合
配列、変数はスクリプトファイルから指定することもできます。
Text[] texts = new Text[3]; //配列を宣言、要素数を3に指定
InputField field; //InputField型の変数を宣言
void Start()
{
for (int i = 0; i < 3; i++) //3回繰り返す
{
//i番目の子要素からTextコンポーネントを取得しtext[i]に代入
texts[i] = transform.GetChild(i).GetComponent<Text>();
}
//子要素からInputFieldコンポーネントを取得しfield に代入
field = GetComponentInChildren<InputField>();
}続いて3つのイベントに登録する関数を用意します。
//On Value Changedに登録
public void SetChange()
{
texts[0].text = field.text; //1番目のTextに入力値を表示
}
//On Submitに登録
public void SetSubmit()
{
texts[1].text = field.text; //2番目のTextに入力値を表示
}
//On End Editに登録
public void SetEnd()
{
texts[2].text = field.text; //3番目のTextに入力値を表示
}4，関数の登録
作成した関数を、InputField のそれぞれのイベントに登録します。
「On Value Changed」
Object指定エリア（左下）に Canvas をAssign、Class、Method指定エリア（右上）にInputFieldクラスの関数：SetChange() を指定
「On Submit」
Object指定エリア（左下）に Canvas をAssign、Class、Method指定エリア（右上）にInputFieldクラスの関数：SetSubmit() を指定
「On End Edit」 Object指定エリア（左下）に Canvas をAssign、Class、Method指定エリア（右上）にInputFieldクラスの関数：SetEnd() を指定
ではこの状態で起動させてみましょう。
InputFieldに入力するたびに、入力したTextがText0に表示されていきます。 この状態で、InputField以外のオブジェクト、例えばいずれかのTextをクリックします。そうすると一番下のText2 にInputFieldの入力内容が表示されます。
最後にEnterキーを押すと、中央のText3の内容が更新されるのが確認できると思います。
ファイブボックスでは、スクラッチやUnityの個別指導のオンラインレッスンを行っています。
コメント