【Unity】ユーザー名などのテキスト入力をできるようにしよう！スマホ対応

ユーザー名などのテキスト入力をできるようにしよう！
まとめ

ユーザー名などのテキスト入力をできるようにしよう！

Unityでゲーム開発をする際に、ゲームのログイン機能を実装する上でユーザー名やパスワードの入力をできるようにする必要があります。そんな時に、便利な方法をPCのみならずスマホ対応の仕方、リアルタイムでテキストを更新する方法を解説します。

InputField追加しよう！

Unityで実行中にテキスト入力をする場合には、UIのInputFieldオブジェクトを使用する必要があります。

そこで今回は、InputFieldオブジェクトの解説をしていきます。

Hierarchy→UI→InputFieldで追加します。

InputFieldの使い方

InputFieldのインスペクターを見ると下のほうにこのようなイベント関数が表示されています。

関数の意味

On Value Change (String)	文字が変わったらイベントが実行される
On End Edit (String)	文字の入力が終わったらイベントが実行される

スクリプトを作成

Assets→Create→C#Script

今回はUIを読み込むスクリプトなので、スクリプト名はUIMangerスクリプトとします。

UIManagerスクリプト

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;//UIであるInputFiledを使用するので追加する。

public class UIManager : MonoBehaviour
{
public InputField inputField;//InputFiledを読み込む
public void EndInputText()//入力が終わったら
{
//入力が終わったらデバックログにどんなテキストが入力されたか表示する
Debug.Log(inputField.text);
//入力し終わったらテキストを消す
//inputField.text = "";
}
}

Hierarchy→GameObjectAssetsフォルダにスクリプトがあるだけではスクリプトを使うことができないので、Hierarchyにスクリプトを使うためのオブジェクトを用意します。

GameObjectにUIManagerスクリプトを追加します。

InputFiledをUIManagerにドラックアンドドロップして追加します。

入力が終わったらイベントを実行してほしいので、先ほど説明したInputFiledのインスペクターのOn End Editを設定します。

On End Editのプラスボタンをクリックします。

HierarchyのGameObjectをインスペクターにドラックアンドドロップして追加します。

No Functionになっているので先ほど作成した関数を設定します。

UIManager→EndInputText

これでInputFiledオブジェクトに入力された文字をデバックログに表示する準備が整いました。

実行してください。

テストと入力してEnterを押してみました。

応用編:スマホ対応

パソコンの場合はEnterボタンがあるので、大丈夫ですがスマホの場合はないので、ボタンを作成し、ボタンを押したときにイベントを発生させる必要があります。

Hierarchy→UI→Button

Canvasの子オブジェクトとしてButtonを作成します。

ButtonのインスペクターでOn Clickの設定をします。

On Clickのプラスボタンを押して下さい。

HierarchyのGameObjectをインスペクターにドラックアンドドロップして追加します。

No Functionになっているので先ほど作成した関数を設定します。

UIManager→EndInputText

最後に、InputFiledのインスペクターのOn End Editを設定を解除します。

マイナスボタンをクリックしてください。

以上で設定が終わりました。

実行してみましょう！

テキストを入力してButtonをクリックするとデバックログにテキストが表示されます。

応用編:リアルタイムにテキストを更新

今度は、On Value Changeを使うことで、InputFiledオブジェクトで打った文字をリアルタイムでテキストに反映させます。

Hierarchy→UI→Button

Canvasの子オブジェクトとしてTextを作成します。

UIManagerスクリプトを少し変更します。

UIManagerスクリプト

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;//UIであるInputFiledを使用するので追加する。

public class UIManager : MonoBehaviour
{
public InputField inputField;//InputFiledを読み込む
public Text inputText;//テキストを読み込む
public void EndInputText()//入力が終わったら
{
//入力が終わったらデバックログにどんなテキストが入力されたか表示する
Debug.Log(inputField.text);
//入力し終わったらテキストを消す
inputField.text = "";
}