モーリーのメモ

プログラミングやCG作成等、アプリ開発を中心に情報を収集中!

仮想ジョイパッドを作る!: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

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

実装方法

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

1.『CocosCreator』を起動

  1. 『/Applications/CocosCreator』を起動

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

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

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

  1. 『Assets』パネルの『assets』フォルダを右クリックして、『Reveal In Finder』をクリック
    f:id:mmorley:20160518163550p:plain
    『Finder』でプロジェクトフォルダが開きます。
  2. ダウンロード→解凍した『Joypad』フォルダを『Finder』のプロフェクトフォルダ内の『assets』フォルダに追加

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

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

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

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

5.『HelloWorld.js』の編集

  1. 『Assets』パネルで『assets/Script/HelloWorld.js』をダブルクリックして開く
  2. 下記のコードを貼り付けて、キーボードの『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』を登録

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

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

7.作業を保存

  1. キーボードの『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になります。

デモ

 下記をクリックすると動きが確認できます。
 http://githubmorley.github.io/cocosprojects-pages/hellococos13/

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

あとがき

 中身は単純な構造です。ソース内で値の制限(デジタルジョイスティックの入力方向数等)をしていないので、変な値でもそのまま処理します。
 使用される場合は、必要に応じてカスタマイズして下さい。
 

広告を非表示にする