【初心者向け】#5 〔開発編〕スマホでプレイヤーを動かす｜スマホ用 2D防衛アクションゲームを作ろう！

≪前の記事
#4 〔開発編〕プレイヤーを動かす

次の記事≫
#6 coming soon

本記事で紹介している情報は執筆時点のものであり、閲覧時点では変更になっている場合があります。また、ご利用の環境によっては本記事の情報通りに動作しない場合がございます。あらかじめご了承ください。

筆者の声 -本文はもう少し下にあります-
作成するもの
オブジェクトの名前を変更する
バーチャルスティックを用意する
バーチャルスティックでプレイヤーを動かす
スマホで動かす
終わりに -読まなくてもOKです-
1. 関連

筆者の声 -本文はもう少し下にあります-

こんにちは、シィグです。前回は、プレイヤーを動かす部分を作成しました。

前回作成したプログラムのままでは、スマホで動かすことができません。そこで今回は、バーチャルスティックを実装し、スマホでも動かせるようにしていきます。

作成するもの

　今回は、以下のようなものの作成を目指して進めていきます。完成形を意識しながら進めていければと思います。

オブジェクトの名前を変更する

　バーチャルスティックを実装する前に、オブジェクトの名前を変更し、プロジェクトを整理していきます。

　オブジェクトの名前は、名前を変えたいオブジェクトをクリックし、右側の「インスペクタービュー」の一番上のボックスで変更できます。

　今回は、「Circle」を「Player」に、「9-Sliced」を「Core」に変更しました。

　名前を変更することによって、どのオブジェクトがどんな役割をしているのかがすぐにわかるようになります。わかりやすさを意識して名前を付け、プロジェクトを進めていきましょう。

バーチャルスティックを用意する

　バーチャルスティックを0から作成しても良いですが、今回は「アセット(Asset)」を使うことで楽にバーチャルスティックを実装していこうと思います。

アセットとは？
　Unityプロジェクト内で使用されるリソースやデータのことを指します。ゲームを作る素材のことです。「Unity アセットストア」という場所で他の開発者が作成した様々なアセットを購入し、自分のプロジェクトで使うことができ、開発を効率よく進めることができます。

　今回使用するアセットは、Fenerax Studiosから提供されている「Joystick Pack」です。無料で使いやすいバーチャルスティックを追加することができます。

アセットストアを開く

　「アセット」の多くは、「Unity アセットストア」（以下、アセットストア）から購入することができます。

　まず、Unityのメニューバーにある「ウィンドウ」から「アセットストア」をクリックしてください。

アセットストアビューが開かれますので、「Search online」をクリックしてください。

※「Always open in browser from menu」にチェックを入れることで、次回以降この作業を省略できます。

　画像のようなアセットストアが開かれると思います。

アセットストアにサインインする

　次に、アセットストアにサインインを行っていきます。サインインに使用するアカウントは、Unityをインストールした際に作成したUnity IDです。

アカウントの作成を行っていない方は、以下の記事を参考にしてください。

【初心者向け】#2〔準備編〕Unityをインストールして、プロジェクトを始める｜スマホ用 2D防衛アクションゲームを作ろう！

≪ 前の記事#1 〔企画編〕どんなゲームを作るか考える次の記事 ≫#3 〔準備編〕プロジェクトをビルドして、スマホで動かす筆者の声 -本文はもう少し下にあります- 　こんにちは、シィグです。前回（#1〔企画編〕どんなゲームをつくるか考え...

　アセットストアの右上の人マークをクリックし、「Sign In」をクリックしてください。

※人マーク以外の方はすでにサインインができている状態ですので、このサインインの作業は飛ばしてください。

　画像のような画面が開かれると思いますので、Unityのアカウントを作成した際の方法でサインインを進めてください。

サインインが完了すると、人マークだった部分がアカウントの名前の頭文字に変わります。

アセット「Joystick Pack」を購入し、Unityにインポートする

　次に、「Joystick Pack」の購入を行います。アセットストアの上側の検索バーに「Joystick Pack」と入力してください。

　購入できるアセット一覧が表示されますので、「Joystick Pack」アセットを探し、クリックしてください。

　「Add to My Assets」をクリックしてください。
英語で利用規約が表示されますので、「Accept」をクリックしてください。

