見出し画像

【Unreal Engine】スマホ用のバーチャルパッドについて

hirokichigamer804

はじめに

Unreal Engineのスマホ用のバーチャルパッド(仮想パッド)について、検索してもあんまり情報がなかったので、調べたものをまとめたり、自分なりにいろいろ試したことを残します。
新しさを押し出していきたいと思うので、スクショはこないだ遂に正式版がリリースされたUnreal Engine5でやりますが、Unreal Engine4でも仕様はほぼ変わってないっぽいです。
あと、筆者はiPhoneを持ってなくてAndroidでやってます。たぶんiOSでも変わらないですが、もしも違っていたらごめんなさい。
どちらにせよご自身の環境でスマホビルドできることが前提の内容です。
それから、Unreal Engineの言語は日本語にしています。英語で使っている人はUIの表示が違うのでご了承ください。

バーチャルパッドの基本設定

「Unreal Engine 仮想パッド」とか「Unreal Engine バーチャルパッド」で検索すると、まずは下記のサイトが見つかると思います。

こちらを参考に基本設定を見ていきます。

Unreal Engineではスマホ用にビルドすると自動的にバーチャルパッドが表示されるようになっています。
また、バーチャルパッドの入力はそのままコントローラーの入力として扱われるように設定されているため、通常の2本のスティックに関してはほぼ何も考えなくても実装可能です。

何もしなくても左右スティックは表示されるしちゃんと操作できる。

ちなみに、サードパーソンのサンプルでは画面タップでジャンプも実装されていて、これは操作キャラクターのBlueprintで実装されているっぽいです。

インプットTouchがそれ。

じゃあこのバーチャルパッドはどこで設定されているのかというと、
編集→プロジェクト設定→エンジン→インプットの中の、モバイルの項目の中にある、デフォルトのタッチインターフェイスの部分。

ここでバーチャルパッドがアサインされている。

これを変更しようとしてもデフォルトだとエンジン内のアセットは表示されないようになっているので、歯車マークから「エンジンのコンテンツを表示」をオンにすると表示されます。

エンジンのコンテンツを表示をオンにする。
エンジン内のコンテンツが表示された。

これで見ると、LeftVirtualJoystickOnlyというアセットがあることがわかります。
これは横スクロールのサンプルで使用されていて、左スティックのみ表示されるようになります。
先ほど紹介したページでは、スティックの画像を変えましたと書いてありましたが、その方法までは書いていませんでした。
この後は、ここで見つけたアセットをコピーして、コピーしたアセットを編集していきます。

バーチャルパッドのアセットを開く

まず、先ほど見つけたアセットがどこにあるかを探します。
タッチインターフェイス設定のアイコンか、変更するためのプルダウンの名前部分にオンマウスすると、アセットの保存場所が表示されます。

どうやらこのアセットはここに入っているらしい。

コンテンツブラウザの設定から、先ほどと同じようにエンジン内のアセットを表示させるようにします。

コンテンツブラウザも同じように設定。

方法はなんでもいいので、先ほど見つけたアセットを検索しましょう。

フォルダを検索してそこから入りました。
アセット名で検索する場合は、選んだフォルダの中だせを検索するということに注意しましょう。

ありました。
デフォルトのアセットをコピーして使います。コピーしなくても大丈夫なんですが、デフォルトの設定をいじるのは、ね、なんか、ほら、怖いので。
コピーしたアセットを開きます。ファイル名は「OriginalJouystickSetting」に変更しました。

これがその中身。

この中の、Controlsが画面に表示されるインターフェイスみたいです。
2配列エレメントがあり、それぞれ左スティックと右スティック用に設定されています。

インターフェイスの各種設定。

最初に紹介したページの画像変更は、これのImageを変更したというわけですね。
自分用のバーチャルパッドのアセットを作成したので、デフォルトのタッチインターフェイスの設定をこのアセットにしておきます。

アセットの設定を変更する。

PC上でタッチ入力をしたい

バーチャルパッドの設定を変更するたびにいちいちスマホビルドをすると時間がかかるので、この先に進む前に、マウス入力でタッチを受け付けるように設定しておいて、PC上でバーチャルパッドが触れるように設定します。
これについては下記のページが参考になりました。

