Unityに関連する記事です

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

 今回の実装では、画面の左半分はどの部分であってもスワイプするとジョイスティックが表示されて、キャラの移動が行えるようにしています。
また画面の右側にはボタンを2つ用意し、ジャンプと、バルーンの生成を行えるようにしています。

<実装動画>
https://gyazo.com/22056c9e7632b21f99eea524230da6ee


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



 新しく学習する内容は以下になります。

・Joystick Pack
・プラットフォーム依存コンパイル −プラットフォームに合わせて処理を変える機能−



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


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

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

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

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


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


 Unityのメニューから Window => Asset Store を選択します。AssetStoreビューがSceneビューの隣に作られます。
Search online ボタンを押してアセットストアのサイトへ移動してください。

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.JoystickをCanvas 内に設置する


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

完成図



 Project / Joystick Pack/ Prefabs フォルダを選択して、Floating Joystick ゲームオブジェクトを選択してください。


フォルダ画像



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


ヒエラルキー画像



SceneビューとGameビュー画像



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


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


Sceneビュー画像



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


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



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



 サイズを変更したら、Floating Joystick ゲームオブジェクトにアタッチされている Floating Joystick スクリプトを変更します。
Axis Options を Both => Horizontal に変更してください。これは方向入力を感知する軸の設定です。
今回のゲームでは左右方向しか方向入力がありませんので、Both(水平と垂直)ではなく、Horizontal(水平)のみを感知するようにしておきます。


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



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


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


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


 Background ゲームオブジェクトは、まず Canvas Renderer コンポーネントの Cull Transparent Mesh のチェックを外してください。
その次に、Image コンポーネントの Color を選択して、透明度(Alpha)の値を 255 => 0 にしてください。
こうすることで操作する時以外にはジョイスティックを非表示にしておくことが出来ます。
 

<手順動画 Colorのアルファを 0 にする>
https://gyazo.com/102e00f4a44c2991cc49c7c355ae65e0


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



 Handle ゲームオブジェクトも同様に、Canvas Renderer コンポーネントの Cull Transparent Mesh のチェックを外して
Image コンポーネントの Color を選択して、透明度(Alpha)の値を 255 => 0 にしてください。
 

<手順動画 Colorのアルファを 0 にする>
https://gyazo.com/79d9c96f5942bdea1c5f71c5096bd3ab


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



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


52.ジャンプ用とバルーン生成用のボタンを設置する

1.設計


 キャラの移動用のジョイスティックは設置できましたので、今度は画面の右側にジャンプボタンとバルーンの生成ボタンを設置します。
これは Button コンポーネントを持つゲームオブジェクトを配置して作成します。


完成図



2.Canvas ゲームオブジェクトの子オブジェクトとして ButtonPlace ゲームオブジェクトを作成する


 Canvas ゲームオブジェクトを選択して右クリックをしてメニューを開き、Create Empty を選択します。
空のゲームオブジェクトが作成されますので、名前を ButtonPlace に変更します。

 ButtonPlace ゲームオブジェクトはこれから作成するボタン群のフォルダとしての役割を持ちます。


ヒエラルキー画像



 RectTransfrom コンポーネントの Anchor の設定を画面の右下に変更します。
Anchor をクリックして、Alt キーを押しながら Right - Bottom を選択してください。
アンカーの位置が変更されて ButtonPlace ゲームオブジェクトも Canvas 内の右下位置に移動します。


Sceneビュー画像



インスペクター画像



 以上で ButtonPlace ゲームオブジェクトの設定は完了です。


3.ButtonPlace ゲームオブジェクトの子オブジェクトとして btnJump ゲームオブジェクトを作成する


 ButtonPlace ゲームオブジェクトの上で右クリックをしてメニューを開き、Create => Button を選択します。
Button ゲームオブジェクトが作成されますので、名前を btnJump に変更します。


