ひとりでのアプリ開発 - fineの備忘録 -

ひとりでアプリ開発をするなかで起こったことや学んだことを書き溜めていきます

Unity:Joystick Pack - バーチャルスティックを実装 -

初めに

 スマホゲームなどで実装されているバーチャルスティックを実装できる無料アセット「Joystick Pack」を紹介します。

youtu.be

ダウンロード・インポート

assetstore.unity.com

  • Assetstore で Add to My Assets をクリック


  • Package Manager からダウンロード・インポート


Joystick Pack について

3つの Joystick モード

モード 説明
Fixed スティックは常に表示されており、位置は固定されている。
Floating スティックはタップされるまで非表示。タップしたらその場所にスティックが表示される。
Dynamic スティックはタップされるまで非表示。タップされたらその場にスティックが表示され、ドラッグ時に追従する。


Fixed

youtu.be

Floating

youtu.be

Dynamic

youtu.be

コンポーネント

 上記で紹介した3つのコンポーネントと3つのモードの切り替えもできる Variable Joystick のコンポーネントがあります。Variable Joystick のコンポーネントは他の3つの内容を含むので、それだけ解説します。

機能 説明
Handle Range ハンドルが動く範囲。数値を増やすと可動域が増える
Dead Zone スティックの値が指定した値以下の場合反応しなくなる
Axis Options Both:x軸y軸ともに動作する
Horizontal:x軸のみ動作
Vertical:y軸のみ動作
Snap 1, 0, -1 以外の数値を取らなくなる
MoveThreshold Dynamicモードの場合のみ使われる。
スティックが移動できる閾値を表す
JoystickType Joystickのモードを指定する
Backgroung Joystickの背景を指定する
Handle ハンドルを指定する

 基本的には、このコンポーネントから設定を変更できます。

 なお、ジョイスティックの画像はアセット内に数枚用意されています。

スクリプトから Joystick を操作する

 Joystick からの入力をスクリプトから取得したり、設定をスクリプトから変更できます。

public VariableJoystick variableJoystick;  //InspectorからJoystickを取得

variableJoystick.Horizontal  //水平方向の入力を float で取得
variableJoystick.Vertical  //垂直方向の入力を float で取得
variableJoystick.Direction  //Joystickの方向を Vector2 で取得

 他にもコンポーネントから設定できる HandleRange, DeadZone, AxisOpsions, SnapX, SnapY, MoveThreshold, SetMode をスクリプトから取得したり、変更したりできます。

使い方

  • Canvas の子オブジェクトにプレハブにしてある Joystick を置く


  • Joystick で操作したいオブジェクトに Joystick の入力を受け取り、動かすためのスクリプトをつける
使ってみた

 ピカチュウの Sprite を動かすために次のスクリプトを Sprite につけます。

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

public class JoystickPlayer2d : MonoBehaviour
{
    public float speed;  //速度をInspectorから入力
    public VariableJoystick variableJoystick;  //InspectorからJoystickを取得

    public void FixedUpdate()
    {
      //動く方向をJoystickから取得
      Vector3 direction = Vector3.up * variableJoystick.Vertical + Vector3.right * variableJoystick.Horizontal;
      //移動
      this.transform.position += direction * speed;
    }
}

 speed は 0.1 にして実行してみました。
(実行結果)
youtu.be

最後に

 3Dオブジェクトを動かす場合は、Example で青色の玉を動かすために使ったスクリプト(JoystickPlayerExample)を参考にするとよいでしょう。Rigidbody を使い、 Addforce で動かしています。
 2Dの場合は、向きを取得してキャラクターの向きを変えたり、歩行アニメーションをつけるとクオリティが上がっていきます。
 アセットの中に(英語ですが)ドキュメントがあります。とても簡潔でわかりやすいので安心して使えました。