「Unity Editor を開きますか？」という項目が表示されますので、「Unity Editor を開く」をクリックしてください。

　Unityで「パッケージマネージャー」が開きますので、右上の「ダウンロード」をクリックしてください。
　ダウンロードが完了しましたら、「インポート」をクリックしてください。

　「Import Unity Package」という項目が開きますので、右下の「インポート」をクリックしてください。

　インポートが完了するとプロジェクトビューに「Joystick Pack」フォルダが作られます。

アセットの購入からインポートまでの解説は以上です。

バーチャルスティックでプレイヤーを動かす

インポートしたアセットを早速使っていきます。

　「プロジェクトビュー」で「Asset」→「Joystick Pack」→「Prefabs」のフォルダを開いてください。
※プロジェクトビューの右下にあるスライダーでファイルの大きさを変更できます。

　「Prefabs」フォルダ内に「Dynamic Joystick」「Fixed Joystick」「Floating Joystick」「Variable Joystick」というファイル（プレハブ）が入っていると思います。

　それぞれの特徴について解説します。

Dynamic Joystick

　バーチャルスティックがタップ（クリック）した位置に出現し、手（マウス）の動きに追従します。

Fixed Joystick

　位置が固定のバーチャルスティックです。タップ（クリック）して操作します。

Floating Joystick

　バーチャルスティックがタップ（クリック）した位置に出現します。出現した位置で固定されます。

Variable Joystick

　位置が固定のバーチャルスティックです。「Fixed Joystick」との違いは、真ん中の白丸をタップ（クリック）しなくても操作できる点です。

　今回は、「Floating Joystick」を使用します。

キャンバスの追加と設定を行う

　バーチャルスティックを使用するために必要なキャンバスをシーンに追加していきます。

　ヒエラルキービューの上側にある「＋」をクリックし、「UI」→「キャンバス」を選択してください。

　「Canvas」と「EventSystem」という項目がヒエラルキービューに追加されます。
※これ以降の画像は、オブジェクトの名前変更を行う前に撮影したものであるため、「9-Sliced」「Circle」という名前のまま担っています。解説上問題はありませんので、無視してください。

Canvasとは？
　ユーザーインターフェース（UI）要素を配置し、表示するための要素です。
※UIの例：テキスト、メニュー欄、ボタン等々

EventSystemとは？
　UIイベントの処理を管理するためのシステムです。クリック、タッチ、キー入力などのユーザーアクションの際に使用されます。

　次に、キャンバスの設定を行っていきます。

　「Canvas」を選択し、「Canvas」のインスペクターを表示してください。インスペクタビュー内の「Canvas」欄において、
・「レンダーモード」を「スクリーンスペース – カメラ」に変更
・レンダーカメラ欄に「Main Camera」をドラッグ＆ドロップして設定
を行ってください。

　さらに、「Canvas」のインスペクタの「Canvas Scaler」欄について、
・「UI スケールモード」を「画面サイズに拡大」
・「参照解像度」を「X (1920) Y (1080)」
・「スクリーンマッチモード」を「展開」
に設定してください。

以上でキャンバスの追加と設定は完了です。

バーチャルスティックをシーンに追加する

　次にバーチャルスティックをシーンに追加する作業を行います。

　「Joystick Pack」→「Prefabs」の中にある「Floating Joystick」を「Canvas」にドラッグ＆ドロップしてください。

　「Canvas」直下で、少し右にずれた場所に「Floating Joystick」が配置されたら成功です。

バーチャルスティックの設定

　バーチャルスティックの設定について解説します。

バーチャルスティックが表示される部分を変更する

　先程追加した「Floating Joystick」をクリックしてください。シーンビュー内に白色の枠と緑色の枠が表示されると思います。
※表示されない場合は、シーンビューの右側にある球のようなボタンをクリックし、青色にしてください。

　緑色で囲まれた部分でのみ、バーチャルスティックが表示されたり、反応したりするので、好みで変更してください

　次に「Floating Joystck」のインスペクターにある「Floating Joystick（スクリプト）」を確認してください。

Handle Range
Dead Zone
Axis Options
Snap X
Snap Y
Background
Handle

という項目があると思います。これらについて解説していきます。

Handle Range -スティック部分の可動範囲を変更する-

　「Handle Range」は、スティック部分の可動範囲を設定できます。