ヒエラルキー画像



 btnJump ゲームオブジェクトはジャンプ、および空中浮遊を操作するボタンの役割を持ちます。
位置とサイズについては、Sceneビュー画像やインスペクター画像,鮖温佑棒瀋蠅鮃圓辰討ださい。


Sceneビュー画像



Gameビュー画像



インスペクター画像



インスペクター画像



 子オブジェクトの Text オブジェクトですが、Textコンポーネントの Text プロパティ欄に Jump と入力してください。


インスペクター画像



4.ButtonPlace ゲームオブジェクトの子オブジェクトとして btnDetachOrGenerate ゲームオブジェクトを作成する


 ButtonPlace ゲームオブジェクトの上で右クリックをしてメニューを開き、Create => Button を選択します。
Button ゲームオブジェクトが作成されますので、名前を btnDetachOrGenerate に変更します。


ヒエラルキー画像



 btnDetachOrGenerate ゲームオブジェクトはバルーンの生成、および発展編で追加するバルーンを切り離す操作を行うためのボタンの役割を持ちます。
位置とサイズについては、Sceneビュー画像やインスペクター画像,鮖温佑棒瀋蠅鮃圓辰討ださい。


Sceneビュー画像



Gameビュー画像



インスペクター画像



インスペクター画像



 子オブジェクトの Text オブジェクトですが、Textコンポーネントの Text プロパティ欄に Jump と入力してください。


インスペクター画像



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

1.設計


 Canvas ゲームオブジェクト内に設置したジョイスティックとボタンについてプログラムと連動させることで、スマホからキャラの操作を制御出来るようにします。

 キーボートでのキャラの操作は PlayerController スクリプトが制御を行っていますので、今回のジョイスティックとボタンについても
PlayerController スクリプトに制御を追加して操作を行えるようにしていきます。

 Joystick を扱うには、Joystick スクリプトを取得して代入して制御を行う必要があります。Button も同様です。
そのため、これらを扱うための変数を新しく宣言して代入して制御出来るようにします。


2.PlayerController スクリプトを修正して、ジョイスティックとボタンの操作を実装する


 新しくジョイスティックとボタンの操作用の変数を宣言フィールドに追加します。これらはヒエラルキーにある各ゲームオブジェクトをアサインして代入します。Button 型のコンポーネントを扱うため、using に宣言を追加します。

 Start メソッドと Move メソッドに処理を追加して、ジョイスティックとボタンの操作の制御に必要な処理を実装します。
また新しくボタンに対応するためのメソッドを2つ作成します。


PlayerController.cs

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



3.<プラットフォーム依存コンパイル −プラットフォームに合わせて処理を変える機能−>


 Unityではプラットフォーム(PC、Androidなどの動作する環境)に合わせて処理を変更する機能があり、それをプラットフォーム依存コンパイルと呼びます。


private void Move() {

   #if UNITY_EDITOR
        // 水平(横)方向への入力受付
        float x = Input.GetAxis(horizontal);
   #else
        float x = joystick.Horizontal;
   #endif
}

 #if プラットフォーム名(Unityで定義されている)を指定することで、そのプラットフォームの場合のみ指定した処理を行うように設定できます。
また if / else 文と同じように #elif を追加する、あるいは else 文と同じように #else を追加することで別のプラットフォームの場合の分岐を作成できます。
そのため使用方法は通常のif文の制御と同様です。

 今回のケースでは、プラットフォームが UnityEditorの場合(PCも含みます)には、float x で宣言した変数に対して Input.GetAxis メソッドの実行結果を代入するように記述しています。
プラットフォームが else、つまり、UnityEditor 以外でゲームを実行している場合(Andorid、iOSなどの上記のプラットフォームの場合)には、
float x で宣言した変数に対して Joystick.Horizontal の入力値を代入するように記述しています。

 この機能を利用することにより、1つのメソッド内でプラットフォームに応じた処理を分岐して記述できます。