こちらの「PCでタッチ入力をテストする方法」の通りに、同じエンジンのインプット設定の下の方、マウスのプロパティから「タッチにマウスを使用」をオンにします。
ついでに、モバイルの項目に戻って、「タッチインターフェイスを常に表示」もオンにしておきます。

インターフェイスの表示とマウスでタッチできるように設定。

これで準備完了です。
ちなみに、別でPC版を作る場合はこれらの設定はオフにした方がいいと思います。
試してないですが、これがオンのままだとPC版でもバーチャルパッドが表示されてマウス入力でタッチが反応するということだと思います。

PC上でバーチャルパッドが使える。

ちなみに、「タッチにマウスを使用」をオンにして選択ビューポートで再生をすると、マウスがビューポートから出られなくなります。
一瞬ビックリしますが、再生を停止させる場合はESCキーを使いましょう。
いつもそうしていたはずですよ！(自分は気付くのに30秒くらいかかった)

設定項目

バーチャルパッドの設定項目の話に戻ります。

Controls

この配列の中身が画面に表示されるインターフェイスの設定です。
インターフェイスの数を増やしたい場合はこれを増やします。

Image

画面に表示される見た目をテクスチャの中から選んで設定します。
Image1はスティック部分、指で動かす部分でImage2はスティックの背景の見た目です。
テクスチャの名前はそれぞれ、Thumb(親指の意味。サムズアップのサムですね)とBackgroundとなっているので、そういうことです。

Center

インターフェイスのセンター位置を画面のどこに表示させるかを設定します。
0.0～1.0の範囲で設定すると、画面の相対範囲で設定可能で、0は一番左、1が一番右、0.5で中心に表示させることができます。
Widgetのアンカーを設定するのに近い方法だと思います。
Widgetとの違いは、アンカーからの相対位置で表示場所を設定とかはなく、表示位置に関する設定はただのこれだけということです。
プルダウンを開くとXとYを個別に入力できます。(この情報は以降省略)

Visual Size

スティックの背景のサイズを設定します。
これも、0.0～1.0の範囲で設定すると画面の相対範囲で設定可能です。
1.0にすると画面と同じサイズになります。

左スティックのVisualSizeのXをデフォルトの2倍にした。

Thumb Size

スティック部分のサイズを設定します。
これも、0.0～1.0の範囲で設定すると画面の相対範囲で設定可能です。
1.0にすると画面と同じサイズになります。

左スティックのThumb SizeのXをデフォルトの2倍にした。

Visual SizeとThumb SizeのXYの比率は、余程の意図がない限りは1:1にした方がいいと思います。
1:1以外の比率にすると、ここで載せたスクショみたいなド変態スティックになってしまいます。

Interaction Size

スティックが反応する範囲を設定します。
これも、0.0～1.0の範囲で設定すると画面の相対範囲で設定可能です。
1.0にすると画面と同じサイズになります。
CenterからInteraction Sizeで設定した範囲内でタッチするとスティックが反応します。デフォルトでは若干縦長に設定されているようです。
反応したスティックはタッチされた位置に移動して、そこからVisual Sizeの範囲がアナログ入力の範囲になります。
移動したスティックは位置が更新されるわけではなく、再びタッチする際は、Centerの位置からInteraction Sizeの範囲内だけで反応するので、延々とスティックが移動しちゃうということはありません。

Visual Sizeを横長にしたうえで、
Interaction SizeをXYともに1.0にして画面全体に反応するようにした。

Input Scale

スティックの入力倍率を設定します。
0.5にすると、バーチャルパッドで限界までスティック入力をしても、0.5の入力しか入らなくなります。
逆に1以上にしたら、バーチャルパッドであんまりスティック入力しなくても最大まで入力されるようになります。
余程の意図がない限りは1.0のままで大丈夫でしょう。

Main Input Key / Alt Input Key

バーチャルパッドのスティック入力を、どの入力の扱いとするかを設定します。
Altは代替入力という説明がありますが、MainがX軸、AltがY軸の入力に対応しているっぽいです。
スティックだけでなくキー入力も設定できて、その場合は入力した瞬間にそのキーが押されたことになるみたいです。

Active Opacity

スティックがアクティブ状態の時の不透明度を設定します。
アクティブ状態とは、バーチャルパッドがタッチ入力に反応して、スティック入力を受け付けている状態です。
0.0が完全に透明で見えない状態、1.0が完全に不透明で見える状態です。
デフォルトでは1.0になっていますが、いい感じのテクスチャが用意されていて画面の邪魔にはなりません。
自分でテクスチャを用意して、画面の邪魔にならないようにしたい場合は半透明にしておきましょう。

