Unity(C#)初心者・入門者向けチュートリアル ひよこのたまご

AndroidやiOS向けアプリを簡単に作れるゲーム開発環境Unity(ユニティ)の使い方を、チュートリアル方式で一緒に学びましょう!

【Unity開発】uGUIのInputFieldの使い方 チャット機能

Unity 2021.1.0f1 Personal(【更新】2021年4月)
Unity5.0.0f4 Personal(2015年5月)

 

今回はゲーム実行時に文字入力スペースに文字を入力できるInputFieldという機能について解説していきたいと思います。
会員登録ページやチャット機能など、文字入力が必要な時に使用します。

まずはInputFieldでチャット機能を作ってみる

まずはInputFieldを使ってチャット(風)機能を作成してみて、その後InputFieldコンポーネントの内容について解説します。

Projectを新規作成し、HierarchyビューのCreate>UI>InputFieldを選択します。

 

f:id:hiyotama:20210414015820p:plain
InputFieldを選択して作成

 

f:id:hiyotama:20210414020901p:plain

GameビューにInputFieldが表示

 

f:id:hiyotama:20210414020955p:plain

子オブジェクトとしてPlaceholderとTextオブジェクト

 

無事InputFieldを作成することができました。

Placeholderは仮の値という意味で、「Enter text...」と薄く表示されている部分です。
会員登録ページなどで「名前」や「住所」など、入力してほしい情報が薄く表示されているアレです。

TextはInputFieldへ実際に入力された文字そのものを表します。

 

日本語が入力できるようにするためInputFieldコンポーネントのLine TypeMulti Line Newlineに変更しておきます。

 

f:id:hiyotama:20210414111846p:plain

 

続いてuGUIのPanel, Button, Textを作成して以下のように配置します。

 

f:id:hiyotama:20210414105844p:plain

Hierarchyビュー

 

f:id:hiyotama:20210414110158p:plain

Sceneビュー

 

続いてPanelオブジェクトにChatControllerというスクリプトを取り付けます。

 

>|cs|

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


public class ChatController : MonoBehaviour
{
    [SerializeField] InputField inputField;
    [SerializeField] Text displayText;

    public void SendText()
    {
        displayText.text = inputField.text + "\n" + displayText.text;
        inputField.text = "";
    }
}

||<

ChatController.cs

 

inputFieldに作成したInputFieldを、displayTextに作成したTextを指定します。

 

f:id:hiyotama:20210414110719p:plain

 

最後に作成したButtonのOnClick()にChatControllerのSendTextメソッドを指定します。

hiyotama.hatenablog.com

 

f:id:hiyotama:20210414110940p:plain

Buttonを押すとSendTextが実行されるよう設定

 

InputFieldに入力した文字にはInputField.textでアクセスできます。
displayTextにInputFieldの文字列を代入したらInputFieldの入力欄をクリアします。

 

f:id:hiyotama:20210414111506g:plain

 

厳密にはチャットとは違いますが、InputFieldを利用したチャット風機能を実装することができました。
以上でInputFieldの使い方が掴めたかと思います。

 

InputFieldコンポーネントの解説

それではInputFieldコンポーネントの中身を見ていきましょう。

 

f:id:hiyotama:20210414021528p:plain

 

まずはInteractableです。
日本語にすると「対話可能な」という意味で、falseにするとInputFieldがグレーアウトして使えなくなります。

 

Transitionは状態変化時の見せ方を設定できます。

Noneは何も変化せず、Color Tintは色、SpriteSwapは画像、Animationはアニメーションの変化をそれぞれ設定することができます。

Normal(通常時)、Highlighted(触れた時)、Pressed(クリックした時)、Selected(選択した時)、Disabled(Interactable:false時)の状態があります。

Color Tintの中にあるColor Multiplerは設定した色にColor Multiplerの値を掛け算した色を表示します。

Fade Durationは変化が終わるまでの時間を設定でき、設定した時間(秒)をかけて徐々に変化します。

NavigationはUI同士の関係をどのように表示するかを決めます。

下のVisualizeボタンを押すと、SceneビューにUI同士の関わりを表示させることができます。

 

f:id:hiyotama:20210414114011p:plain
黄色い矢印で関係を表す

 

続いてText Componentです。
InputFieldで入力するTextを指定でき、デフォルトではInputFieldの子オブジェクトであるTextオブジェクトが指定されています。
その下のTextはText Componentで指定したオブジェクトのtext内容を表示します。 

Character Limitで入力できる文字数の制限ができます。

 

Content Typeは文字入力方法を指定できます。
入力内容を制限したい時に使うと便利です。

Standard: 通常の文字入力

Autocorrected: 入力補完(使い方不明)

Integer Number: 数字のみ

Decimal Number: 数字とカンマのみ

Alphanumeric: アルファベットか数字のみ

Name: アルファベットとスペースしか入力できず、頭文字が大文字になります。

Email Address: アルファベットと数字?メールアドレス的な制限は確認できず。

Password: 「*」で文字内容を隠す。

Pin: 「*」で文字内容を隠す+入力制限。

Custom: カスタム設定

 

Line Typeでは行の設定が行えます。
Single Line: 一行のみ入力可能
Multiple Line Submit: 複数行可能。returnキーで改行はできず、改行したテキストをコピペで入力などに対応。
Multiple Line Newline: 複数行可能。returnキーで改行。

※※※重要※※※

日本語入力はMultiple Line Newlineを選択しなければできません。
ご注意下さい。

 

Placeholderは入力がない時に表示するTextオブジェクトを指定できます。
デフォルトではInputFieldの子オブジェクトにあるPlaceholderオブジェクトです。

 

Caret Blink Rateは文字入力位置にあるカーソルの点滅速度を決定します。
Caret Widthはカーソルの太さを決定します。
Custom Caret Colorはカーソルの色を決定します。

Selection Colorはテキストをドラッグして選択した時の背景色を決定します。

Hide Mobile Inputはスマホでスクリーンキーボードを使う時に隠すかを決定します。

Read Onlyをtrueにすると、InputFieldへの入力を制限します。

Should Activate On Selectは調べてみましたが、詳細は不明でした。

 

On Value Changed (String)はInputFieldに文字が入力される度にイベント(Scriptのメソッド)を実行することができます。

On Submit (String)もイベントを実行しますが、タイミングとしては「送信」が行われた時です。Line TypeがSingle LineもしくはMultiple Line Submitの時にEnterキーを押すと呼ばれます。

End Edit (String)はInput Fieldからフォーカスが外れた時にイベントを実行します。

 

 

以上、InputFieldの解説でした。

ありがとうございました〜。