仮想ジョイパッドを作る！：Cocos Creator

　以前、こちらの記事で『Cocos2d-JS』用に移植していた仮想ジョイパッドを『CocosCreator』で使えるように作り直しました。
mmorley.hatenablog.com
　少し中身を整理したので、多少シンプルになりました。
　動作の保証はできませんが、もしよければダウンロードしてご自由にお使い下さい。
f:id:mmorley:20160415223119p:plain:w300
　右がジョイスティックで、左がボタンです。

使用環境

　私が使用している環境です。

Mac OS X El Capitan Version 10.11.4
Cocos Creator Version 1.0.1
ブラウザ：Google Chrome Version 50.0.2661.75 (64-bit)

ダウンロード

　下記のサイトからダウンロードできます。
github.com

上記サイトの『Download Zip』をクリックし、ダウンロード
ダウンロードした『Joypad-CocosCreator-JS-master.zip』を解凍

実装方法

　実装例として『Hello World』プロジェクトに仮想ジョイパッドを組み込みます。

1.『CocosCreator』を起動

『/Applications/CocosCreator』を起動

2.『Hello World』プロジェクトを作成

『Dashboard』で、『New Project』のタブをクリック
『HelloWorld』を選択
任意の保存場所、プロジェクト名を入力
『Create』ボタンをクリック

3.『assets』にリソースを追加

『Assets』パネルの『assets』フォルダを右クリックして、『Reveal In Finder』をクリック

『Finder』でプロジェクトフォルダが開きます。
ダウンロード→解凍した『Joypad』フォルダを『Finder』のプロフェクトフォルダ内の『assets』フォルダに追加

　作業を終えると『Assets』パネルは下図のようになります。
f:id:mmorley:20160518154219p:plain

4.『Canvas』に『JoypadStick』と『JoypadButton』を配置

『Assets』パネルの『assets/Joypad/JoypadStick』を、『Node Tree』パネルの『Canvas』ノードにドラッグして、サブノードとして追加
『Assets』パネルの『assets/Joypad/JoypadButton』を、『Node Tree』パネルの『Canvas』ノードにドラッグして、サブノードとして追加

作業を終えると『Node Tree』パネルと『Scene』パネルは、下図のようになります。
f:id:mmorley:20160518164159p:plain:w500

5.『HelloWorld.js』の編集

『Assets』パネルで『assets/Script/HelloWorld.js』をダブルクリックして開く
下記のコードを貼り付けて、キーボードの『command + s』を押して保存

　cc.Class({
    extends: cc.Component,

    properties: {
        label: {
            default: null,
            type: cc.Label
        },
        text: 'Hello, World!',
        joypadStick: {  // ジョイスティック
            default: null, // デフォルト値
            type: cc.Node, // cc.Node型
        },
        joypadButton: { // ボタン
            default: null, // デフォルト値
            type: cc.Node, // cc.Node型
        },
    },

    // use this for initialization
    onLoad: function () {
        this.label.string = this.text;
    },

    // called every frame
    update: function (dt) {
        if(this.joypadButton.getComponent("JoypadButton").getValue() === 1) { // ボタンが押された場合
            this.label.node.setPosition(0, -180); // ラベルの位置を最初の位置に戻す
        }
        var pos = this.label.node.getPosition(); // 現在の位置を取得
        var velocity = this.joypadStick.getComponent("JoypadStick").getVelocity(); // ジョイスティックの値を取得
        
        this.label.node.setPosition(pos.x + velocity.x * 10, pos.y + velocity.y * 10); // ラベルを移動
    },
});

6.『Canvas』ノードの『HelloWorld』に『JoypadStick』と『JoypadButton』を登録

『Node Tree』パネルで『Canvas』ノードをクリック
『Properties』パネルの『HelloWorld』の『JoypadStick』プロパティに『Node Tree』パネルの『JoypadStick』をドラッグ
『Properties』パネルの『HelloWorld』の『JoypadButton』プロパティに『Node Tree』パネルの『JoypadButton』をドラッグ

作業を終えると『Properties』パネルの『HelloWorld』は下図のようになります。
f:id:mmorley:20160415222625p:plain

7.作業を保存

キーボードの『command + s』を押して保存

　
　作業は以上です。
　プレビューボタンで実行すると、下図のような画面が表示されます。

左のスティックを動かすとラベルが移動します。
右のボタンを押すとラベルが最初の位置に戻ります。

f:id:mmorley:20160415223119p:plain:w400

プロパティについて

　各プロパティの値について説明します。

『JoypadStick』

『JoypadStick』ノード

コンポーネント	属性値	説明
cc.Sprite	Sprite Frame	ジョイスティックの背景部分の画像です。
JoypadStick	Directions	デジタルジョイスティック有効時の方向数です。値は、2、4、8にして下さい。
JoypadStick	Has Deadzone	ジョイスティックの不感知部分の有無を設定します。 true：有り、false：無し
JoypadStick	Dead Radius	不感知部分の半径を設定します。単位：ピクセル
JoypadStick	Is Dpad	デジタルジョイスティック（入力方向制限）の有効/無効を設定します。 true：有効、false：無効
JoypadStick	Joystick Radius	ジョイスティックの感知部分の半径を設定します。単位：ピクセル

『JoypadStick』-『Thumb』ノード

コンポーネント	属性値	説明
cc.Sprite	Sprite Frame	ジョイスティックの親指部分の画像です。

『JoypadButton』

『JoypadButton』ノード

コンポーネント	属性値	説明
cc.Sprite	Sprite Frame	押されていない時の画像です。
JoypadStick	Disabled SF	ボタン無効時の画像です。
JoypadStick	Pressed SF	押された時の画像です。
JoypadStick	Is Holdable	ホールド機能（押している間ON）の有効/無効を設定します。 true：有効、false：無効
JoypadStick	Is Toggleable	トグル機能（押す度にONとOFFが切り替わる）の有効/無効を設定します。 true：有効、false：無効
JoypadStick	Radius	ボタンの感知部分の半径を設定します。単位：ピクセル
JoypadStick	FPS	ホールド機能OFFの場合、1/FPS秒後に自動的にOFFになります。