プラットフォームによって入力の方式が異なる(スマホとPCではキー入力の方式が異なる)ため、一概に1つの処理ですべてをカバーすることが出来ないためです。
そういったケースを想定して、こういったプラットフォームに依存した形式のコンパイル方法が用意されています。


参考サイト
Unity公式スクリプトリファレンス
プラットフォーム依存コンパイル
https://docs.unity3d.com/ja/2018.4/Manual/Platform...
XR-Hub 様
【Unity】プラットフォームごとに処理を変更する方法
https://xr-hub.com/archives/13648


4.Yuko_Player ゲームオブジェクトの PlayerController スクリプトの設定を行う


 PlayerController スクリプトの修正が終了しましたので、このスクリプトがアタッチされているゲームオブジェクトを選択して
必要な情報の設定を行います。
 
 新しく3つの変数の表示が追加されていますので、順番にアサインを行いましょう。
今回はアサインの方法は割愛します。PlayerController のコメントや処理を読みながら、今までの手順を振り返り、必要な情報をアサインしてください。


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



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


 まずはUnityエディター上で、いつもと同じようにデバッグを行います。
マウスでドラッグするとスワイプの代替え操作になりますので、画面の左側をマウスの左ボタンをドラッグしてみてください。
ジョイスティックが表示されて、キャラが移動すれば成功です。

 各ボタンもマウスでクリックして操作できますので、それぞれの動作を確認します。


<実行動画 キャラの移動>
https://gyazo.com/22056c9e7632b21f99eea524230da6ee


<実行動画 バルーンの生成、ジャンプ>
https://gyazo.com/4476ea56ad383616873bc9efb2954556


6.スマホ用にビルドをして実機で動作を確認する


 スマホ用にビルドを行って、実機で動作するかを確認します。

 Build Settings でプラットフォームを Android、あるいは iOS に変更し、ビルドを実行して起動してください。

 画面の左半分をスワイプすることでキャラの移動、各ボタンを押すことでジャンプやバルーンの生成が行えれば成功です。


7.実装した処理の内容を読み返して理解を深める


 自分で記述したスクリプトを見直してみましょう

 もしも処理内にコメントがない部分があったら、日本語のコメントを処理の上に記述してみてください
しっかりと処理の内容が記述できれば、処理が理解できていると考えて問題ありません

 逆にコメントが記述できない処理がある場合には、その処理の復習を行いましょう。
理解を深めるためには、何回も処理を読み解き、書くしか方法はありません

 好きこそものの上手なれ、という言葉通り、プログラムを好きになれるように楽しんで学習をしてください。
勉強しなきゃ、やらなきゃ、という感覚が強いと気持ち的にも大変ですので、継続的な学習が難しくなります。

 
 以上で基礎編の実装は終了です。

 次は 発展1 ーバルーンの管理方法を変更ー です。

コメントをかく


「http://」を含む投稿は禁止されています。

利用規約をご確認のうえご記入下さい

Menu



プログラムの基礎学習

コード練習

技術/知識(実装例)

2Dおはじきゲーム(発展編)

2D強制横スクロールアクション(発展編)

3Dダイビングアクション(発展編)

2Dタップシューティング(拡張編)

レースゲーム(抜粋)

2D放置ゲーム(発展編)

3D脱出ゲーム(抜粋)

2Dリアルタイムストラテジー

2Dトップビューアドベンチャー(宴アセット使用)

3Dタップアクション(NavMeshAgent 使用)

2Dトップビューアクション(カエルの為に〜、ボコスカウォーズ風)

3Dトップビューアクション(白猫風)

VideoPlayer イベント連動の実装例

VideoPlayer リスト内からムービー再生の実装例(発展)

AR 画像付きオブジェクト生成の実装例

AR リスト内から生成の実装例(発展)

private



このサイト内の作品はユニティちゃんライセンス条項の元に提供されています。

管理人/副管理人のみ編集できます