On-Screen Control でタッチ向けの入力コントロールを使用する

ページ更新日 :
ページ作成日 :

検証環境

Windows
  • Windows 11
Unity エディター
  • 2020.3.25f1
入力システムパッケージ
  • 1.2.0

この Tips の前提設定

この Tips の説明の前提として以下の設定を事前に行っています。

また、以下の Tips の内容を理解しているものとします。

タッチ操作向けの On-Screen Control について

ゲームをプレイする際キーボードやゲームパッドを使うことが多いですが、 スマートフォン等のようにタッチでしか操作できないデバイスではタッチ操作でゲームをプレイすることなります。

Unity の入力システムパッケージでは「On-Screen Control」を使うことによりタッチ操作をあたかもコントローラーで操作しているかのようにシミュレートすることができます。

On-Screen Control の前準備

少し長々と説明していますが、この項目の説明は On-Screen Control とは直接関係ありません。 他の手順で入力システムパッケージを使用してゲームパッドなどの入力を確認できるのであればその方法で構いません。

今回の Tips ではアクションマップを作成し、 タッチでゲームパッドを操作しているかのようにシミュレートする方法について説明します。

ちなみにアクションマップではなくスクリプトで Keyboard クラスや Gamepad クラスを使用した方法にも対応しています。 今回は説明しませんがそれらのクラスで試したい場合は以下のページで説明しているコードを代わりに準備しておけばOKです。

まず Canvas に入力内容を表示するテキストオブジェクトを配置しておきます。 後で下の方にタッチ用オブジェクトを配置するのでいくらか空けておいてください。

まずはアクションマップを以下のように作成します。アクションマップの説明を行ったときと同じ Action を作成しています。

アクションマップの説明が主体ではないのでバインドは簡易的にしています。 アクションマップに関する内容は以下のページを参考にしてください。

今回は「Send Messages」や「Invoke Unity Events」ではなくスクリプトで入力取得を行います。 これもスクリプト限定というわけではなく「Send Messages」などを使ってもきちんと動作します。

アクションマップからコードを生成しておいてください。

スクリプトは以下のようにします。アクションマップの説明の時とほぼ同じです。

using UnityEngine;
using UnityEngine.InputSystem;
using UnityEngine.UI;

public class InputActionScript : MonoBehaviour
{
  /// <summary>情報を表示させるテキストオブジェクト。</summary>
  [SerializeField] private Text TextObject;

  /// <summary>アクションマップから自動生成されたクラス。</summary>
  private InputActionSample _actionMap;

  private void Awake()
  {
    // 各操作を行ったときに呼ばれるイベントを設定する
    _actionMap = new InputActionSample();
    _actionMap.Action2D.Move.performed += context => OnMove(context);
    _actionMap.Action2D.Attack.performed += context => OnAttack(context);
    _actionMap.Action2D.Move.canceled += context => OnMove(context);
    _actionMap.Action2D.Attack.canceled += context => OnAttack(context);
  }

  private void OnEnable()
  {
    // このオブジェクトが有効になったときにアクションマップを有効にする
    _actionMap.Enable();
  }

  private void OnDisable()
  {
    // このオブジェクトが無効になったときにアクションマップが余計な動作を起こさないように無効にする
    _actionMap.Disable();
  }

  /// <summary>
  /// Move 操作をした時に呼ばれるメソッドです。
  /// </summary>
  /// <param name="context">コールバックパラメータ。</param>
  public void OnMove(InputAction.CallbackContext context)
  {
    // Move の入力量を取得
    var vec = context.ReadValue<Vector2>();
    TextObject.text = $"Move:({vec.x:f2}, {vec.y:f2})\n{TextObject.text}";
  }

  /// <summary>
  /// Attack 操作をした時に呼ばれるメソッドです。
  /// </summary>
  /// <param name="context">コールバックパラメータ。</param>
  public void OnAttack(InputAction.CallbackContext context)
  {
    // Attack ボタンの状態を取得
    var value = context.ReadValueAsButton();
    TextObject.text = $"Attack:{value}\n{TextObject.text}";
  }
}

スクリプトは EventSystem にアタッチしておきます。

ゲームを実行してアクションマップとして動作しているか確認してください。

On-Screen Button

On-Screen Button は画面上の何らかのオブジェクトをタッチしたときにゲームパッドの A や B などのボタン、キーボードの各キーを押したかのようにシミュレートすることができる仕組みです。 ちなみにタッチと書いていますが、マウスクリックでも動作します。

まず画面にボタンを配置します。コンポーネントをアタッチするだけなのでボタン以外のオブジェクトでも動作します。

コンポーネントから「入力 > On-Screen Button」を追加してください。

Control Path から Gamepad の Button East を設定します。これによりタッチしたときにあたかも Gamepad の Button East が押されたかのように動作します。

ゲームを実行してボタンをクリックしたときに Attack が表示されることを確認してください。 タッチ可能なデバイスであればタッチでも動作することを確認できると思います。

On-Screen Stick

On-Screen Stick を使用するとタッチでオブジェクトをスティックのように動かすことができます。 スティックを動かした際、あたかもゲームパッドのスティックなどを動かしたかのようにシミュレートすることが可能です。 タッチ以外にマウスで動かすことも可能です。

画面にタッチ用のスティックとなるボタンオブジェクトを配置します。 ここではボタンを使っていますがボタン以外のオブジェクトでも動作します。

コンポーネントの追加で「入力 > On-Screen Stick」を選択します。

Control Path からアクションマップで定義してある Gamepad の LeftStick を選択します。

ゲームを実行して Stick ボタンをドラッグしてみてください。あたかもスティックを動かしているかのようにボタンが円形に動きます。 もちろん動かしている間は入力内容を取得で来ていることも確認できます。

今回はボタンを配置していますが、円形の枠と丸いスティックオブジェクトを配置すれば仮想スティックのように見せることも可能です。

ちなみにこの動かせる範囲は On-Screen Stick の「Movement Range」で変更可能です。