UnityUnityメモ

UnityでInputFieldを使った簡単テキスト入力【初心者向け】

Unity

はじめに

ゲーム開発をしていると、「ユーザーに名前を入力してもらいたい」とか、「ゲーム内でチャット機能を作りたい」といった場面に遭遇することがありますよね。Unityには、そんな時に使える便利なコンポーネント「InputField」が用意されています。

でも、初めて触る人にはちょっと難しそうに見えるかもしれません。でも大丈夫!この記事では、UnityでInputFieldを使ったテキスト入力の実装方法を初心者向けに分かりやすく解説します。

1. InputFieldとは?

InputFieldは、Unityで用意されているUI(ユーザーインターフェース)のコンポーネントの一つです。このコンポーネントを使うと、ユーザーがゲーム内でテキストを入力できるフィールドを簡単に作成できます。例えば、以下のような場面で役立ちます:

  • プレイヤーの名前入力
    ゲーム開始時にユーザー名を入力してもらう場合に使用します。
  • チャット機能の実装
    オンラインゲームなどでプレイヤー同士がメッセージを送り合う場合に活用できます。
  • フォームの作成
    意見募集やアンケート機能の実装にも適しています。

InputFieldの基本構造

InputFieldは以下の要素で構成されています:

  1. Text
    入力した内容が表示される部分です。ユーザーが入力したテキストをリアルタイムで表示します。
  2. Placeholder
    フィールドが空のときに表示される説明用の文字列です。例えば「名前を入力してください」などのヒントを表示できます。
  3. Background
    InputFieldの背景部分です。デザインに応じて色や画像を変更可能です。

特徴と利点

  • 簡単な実装
    InputFieldはドラッグ&ドロップや少しの設定だけで使えるため、初心者でも扱いやすいです。
  • 柔軟なカスタマイズ
    テキストのフォントやサイズ、背景色、プレースホルダーのテキストなど、見た目や挙動を自由に調整できます。
  • イベント対応
    入力内容の変更やエンターキーを押したときのイベントを簡単に取得でき、ゲーム内でのアクションにつなげやすいです。



2. プロジェクトの準備

UnityでInputFieldを使ったテキスト入力を実装するには、まず基本的なプロジェクトの設定を行います。以下の手順に従って準備を進めていきましょう!


1. 新規プロジェクトの作成

Unityを起動して、以下の手順で新しいプロジェクトを作成します。

  1. Unity Hubを開き、「New Project」をクリックします。
  2. テンプレートの一覧から「2D」または「3D」を選びます。
    例: 入力フォームの実装自体はどちらのテンプレートでも可能ですが、2Dの場合は簡単なUIプロジェクトに向いています。
  3. プロジェクト名を「InputFieldExample」など、わかりやすい名前に設定します。
  4. 保存先のフォルダを指定して、「Create Project」をクリックします。

2. 必要なUIの設定

テキスト入力を実現するには、CanvasとInputFieldというUIコンポーネントを作成する必要があります。

  1. InputFieldの作成
    • 「Hierarchy」ウィンドウを右クリック → 「UI」 → 「InputField」を選択します。
    • InputFieldがヒエラルキー内にCanvasの子オブジェクトとして追加されます。
  2. ボタンの作成
    • 「Hierarchy」ウィンドウで右クリックし、「UI」→「Button」(この記事では「Legacy」→「Button」)を選択して追加します。
  3. 入力した内容を表示するためのテキストを作成
    • 「Hierarchy」ウィンドウで右クリックし、「UI」→「Text」(この記事では「Legacy」→「Text」)を選択して追加します。
  4. 位置の調整
    • 作成したUIを見やすい位置に配置しましょう。



3.スクリプトで入力内容を取得する

それでは、InputFieldに入力された内容をスクリプトで取得してみましょう。具体的には、ユーザーが入力したテキストを取得してテキストに表示する方法を説明します!

1.スクリプトの作成

  1. プロジェクトウィンドウを右クリック「Create」→「C# Script」を選びます。
  2. スクリプト名を「InputFieldManager」とします。
  3. スクリプトを開いて以下のコードを入力します。
using UnityEngine; // Unityの基本機能を使えるようにする
using UnityEngine.UI; // UI(ユーザーインターフェース)関連の機能を使えるようにする

