i-school - 3Dダイビングゲーム 手順29
 この手順はスマホ用のジョイスティックを追加して、スマホでゲームを遊べるように機能を実装していきます。

 今回の実装では、画面の左半分はどの部分であってもスワイプするとジョイスティックが表示されて、キャラの移動が行えるようにしています。


<実装画像>



 このジョイスティックは画面をスワイプしたときだけ画面上に表示されます。


<実装動画>
https://gyazo.com/56d5d6392a1c3d3865f485924b07a2c3


 以下の内容で順番に実装を進めていきます。

手順29 ースマホでの制御ー
51.Joystick PackアセットをUnityにインポートして、Canvas内にジョイスティックを設置する
52.ジョイスティックと各ボタンをプログラムと連携して操作できるようにする



 新しい学習内容は、以下の通りです。

 ・Joystick Pack



51.Joystick PackアセットをUnityにインポートして、Canvas内にジョイスティックを設置する

1.設計


 スマホにはキーボードがありませんので、そのままのプログラムではゲームをスマホ上で操作することができません。
遊ぶためにはプログラムの変更・追加と、キーボードの代わりのキー入力の装置が必要になりますが、
キー入力については、無料アセットである Joystick Pack を利用すると実装出来ます。

 Joystick Pack には複数のスマホ端末用の Joystick がプレファブのゲームオブジェクトとして登録されていますので
ゲームの特性にあったものを利用して、キー入力を行えるようにします。

 これらの Joystick 系のゲームオブジェクトにはクラス(スクリプト)がアタッチされており、
そのクラスにはキー入力を判定するための変数やメソッドが用意されていますので、それを PlayerController スクリプトと紐づけて
キー入力を判定できるようにします。

 まずはアセットをインポートします。


1.アセットストアへ移動する


 Unityのメニューから Window => Asset Store を選択します。AssetStoreビューがSceneビューの隣に作られます。
Search online ボタンを押してアセットストアのサイトへ移動してください。(2020.1バージョンからこのような形式に変更になりました)

AssetStoreビュー

 

2.アセットストアで無料のエフェクト用アセットを検索する


 アセットストアのサイト上部にある検索窓に joystick と入力して検索を行います。

検索



 Joystick Pack という無料のエフェクト用アセットが見つかりますので、こちらをクリックします。

Joystick Pack



 クリックするとアセットの詳細が画面に表示されますので、 Add To My Assets、あるいは Open in Unity という、青いボタンを押します。
(Add To My Assets の場合には、ログインを要求されます。ログイン後、同じボタンがOpen in Unity に変わります。)



 
 自動的にUnityのエディター画面に遷移します。これでアセットストアのサイトは閉じてしまって大丈夫です。


3.アセットをUnityにインポートする


 エディターのPackageManagerビューが開いて、対象のアセットが表示されますので、右下にある Download ボタンを押します。
Download が終了すると左隣にある Import というボタンが押せるようになりますので、そちらを押します。


PackageManagerビュー


 
 インポートするアセットの一覧がポップアップウインドウとして表示されますので、そのまま右下にある Import ボタンを押します。

Import確認のポップアップ



 待機するようにプログレス表示が出て、しばらくするとアセットのインポートが終了します。


 Project内を確認しましょう。Joystick Pack という新しいフォルダが追加されていれば無事にインポートされています。
フォルダを順番に開いていくとたくさんのフォルダとファイルが追加されています。(画像の青い部分が今回インポートされたアセットです)


Joystick Pack



 以上でアセットのインポート作業は終了です。


4.FloatingJoystick ゲームオブジェクトを Canvas 内に設置する


 スマホでキャラの移動を行うために、インポートした Joystick Pack アセットを利用します。


完成図



 以下のパスの場所にある Floating Joystick ゲームオブジェクトを選択してください。

パス
Assets/Joystick Pack/Prefabs/Floating Joystick.prefab


フォルダ画像



 Floating Joystick ゲームオブジェクトをヒエラルキーの Canvas ゲームオブジェクトの子オブジェクトとしてドラッグアンドドロップしてください。
SceneビューとGameビューに丸型のジョイスティックが表示されます。


ヒエラルキー画像



SceneビューとGameビュー画像



5.Floating Joystick ゲームオブジェクトの設定を行う


 Floating Joystick ゲームオブジェクトの大きさを調整します。
まずは現在の大きさをSceneビューにて確認します。左上のメニューボタンの Rect Tool を選択しておいてください。


Sceneビュー画像



 この Rect Tool で見える青い四角い範囲が、この Floating Joystick ゲームオブジェクトのサイズです。
これはそのまま、ジョイスティックが表示されて、スワイプを感知してくれる範囲にもなります。
下記の画像のように、画面の左半分を覆うようにサイズを変更してください。


サイズ変更後のSceneビュー画像



 設定が終了したら、Canvas Renderer コンポーネントの Cull Transparent Mesh のチェックをオンにしてください


