JoyStickとは

JoyStickとは簡単に言うと、据置ゲームのコントローラーについているコロコロ転がせる入力機です。
これをタッチ画面上に配置ことで、プレイヤーの移動などの360度の入力が求められる実装をより直感的に操作できるようになります。

JoyStickの実装

概要

早速JoyStickの実装に入っていきましょう。
今回は最近の横画面ゲームのUIでよく使われる「左画面で移動、右画面で視点変更(視点変更は水平方向のみ)」を実装しようと思います。

アセットはJoyStickPackの「FloatingJoyStick」を使用します。
JoyStickPackには全部で4種類のJoyStickがありますが、UIが違うだけで機能面は全て一緒です。
今回説明する実装方法で全てのJoyStickは実装できますので、自分のゲームに合う物をご使用ください^^

今回はあくまで、移動と視点変更の実装のみをご紹介するので、「どのような仕組みで～」や「他にどんな機能あるの～」って方はこちらを参照ください！

下準備

まず床とその上にプレイヤーを配置しましょう。
僕の方では床をCubeで、プレイヤーをSphereにしました。
Cubeは適当に伸ばしておき、プレイヤーにはRigidbodyも追加しておきましょう。

こんな感じですかね！

アセットのインポート

続きましてアセットをインポートしていきたいと思います。
こちらからAssetStoreのJoyStickPackを追加し、Unityにインポートしてください。
量は多くないので、JoyStickPackの中身は全部入れちゃいましょう！

無事にインポートできたら「Joystick Pack」というフォルダが追加されます。

FloatingJoyStickの配置

次にJoyStickをSceneに配置しましょう！

①「Create>UI>Canvas」を生成
②「Joystick Pack>Floating Joystick」をCanvasの子に入れる

そうすると↓のようになるかと思います！

ここで一つポイントが！
今回使用するFloatingJoyStickは常にJoyStickを表示するのではなく、「ある範囲内をタップした時にそこを中心としてJoyStickが表示される」といったものになります。
こっちの方が画面の邪魔にならず、ユーザーのUXも向上すると思うのでおすすめです！
(文字では伝わりにくいので↓のGIF画像を参考に...)

そして今回の実装は

画面左半分：移動
画面右半分：視点変更

なので、FloatingJoyStickを二つ設置します。また、タップしたところにJoyStickを表示できる範囲はScaleを調整すれば変更できますので、その二つのJoyStickのScaleが画面の半分ずつを占めるよう調整しましょう。

スクリプトの作成

今回必要なスクリプトはPlayerにアタッチするPlayerScriptのみでシンプルです！

usingSystem.Collections;usingSystem.Collections.Generic;usingUnityEngine;publicclassPlayerScript:MonoBehaviour{publicFloatingJoystickinputMove;//左画面JoyStickpublicFloatingJoystickinputRotate;//右画面JoyStickfloatmoveSpeed=5.0f;//移動する速度floatrotateSpeed=5.0f;//回転する速度voidStart(){}voidUpdate(){//左スティックでの縦移動this.transform.position+=this.transform.forward*inputMove.Vertical*moveSpeed*Time.deltaTime;//左スティックでの横移動this.transform.position+=this.transform.right*inputMove.Horizontal*moveSpeed*Time.deltaTime;//右スティックでの回転transform.Rotate(newVector3(0,rotateSpeed*inputRotate.Horizontal,0));}}

ここの特徴としては.Vertical,.HorizonalがJoyStickの垂直方向、水平方向の入力に対応しており、JoyStickの傾き具合でそれぞれ0~1のFloat型で返します。

何も触っていない時は当然0になりますので、if文等使わずそのままvoid Update()内に書くことができます。

Unity側でアタッチ

①MainCameraをPlateyの子に設定 ※これが無いと視点変更が効きません
②PlayerScriptをPlayerにアタッチ
③↓のGIF画像を参考にアタッチしたPlayerScriptコンポーネントにJoyStickを紐付ける
(左右間違えないように)

完成！

これで実装完了です！早速試してみましょう！

動くのが確認できましたら、各々のゲームに合うようカメラの位置や変数の値などを調整してみてください。

それではまた！