Unityゲーム制作の備忘録①TouchScriptを用いて拡張性の高いJoyStickを作る

1, なぜTouchScriptを使うのか

Unity Asset Storeにはモバイル入力を扱うAsset...とくにJoyStickに関してはその需要の高さから非常にたくさん存在しています。ただ単にJoyStickを作りたいのであれば、Standard Assetに含まれているCross Platform Inputを使うのが一番手っ取り早く、エラーなく無料で実現可能です。

しかしモバイル入力を扱ってみるとわかるのですが、入力を受けるUIをゲーム画面上に表示しないといけないため、ゲーム性を向上させればさせるほど画面が複雑になってしまいます。(図1参照)

図1　UIだらけでゲーム画面がごちゃごちゃな様子。
（ここでは画面左のハンドルのようなボタンがジョイスティックです）

そこで、一つのUIに複数のジェスチャを登録することでゲーム性はそのままで、画面はよりシンプルに直感的に動作するモバイル入力を作成できると考えたわけです。

Unityのモバイル入力は基本的にInput.GetTouch関数で与えられますが、得られるTouch構造体の情報を精査し、タップ、ダブルタップ、ホールド、フリック、ドラッグ、ピンチ...これらのジェスチャを一つ一つ定義していくというのは非常に手間のかかる作業になります。そこで使いたいのがTouchScriptになります。

2,　TouchScriptの導入

TouchScriptのダウンロードはこちらから、
公式ドキュメントはこちらになります。
アセットがインポートできたらAssets/TouchScript/Prefabsの中からCursorsとTouchManagerをHierarchyにドラッグします。その後AddComponentからTouchManagerにStandardLayerをアタッチします。

Hit test optionsをクリックして開き、Hit Screen Space UI以外のすべてのチェックを外します。TouchManagerのInspectorが図2のようになっていればOKです。

図2 TouchManagerのInspector

ここで少しだけStandardLayerについて触れておきます。このStandardLayerもしくは、FullScreenLayerがアタッチされたGameObjectがScene中に存在しないとTouchScriptは動作しません。StandardLayerはHit test optionsの項目をいじることで、どのオブジェクトがタッチを認識できるかを決めることができます。オブジェクトの種類だけでなく、Layerでも認識の可否を選択できるので、3D空間でタッチ処理を扱う際にはかなり便利です。また、FullScreenLayerをアタッチすると画面全体がタッチ判定を認識できるようになります。

Hierarchyから、Canvasを新規作成。その子にImageを新規作成します。このImageの範囲内でJoyStickを機能させますので任意の大きさにしてください。
Imageオブジェクトの名前をJoyStickにして、Add ComponentからScreen Transform Gesture、Tap Gesture、New ScriptからJoyStickScriptと名付けたスクリプトを作成してアタッチします。Screen Transform GestureのRotationとScalingのチェックを外します。画面構成は人によって違うと思いますが、Inspector及びHierarchyが図3のようになっていれば大丈夫です。

図3 Joy Stick Imageの様子

JoyStickScriptを開き、以下のスクリプトをコピペして完成です。

3, 使用法と仕組み

動かしたいプレイヤー等からJoyStickScript内のVector2 inputを参照して使用します。プレイヤーの動かし方等については本題ではないのでまた気が向いたら書かせて頂きます。

JoyStickScriptの各変数のイメージは図4のようになっています。
moveVectorが大きくなれば大きくなるほど無限にプレイヤーの移動速度が速くなる、という設計では困るので最初にタッチした座標_startPosを中心として半径_radiusの円よりmoveVectorが大きければ、_radiusに大きさを合わせています。また、moveVectorをそのまま入力として扱ってしまうと、解像度の違う端末でプレイした際にプレイヤーの移動速度に差が出るという設計になってしまうため、inputは正規化して大きさ1.0f以下のベクトルとして出力しています。

図4 Joy Stick Script図解

4, カスタマイズ

今回作成したのは本当に単純なJoy Stickとしての機能を持たせただけですが、void TappedHandleの中身を任意の処理に書き換えることでタップされた際の処理を決定できます。また、TapGestureの代わりにFlickGestureをアタッチし、Tapの部分をFlickにすることでフリックされた際の処理にすることもできます。