Floating Joystick ゲームオブジェクト インスペクター画像(これは画面の解像度によってWidthとHeightの値がそれぞれ異なりますので参考程度にしてください)



 以上で設定は完了です。
 続いて、Floating Joystick ゲームオブジェクトの子オブジェクトの設定を確認します。


5.Floating Joystick ゲームオブジェクトの子オブジェクト(Background ゲームオブジェクト / Handle ゲームオブジェクト)設定を行う


 Floating Joystick ゲームオブジェクトには子オブジェクトである Background ゲームオブジェクトと、
さらにその子オブジェクトである Handle ゲームオブジェクトがありますので、そちらを順番に設定します。


Background ゲームオブジェクト ヒエラルキー画像



 Background ゲームオブジェクトは、Canvas Renderer コンポーネントの Cull Transparent Mesh のチェックをオンにしてください。 
他に変更箇所はありません。もしもジョイスティックの画像を変更したい場合には、Image コンポーネントの画像を変更してください。


Background ゲームオブジェクト インスペクター画像



Sceneビュー画像





Handle ゲームオブジェクト ヒエラルキー画像



 Handle ゲームオブジェクトも同様に、Canvas Renderer コンポーネントの Cull Transparent Mesh のチェックをオンにしてください。 
こちらも他に変更箇所はありません。もしもジョイスティックの画像を変更したい場合には、Image コンポーネントの画像を変更してください。


Handle ゲームオブジェクト インスペクター画像



Handle ゲームオブジェクト Sceneビュー画像



 以上でジョイスティックの設定は完了です。


52.ジョイスティックと各ボタンをプログラムと連携して操作できるようにする

1.設計


 Canvas 内に Floating Joystick ゲームオブジェクトを設置しましたので、こちらを操作した際に、その情報を受け取って
キャラの移動に反映できるように、PlayerController スクリプトに処理を追加していきます。

 Joystick でスワイプ操作をして上下左右の入力を行う
    ↓
 Floating Joystick スクリプトによって、上下方向の情報と、左右方向の情報が変数に代入されているので、そちらを参照する
    ↓
 参照した値をキャラの移動方向に適用して、スワイプ操作によるキャラの移動制御を行う

 上記の流れになります。
 
 Floating Joystick スクリプトには Horizontal 変数Vertical 変数が用意されており、
こちらを参照すると画面のスワイプ量を float 型の -1.0f 〜 1.0f の間で取得出来るようになっています。


2.PlayerController スクリプトを修正する


 宣言フィールドには、先ほど作成したゲームオブジェクトの位置情報を参照できるように
SerializeField属性で Transform 型の変数を2つ用意します。すでにお気づきかと思いますが、変数名とオブジェクト名とを大体合わせてあるのは
アサイン時にどのゲームオブジェクトをアサインするべきか、わかりやすくし、また万が一間違えていた場合に気づきやすくするためです。
これもスクリプトの可読性に関わる部分ですので、変数名にもわかりやすく、推察しやすい名前を付けるように心がけてください。


 Update メソッドに、新しく作成する LimitMoveArea メソッドの呼び出すを追加します。
Update メソッド内に記述された処理は毎フレーム呼び出される処理になりますので、メソッドも同様に、毎フレーム呼び出されることになります。

 LimitMoveArea メソッド内において、現在のキャラのX軸とZ軸を確認し、先ほど設定した上下左右の移動範囲の中に収まっているかを
Mathf.Clamp メソッドを利用して判定を行います。もしも、いずれかの方向で移動の範囲外になっている場合には、その範囲内になるように位置を調整した上で
現在のキャラの位置を更新し、制限した範囲内でのみ移動を行うように制御を行っています。


PlayerController.cs

 <= クリックすると開きます



 スクリプトの修正が完成したら、Penguin ゲームオブジェクトのインスペクターから PlayerController スクリプトを確認します。
SerializeField属性で宣言している変数が追加されて表示されていれば問題ありません。


Penguin ゲームオブジェクト インスペクター画像



3.Penguin ゲームオブジェクトの PlayerController スクリプトのアサイン情報に、Joystick 型のコンポーネントがアタッチされているゲームオブジェクトを登録する


 Floating Joystick ゲームオブジェクトにアタッチされている Floating Joystick スクリプトをアサインする必要がありますので、
こちらをヒエラルキーよりドラッグアンドドロップして登録します。


Penguin ゲームオブジェクト インスペクター画像



4.ゲームを実行して動作を確認する


 ゲームを実行して、ジョイスティックを操作してみましょう。Unity エディター上ではマウスの左ボタンをドラッグすることで
スワイプと同じ操作を実行できますので、まずはそちらで確認を行います。スワイプしたときだけジョイスティックが表示されて、
ドラッグに合わせてジョイスティックが動作し、キャラもそちらの方向に移動すれば制御成功です。


<実行動画>
https://gyazo.com/56d5d6392a1c3d3865f485924b07a2c3


 問題なければスマホ用にビルドを行って、実機上でも確認をしてください。


 以上でこの手順は終了です。

 => 次は 手順30 ー通して遊んで新しい要素を考えるー です。