読者です 読者をやめる 読者になる 読者になる

モーリーのメモ

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

SneakyInput(仮想ジョイパッド)のJavaScript版の作成:Cocos2d-x v3.7(JavaScript)

 『SneakyInput』というiOSに仮想ジョイパッドを実装するためのソースコードが公開されています。『Cocos2d(Objective-C)』で書かれているのですが、これを『Cocos2d-x v3.7(JavaScript)』で書き直しました。
 以下、私が書き直したほうを『SneakyInput-JS』と呼びます。
 

2016.03.26追記
・『ColoredCircleSprite.js』とそれに関する部分を削除しました。
ボタン等の画像の代用として円を描くモジュールでしたが、正しく動作していませんでした。その他の機能には影響ありません。
修正内容についてまとめました。mmorley.hatenablog.com

本家サイトの紹介

 本家の『SneakyInput』のソースコードは下記のサイトで公開されています。
github.com
ダウンロードは無償です。『気に入った方は寄付を検討して下さい。』というスタンスのようです。

移植した『SneakyInput』について

 『SneakyInput-JS』はご自由に使用して頂いて構いませんが、内容や動作等について私は責任を持てませんので、ご自分で十分にご確認の上ご使用ください。

ダウンロード

 『SneakyInput-JS』は、下記のサイトからダウンロードできます。
https://github.com/githubmorley/SneakyInput-JS

  1. 上記サイトの『Download Zip』(右下あたり)をクリックし、ダウンロード
  2. ダウンロードした『SneakyInput-JS-master.zip』を解凍

実装例

 『Cocos』で作成したプロジェクトに『SneakyInput-JS』を実装します。

ファイルのインポート

  1. 『Cocos Code IDE』を起動
  2. 対象のプロジェクトの『res』フォルダを右クリックし、『インポート』を右クリック
    f:id:mmorley:20151001224020p:plain
  3. 開いたウィンドウで、『ファイル・システム』を選択し、『次へ』をクリック
    f:id:mmorley:20151001224133p:plain
  4. 『参照...』ボタンをクリックし、解凍して出来た『SneakyInput-JS-master/res』フォルダを選択
  5. 『すべて選択』をクリックして全ファイルにチェックし、『終了』をクリック
    f:id:mmorley:20151001224157p:plain
  6. 同様の操作で、対象のプロジェクトの『src』フォルダに『SneakyInput-JS-master/src』フォルダから下記のファイルをインポート
    • 『ColoredCircleSprite.js』:画像がない場合等に円を描くためのクラスを定義したファイルです。
    • 『SneakyButton.js』
    • 『SneakyButtonSkinnedBase.js』
    • 『SneakyJoystick.js』
    • 『SneakyJoystickSkinnedBase.js』

f:id:mmorley:20151001224214p:plain

『project.json』へ追加した『.jsファイル』を登録

  1. 対象のプロジェクトの『project.json』を右クリックし、『Open With』-『テキストエディタ』をクリック
  2. 下記の部分にインポートした『.jsファイル』を追加
    "jsList" : [
        "src/resource.js",
        "src/SneakyButtonSkinnedBase.js",
        "src/SneakyButton.js",
        "src/SneakyJoystickSkinnedBase.js",
        "src/SneakyJoystick.js",
        "src/app.js"
    ]

『resource.js』へ使用する画像を登録

 『SneakyInput-JS-master/src』の『resource.js』もご参照下さい。

  1. 対象のプロジェクトの『resource.js』をダブルクリックして開く
  2. 下記の部分にインポートした『.pngファイル』を追加
var res = {
    HelloWorld_png : "res/HelloWorld.png",
    MainScene_json : "res/MainScene.json",
    joystick_background_png : "res/joystick_background.png", // ジョイスティックの背景部分の画像
    joystick_thumb_png : "res/joystick_thumb.png", // ジョイスティックの親指部分の画像
    button_normal_png : "res/button_normal.png", // ボタンの通常時の画像
    button_pressed_png : "res/button_pressed.png", // ボタンの押下時の画像
    button_disabled_png : "res/button_disabled.png" // ボタンの使用不可時の画像
};

『HelloWorldLayer』への実装

 『SneakyInput-JS-master/src』の『app.js』もご参照下さい。

  1. 対象のプロジェクトの『app.js』をダブルクリックして開く
  2. 『 ctor:function () 』内に下記のコードを追加
