(:3[kanのメモ帳]

個人ゲーム開発者kan.kikuchiのメモ的技術ブログ。月木更新でUnity関連がメイン。

タッチした所が始点になるジョイスティック(バーチャルパッド)を実装【Unity】【uGUI】


このエントリーをはてなブックマークに追加

この記事でのバージョン
Unity 5.3.4f1 Personal



はじめに

前回の記事で自家製ジョイスティックを紹介しました。


f:id:kan_kikuchi:20160722133057g:plain



前回はジョイスティックの位置が固定されてるタイプでしたが、

今回は始点が移動するタイプのご紹介!

イメージは以下のような感じ。


f:id:kan_kikuchi:20160722135134g:plain


なお、Stickの画像を透明にすれば、UIを表示せずに操作することも可能です。


f:id:kan_kikuchi:20160726140228g:plain


ちなみにNGUIでも似たようなものを作ってました。





Joystick.cs

さっそくコードです。

前回同様、

Joystick.csが本体JoystickEditor.csはJoystickのinspectorの表示を拡張するスクリプトです。



これまた前回同様、コードの説明は長くなりそうなので省略します。


なお、このジョイスティックを使うには

TouchEventHandlerSingletonMonoBehaviourが必要になります。


SingletonMonoBehaviourについては以下の記事



TouchEventHandlerについては以下の記事を参照のこと。




使うにはまず、

  • Joystick.cs
  • JoystickEditor.cs,
  • TouchEventHandler
  • SingletonMonoBehaviour

を作成し、JoystickEditor.csをEditorフォルダに入れます。


f:id:kan_kikuchi:20160725134910p:plain


次にHierachy上でCanvasを作ります。この時、同時にEventSystemも作られるはずです。


f:id:kan_kikuchi:20160721133632p:plain
f:id:kan_kikuchi:20160721133639p:plain


作成したCanvasに下に空のGameObjcetを作成、

ここでは分かりやすいように名前をJoystickにしています。


f:id:kan_kikuchi:20160721133825p:plain


このJoystickにJoystick.csを追加すると、Initというボタンが表示され、

それを押すと自動でStickというオブジェクトが生成されます


f:id:kan_kikuchi:20160726134213g:plain


このStickが操作する部分です。

最初は画像が設定されていないので、任意の画像を設定しましょう。


また、Stickの土台を表示したい場合はStickより上にImageを作成します。

この時、土台のImageのRaycast TargetはOffにします。


f:id:kan_kikuchi:20160721134823j:plain



さらにJoystickのより上、canvasの真下に

TouchEventHandlerとタッチイベントを取得する範囲を設定するためのImage

AddしたオブジェクトをUIの一番後ろに配置します。


f:id:kan_kikuchi:20160726134740j:plain


この時注意が必要なのがRaycast Targetにチェックを入れる事です。

また、ColorのAを0にして透明にした方が良いかと思います。


動かしてみる

前回同様、Joystickを使ってキューブを動かしてみます。以下がそのコードです。

using UnityEngine;
using System.Collections;

public class MovingCube : MonoBehaviour {

  //先ほど作成したJoystick
  [SerializeField]
  private Joystick _joystick = null;

  //移動速度
  private const float SPEED = 0.1f;

  private void Update () {
    Vector3 pos = transform.position;

    pos.x += _joystick.Position.x * SPEED;
    pos.z += _joystick.Position.y * SPEED;

    transform.position = pos;
  }

}


上記の通りJoystickのPositionを使って操作を行います。

Positionのxとyは操作に応じて-1~1の間を変動します。


なお、これはInspectorに表示されているPositionと同じ値です。


f:id:kan_kikuchi:20160726135153j:plain


このMovingCube.csをCubeに付けて、先ほどのJoystickをInspector上で設定します。


f:id:kan_kikuchi:20160726135201j:plain


そうすればキューブを自在に操作できるようになります!


f:id:kan_kikuchi:20160722135134g:plain


設定

一応、ジョイスティックの設定方法の説明をば。


まず、タッチできる範囲はStickの画像ではなく、JoystickのWidthとHeightで決まります。


f:id:kan_kikuchi:20160726135658j:plain


次にStickの移動半径はInspector上で変更できます。

また、Sceneビューで範囲を確認することもできます。


f:id:kan_kikuchi:20160726135712g:plain


なお、半径を変えてもPositionのxとyが-1~1の値を取るのは変わりません。


おわりに

前回のと比べるとTouchEventHandler関係が増えた分、

若干ややこしくなりましたが、そこそこ使い易いかと思います。