【Unity】InputFieldを使って文字入力

2021/02/16スクリプト修正・追記


Unityなのにゲームを作らず、ツール系のような物ばかり作っている
今日この頃なのですが、ゲームはいつ作るの？
と言われてしまいそうです。(;^_^A

ま、そんな事は気にせず進めて行きましょう(;^o^) ＼(ToT )あんたほんとにそれでいいの


今回はInputFieldについて、少しふれてみます。

InputFieldは文字を入力するものなんですが、
ゲームでは、ユーザーネームや保存データの名前
なんかでお目に掛るかと思います。

単純にInputFieldを設置するだけで、
文字入力ができるので便利です。

早速、使っていきたいと思います。

InputField①.jpg
キャンバスとイメージを準備して、その上にInputFieldを設置します。

Unityを日本語化したので、かえって分かりにくい気もしますが、
入力フィールドがInputFieldになります。

設置するとかなり小さいオブジェクトが設置されます。
InputField②.jpg
最初はカメラマークに被って見えませんでした。(-_-;)

少し見やすいサイズに変更していきます。
InputField③.jpg
幅500高さ80にするとスクショの大きさになります。


何やら書いてあるようですが、文字が小さすぎて読めない！ヽ(｀⌒´)ノ ウッキー
この文字を編集してみます。

InputField⑤.jpg
InputFieldは、PlaceholderとTextで構成されています。

このPlaceholderのInspectorを見るとテキスト（スクリプト）と言うコンポーネントがあるので、
ここの内容を修正します。

InputField④.jpg
文字サイズを40くらいにするとEnterText…　の文字が見えます。

Placeholderは入力前の表示に使われています。
InputField⑥.jpg
テキストを書き換えれば画像のように表示できるようになります。
実際に文字入力を始めると消えるオブジェクトです。

続いて、Textですがこれは入力用のオブジェクトです。
実際に書き込むと、このオブジェクトが文字を表示します。
InputField⑦.jpg
テキスト（スクリプト）に入力欄があるので、
適当に文字を入れて大きさを調整します。

今回は、フォントサイズを50くらいにしておきます。
調整が終わったら入力欄の文字を消去して準備完了でっす。

準備ができたので一度プレイしてみます。

再生できない場合、ダウンロードは🎥こちら

ちょっと動画が小さくて分かりにくいですが、
InputFieldをマウスでクリックするとカーソルが表示されるので、
キーボードで文字が入力できるようになりました。

続いて、名前を表示するTextを用意します。
InputField⑨.jpg
Textだけだと味気がないので、Imageも追加してそれっぽくしてみました。(* v v)。ハズカシイ

追加したTextをPlayerTextとして、
このTextに入力した文字を反映します。

次のスクリプトを作成して、

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;

public class InputFieldManager : MonoBehaviour
{

    public GameObject inputFieldObj;  //InputField本体取得
    public InputField inputField;     //InputField取得
    public Text playerText;           //プレイヤーテキスト取得

    public void TextReflect()
    {
        playerText.text = inputField.text;
        inputFieldObj.SetActive(false);
    }
}


スクリプトは分かり易いオブジェクトにアタッチします。
今回はInputFieldにアタッチしました。

設定した変数に、それぞれのオブジェクトをアタッチして準備します。
InputField⑫.jpg
アタッチができたらInputFieldのInspectorから入力完了時の項目を探して、
ボタンの処理のようにスクリプト内のメソッドを呼び出します。

InputFieldに文字入力をする際、文字を確定する為エンターキーを押しますが、
それに連動してメソッドを呼び出せるようになっています。
ボタンの処理と似ています。

メソッド内の処理は入力された文字を、プレイヤーテキストに渡すだけにしています。
入力が終わったらInputFieldは要らないので隠すようにしました。
PLAYを動画にしたのでどうぞ。

再生できない場合、ダウンロードは🎥こちら

手元の操作が録画できないので分かりにくいのですが、
入力が完了するとプレイヤーテキストに反映されました。

端末にも対応していて、androidだとInputFieldをタップすると
端末のキーボードが呼び出されます。

名前を付けたり、数値の入力なんかもできるので、
応用できそうですね～

ちなみにInputFieldのTextに文字を入れておくと
PLAYした際に、そのまま表示されてしまいます。

また、PLAY中に入力した文字はText内に残るので、
次にInputFieldを呼び出すと前回入力の文字が出てしまいます。
この辺は、入力完了のメソッドで文字を消す処理が必要になるかと思います。


簡単ですがInputFieldについては以上となります。
それでは今回はこの辺で　( ^ 0 ^ )/~~~~see you again





追記
スクリプト内のInputFieldとTextの使い方が間違ってました。

修正前は、InputField内のTextとPlayerTextをGameObjectで取得して
各TextをGetComponentしていました。

uGUIは、using UnityEngine.UI;を宣言する事で、
GetComponentをしなくても使う事ができます。

取得する際は、GameObjectではなく
UI名で取得する事で無駄な処理がなくせます。

気付かづ長い間、放置していた事をお詫び致します。_(._.)_ ユルシテ

この記事へのコメント

コメントを書く