　画像はHandle Rangeの値が「1」と「3」のときを比較したものです。

Dead Zone -設定した値以下の動きは反応しないようにする-

　「Dead Zone」に設定した値以下のスティックの動きは反応しないようになります。
　例えば「Dead Zone」の値を「0.5」とすると、スティックを動かしても円の中心からスティックが0.5以上離れなければ値を返さない、今回の場合はプレイヤーは動かなくなります。

Axis Options -スティックが動く軸を固定する-

　「Axis Options」は、スティックが動く軸を設定することができます。「両方」「並行」「垂直」のいずれかを選択でき、それぞれの特徴は以下の通りです。
・両方：スティックは、全方位に動かすことができる。
・並行：スティックは、X軸方向（左右）に対してのみ動かすことができる。
・垂直：スティックは、Y軸方向（上下）に対してのみ動かすことができる。

Snap X・Snap Y -スティックを動かした大きさを「-1」「0」「1」のみにする

　通常スティックは、動かした量だけ、どの程度動かしたかを出力しますが、「Snap X」または、「Snap Y」にチェックを入れることで、X軸方向または、Y軸方向の動きの出力値を「-1」「0」「1」のみに固定する事ができます。

　今回の場合では、プレイヤーはスティックを動かした分によって速度が変わりますが、この項目らにチェックを入れることで、動く速度を一定にすることができます。

Background・Handle -バーチャルスティックの見た目を変更する-

　「Background」と「Handle」では、バーチャルスティックの見た目を変更することができます。

　変更方法について解説します。今回は、「Joystick Pack」アセットがサンプルとして用意してくれている画像を使用します。

　バーチャルスティックの設定について、今回の記事ではすべてデフォルトで何も変更せず進めています。好みに合わせて変えていただければと思います。

バーチャルスティックでオブジェクトを移動できるようにする

　前回書いた「PlayerController」プログラムを書き換え、バーチャルスティックの入力によってオブジェクトが移動できるようにします。

　「Asset」→「Scripts」の「PlayerController」をダブルクリックし、開いてください。

　まず、変数「joystick」を追加します。グローバル変数をを記入する場所の

public class PlayerController : MonoBehaviour
{
    public float speed = 5.0f; // 移動速度

という部分の変数「speed」の下に「public FloatingJoystick joystick;」を追加し、以下のようにしてください。

public class PlayerController : MonoBehaviour
{
    public float speed = 5.0f; // 移動速度
　　public FloatingJoystick joystick;

　次に、Update関数内の

// キーボードの入力を取得
float horizontalInput = Input.GetAxis("Horizontal");
float verticalInput = Input.GetAxis("Vertical");

という部分を以下のように書き換えてください。

// キーボードの入力を取得
float horizontalInput = joystick.Horizontal;
float verticalInput = joystick.Vertical;

　これらの変更によって、「Floating Joystick」の入力でオブジェクトを移動できるようになります。

　「Floating Joystick」以外のバーチャルスティックを使用している方は、「public FloatingJoystick joystick;」の部分の「FloatingJoystick」を使用しているバーチャルスティックの名前(Dynamic Joystick, Fixed Joystick, Variable Joystick)に変更してください。

「PlayerController」プログラム全体を確認したい場合はこの部分をクリックしてください

using System.Collections;
using System.Collections.Generic;
using UnityEngine;

public class PlayerController : MonoBehaviour
{
    public float speed = 5.0f; // 移動速度
    public FloatingJoystick joystick;

    private void Start()
    {

    }

    private void Update()
    {
        // キーボードの入力を取得
        float horizontalInput = joystick.Horizontal;
        float verticalInput = joystick.Vertical;

        // 移動ベクトルを計算
        Vector2 moveDirection = new Vector2(horizontalInput, verticalInput).normalized;

        // オブジェクトを移動させる
        Vector2 newPosition = (Vector2)transform.position + moveDirection * speed * Time.deltaTime;
        transform.position = newPosition;
    }
}

　変更を保存し、Unityの画面に戻ってください。

　次に、「Player」オブジェクトをクリックし、インスペクタービューを見てください。

　インスペクターの「Player Controller（スクリプト）」の「Joystick」という項目に先程シーンに置いた「Floating Joystick」オブジェクトをドラッグ＆ドロップし設定してください。