Inactive Opacity

スティックが非アクティブ状態の時の不透明度を設定します。
バーチャルパッドがタッチ入力に反応していない状態ですね。
デフォルトでは0.2で、タッチしていない時でもバーチャルパッドが薄めに表示されるようになっています。
0.0にすると完全に見えなくなるので、タッチしていない時は見せない、みたいなことも可能ですね。

Time Until Deactive

タッチ入力をやめてから、バーチャルパッドが非アクティブの不透明度へと移行するまでの長さを設定します。
タッチ入力をしてバーチャルパッドがアクティブ状態になると、バーチャルパッドの不透明度がActive Opacityで設定した不透明度になりますが、そこからタッチ入力をやめて非アクティブ状態になると、バーチャルパッドの不透明度はInactive Opacityで設定した不透明度へと変わっていきます。
その不透明度が変わるまで待機時間の設定です。
0.0にすると、タッチをやめたら即座にバーチャルパッドの不透明度がInactive Opacityの不透明度へと向かっていきます。
長めにすると、タッチをやめてもしばらくの間はバーチャルパッドがActive Opacityで設定した不透明度のままになります。

Time Until Reset

バーチャルパッドが非アクティブ状態になってから、どれぐらいの時間でスティックの位置をリセットするかを設定します。
リセットされる位置はCenterで設定した位置です。
0.0にした場合はこの機能が無効になり、スティックの表示をセンターに戻しません。

Active Delay

バーチャルパッドに入力が入ってからどれぐらいの時間で実際にスティックが反応するかを設定します。
単位は秒です。
これを設定すると、Active Delayに設定した時間分ずっと入力が続かないとスティックが反応しません。
余程の意図がない限りは0.0で大丈夫だと思います。

Prevent Recenter

バーチャルパッドにタッチ入力した際にスティックのセンター位置を変更しないようにする設定です。
デフォルトではオフで、タッチした場所がスティックのニュートラル位置になるようにスティックが移動しますが、オンにした場合はそれをしません。
スティックは常にCenterで設定した位置に表示されることになります。
ちなみに、オンにしているとバーチャルパッドが常にActive Opacityで設定した不透明度で表示されるっぽいです。後述の応用してボタンを作る過程で気付きました。

Startup Delay

バーチャルパッドを画面に表示するまでの時間を設定します。
単位は秒です。
あくまで描画するまでの設定なようで、ここで設定した時間よりも前でも入力は受け付けるし、その場合は強制的に表示されるようです。
余程の意図がない限りは0.0で大丈夫そうです。

動的にタッチインターフェイスを変える

タッチインターフェイス表示は動的に変えられるようです。
いろいろ検索していたところ、下記のツイートに辿り着きました。

ブループリントから、表示するタッチインターフェイスを別の物に変えられるようです。
Youtubeはこちら。

Activate Touch Interface

Activate Touch Interfaceというノードを使えば、画面に表示するタッチインターフェイスを変えることができるようです。
ターゲットはPlayer Controllerなので、Get Player Controllerのノードから伸ばしましょう。

画面に表示するタッチインターフェイスを動的に変更する。

これで、キャラクターや場面ごとに違うタッチインターフェイスを使う、みたいなことができそうです。

応用したらボタンを作れるが・・・

デフォルトで用意されているタッチインターフェイスはスティックのみです。
Visual Sizeを0にしてThumbだけ表示、Prevent Recenterをオフにしてインターフェイスが動かないようにして、Main Input Keyにアクションマッピングで設定したものと同じキーを入れておけば簡易的なボタンが作れます。
ただし、Prevent Recenterはインターフェイス全体にかかるので、スティックの位置が固定されます。
あと、そもそもタッチインターフェイスはアニメーションもできない(っぽい)し、他のブループリントと通信してイベントを呼び出すみたいなこともできない(っぽい)ので、Widgetで実装した方がいいかも知れません。

おしまい

以上です。
上述の通り、ボタンはWidgetで実装した方が良さげですが、スティックはこれを使えばバッチリです。
誰かの何かの参考になれば幸いです。

この記事が気に入ったらサポートをしてみませんか？