// クラスの定義。DisplayTextという名前の機能をまとめる箱を作る
public class DisplayText : MonoBehaviour
{
    // ユーザーが文字を入力するための入力欄(InputField)を指定するための変数
    public InputField inputField;

    // 画面に文字を表示するためのTextを指定するための変数
    public Text displayText;

    // 入力された文字を表示する動きを作る関数
    public void DisplayInputText()
    {
        // 入力欄に入力された文字(inputField.text)を表示用のText(displayText.text)にコピー
        displayText.text = inputField.text;

        // ここで入力内容が表示される!
    }
}

2. スクリプトのアタッチ

このスクリプトをUnityエディターに適用します。

  1. ヒエラルキーウィンドウで「Canvas」または「InputField」オブジェクトを選択します。
  2. インスペクターにスクリプトをドラッグ&ドロップしてアタッチします。
  3. インスペクター内の「InputField」フィールドに、ヒエラルキー内の該当するInputFieldオブジェクトをドラッグ&ドロップして紐付けます。
  4. インスペクター内の「DisplayText」フィールドに、ヒエラルキー内の該当するTextオブジェクトをドラッグ&ドロップして紐付けます。

3. ボタンで機能を実行

次に、入力されたテキストを表示するためのボタンを設定します。

  1. ボタンを選択し、インスペクターの「On Click()」セクションを確認します。
  2. 「+」ボタンをクリックして、新しいイベントを追加します。
  3. DisplayTextスクリプトがアタッチされたオブジェクトをドラッグ&ドロップします。
  4. 表示されるドロップダウンメニューで「DisplayText」→「DisplayInputText()」を選択します。



4.テストしてみよう

ここまで設定が終わったら、動作確認をします。

  1. Unityエディター上部の「Play」ボタンをクリックしてゲームを再生します。
  2. InputFieldに任意のテキストを入力します。
  3. ボタンをクリックすると、コンソールに入力したテキストが表示されるはずです。

例:
InputFieldに「こんにちは」と入力してボタンを押すと、テキストにに次のように表示されます。


これで、InputFieldの入力内容をスクリプトで取得する方法は完了です!この基本を応用すれば、フォーム入力やチャット機能の実装も簡単にできます。



まとめ

UnityのInputFieldを使えば、簡単にテキスト入力機能を実装できます。この記事では、InputFieldの基本的な設定からスクリプトを使った入力内容の取得まで、初心者でもわかりやすい手順で解説しました。

InputFieldを活用することで、ゲームにユーザー名を入力する画面や、チャット機能、フォーム機能などを追加することができます。また、UnityのUIシステムは柔軟性が高いので、デザインや機能を自由にカスタマイズできる点も魅力です。

この記事の手順を参考にして、あなたのゲームやアプリに便利な入力機能を追加してみてください!楽しいUnity開発を!

おすすめのアセット

InputFieldに入力したテキストをもっと魅力的に見せたいと考えたことはありませんか?
例えば、入力された文字にアニメーションをつけたり、キャラクターが話しているような雰囲気を演出したい場合、「Text Animator for Unity」というアセットがおすすめです。

このアセットを使うと、以下のような効果を簡単に実現できます:
  • テキストが1文字ずつフェードインするアニメーション
  • タイピングのようなエフェクト
  • 入力に応じた動的なテキスト変化

「Text Animator for Unity」を活用すれば、ただテキストを表示するだけでなく、視覚的な楽しさをプラスすることが可能です。
ゲームやアプリのクオリティを一段上げたい方には、とてもおすすめのツールです。

興味があればチェックしてみてくださいね!

よくある質問

Q
InputFieldが表示されないのですが、どうすればいいですか?
A

InputFieldが表示されない場合、Canvasが正しく設定されているか確認してください。Canvasコンポーネントが存在し、正しい位置に配置されているかを確認しましょう。

Q
InputFieldに入力されたテキストをどのように取得しますか?
A

スクリプトでinputField.textを使うことで、入力されたテキストを取得できます。inputField.onEndEdit.AddListener(UpdateText);のようにリスナーを設定すると、入力終了時にテキストを取得できます。

Q
InputFieldのフォントや色を変更するにはどうすればいいですか?
A

InputFieldのフォントや色を変更するには、インスペクターウィンドウで「Text」オブジェクトを選択し、そこからフォントや色を設定できます。