// 画像を使用した方法
var joystickSkin = new SneakyJoystickSkinnedBase(); // ジョイスティックスキンのインスタンスを作成
joystickSkin.setPosition(160, 120); // ジョイスティックスキンを配置
joystickSkin.setBackgroundSprite(new cc.Sprite(res.joystick_background_png)); // 背景部分のスプライトを設定
joystickSkin.setThumbSprite(new cc.Sprite(res.joystick_thumb_png)); // 親指部分のスプライトを設定
var joystick = new SneakyJoystick(cc.rect(0, 0, 128, 128)); // ジョイスティックのインスタンスを作成
 joystick.setIsDPad(); // デジタルジョイパッドを有効
joystick.setNumberOfDirections(4); // デジタルジョイパッドの方向数を設定
joystick.setHasDeadzone(true); // デッドゾーンを有効
joystick.setDeadRadius(10); // デッドゾーンの半径を設定
joystick.setAutoCenter(true); // 自動センター復帰機能を有効
joystickSkin.setJoystick(joystick); // ジョイスティックスキンにジョイスティックのインスタンスを渡す
this.addChild(joystickSkin); // 自ノードにジョイスティックスキンを追加

var buttonSkin = new SneakyButtonSkinnedBase(); // ボタンスキンのインスタンスを作成
buttonSkin.setPosition(480, 120); // ボタンスキンを配置
buttonSkin.setDefaultSprite(new cc.Sprite(res.button_normal_png)); // デフォルト状態のスプライトを設定
buttonSkin.setPressSprite(new cc.Sprite(res.button_pressed_png)); // 押下状態のスプライトを設定
buttonSkin.setActivatedSprite(new cc.Sprite(res.button_disabled_png)); // 処理中状態のスプライトを設定
var button = new SneakyButton(cc.rect(0, 0, 64, 64)); // ボタンのインスタンスを作成
button.setIsHoldable(false); // ホールド機能を無効
button.setRateLimit(1 / 120); // ホールド機能無効時のボタンON時間を設定
button.setIsToggleable(false); // トグル機能を無効
buttonSkin.setButton(button); // ボタンスキンにボタンのインスタンスを渡す
this.addChild(buttonSkin); // 自ノードにボタンを追加

補足

ジョイスティックについて
  • 『SneakyJoystickSkinnedBase()』:ジョイスティックの表示を管理するクラスです。
  • 『SneakyJoystick(cc.rect)』:ジョイスティックの機能を管理するクラスです。背景部分の画像に合わせて、引数にジョイスティックの有効範囲を渡しています。
    • 『setIsDPad(Boolean)』: デジタルジョイスティックを有効無効を設定します。デジタルジョイスティックは動かせる方向を限定する機能です。
      • true:デジタルジョイスティックを有効にします。
      • false:デジタルジョイスティックを無効にします。
    • 『setNumberOfDirections(Number)』:デジタルジョイスティックで有効な方向の数を設定します。4の場合は4方向です。
    • 『setHasDeadzone(Boolean)』:デッドゾーン(あそび、不感知エリア)の有効無効を設定します。
    • 『setDeadRadius(Number)』:ジョイスティックのデッドゾーンの半径を設定します。
    • 『setAutoCenter(Boolean)』:ジョイスティックの自動センター復帰機能の有効無効を設定します。
      • true:ジョイスティックを離した時に自動で中心に戻ります。
      • false:ジョイスティックを離しても位置が変わりません。
ボタンについて
  • 『SneakyButtonSkinnedBase()』:ボタンの表示を管理するクラスです。
  • 『SneakyButton(cc.rect)』:ボタンの機能を管理するクラスです。ボタンの画像に合わせて、引数に有効範囲を渡しています。
    • 『setIsHoldable(Boolean)』:ホールド機能の有効無効を設定します。
      • true:ボタン押すとON、離すとOFFです。
      • false:ボタンを押すとON、設定時間後に自動でOFFになります。
    • 『setRateLimit(Number)』:『setIsHoldable(false)』の場合にボタンがOFFになるまでの時間です。デフォルトは『1 / 120』秒です。
    • 『setIsToggleable(Boolean)』:トグル機能を設定します。
      • true:ボタンを押すごとにONとOFFが切り替わります。
      • false:ボタン押すとON、離すと(または設定時間後)OFFです。

デモ

 下記のURLで、『SneakyInput-JS』のデモが見れます。上記の設定でコンパイルしたものです。
 操作対象として黄色の円を表示しています。『SneakyInput-JS-master/src』の『app.js』もご参照下さい。
 ジョイスティックで黄色の円の位置を操作できます。
 緑のボタンを押すと黄色の円が画面中央に移動します。
http://githubmorley.github.io/cocosprojects-pages/hellococos03/
 
以上です。

あとがき

 勉強も兼ねて『SneakyInput』をJavascriptで書き直してみました。部分的に変更してあるので、まったくオリジナルのままではありません。またMacでしか動かしていないので、同時押しの操作も試せていません。ボロや突っ込みどころは出てくるだろうなぁ。