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

Unity Unity

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

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

InputField追加しよう!

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

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

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

Add-Input-Field

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にスクリプトを使うためのオブジェクトを用意します。

Create-GameObject

 

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

Add-UIManager

 

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

UIManager-AddInputFiled

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

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

OnEndEdit

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

Add-GameObject

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

UIManager→EndInputText

 

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

実行してください。

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

Enter

 

応用編:スマホ対応

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

Hierarchy→UI→Button

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

Create-Button

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

Button-Inspector

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

OnClickEvent

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

Add-GameObject

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

UIManager→EndInputText

EndInputText

 

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

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

 

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

実行してみましょう!

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

test

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

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

Hierarchy→UI→Button

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

CreateText

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 = "";
}

public void RealTimeEdit()
{
inputText.text = inputField.text;//テキストにInputTextを代入
}
}

GameObjectのインスペクターにあるUIManagerスクリプトにTextをドラックアンドドロップして追加します。

AddText

InputFiledオブジェクトのOn Value Changeの設定をしていきます。

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

OnValueChange

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

AddGameObject

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

UIManager→RealTimeEdit

RealTimeEdit

これで準備は整いました。

実行して文字を打ってみましょう!

InputFiledに打った文字がリアルタイムでテキスト表示されます。

test

まとめ

 

コメント

タイトルとURLをコピーしました