Cocos2d-x でジョイスティックをサポートする方法 (Windows/Mac)

2016年11月18日 TOME Leave a comment

こんにちは。

最近 Unity に押されがちですが、根強いファンのいる Cocos2d-x の Windows/Mac ビルドでジョイスティックをサポートする方法をまとめました。特に Windows では落とし穴があるので要注意です。

※ここでいうジョイスティックとは、物理的なジョイスティック（ゲームパッド）のことで、仮想ジョイスティックではありません。
※iOS/Android にはジョイスティックサポートがあるようです。

GLFW の関数を直接呼ぶ

「Cocos2d-x は Windows でも Mac でも動いてすごいわー」と思っていましたが、実装を見てみると内部では GLFW というオープンソースのライブラリーを使用しており、GLFW が Windows/Mac などをサポートしていました。その点で言えば、すごいのは GLFW です。

GLFW の API を見てみると、ジョイスティックサポートもちゃんとあります。ですので、Cocos2d-x に API がないなら GLFW の API を直接呼び出すのがよさそうです。

Cocos2d-x にすでに含まれている glfw3.h をインクルードし、以下の関数を使えば必要最低限の情報は取れます。

glfwJoystickPresent() – ジョイスティックが存在するか調べる
glfwGetJoystickButtons() – ジョイスティックの全ボタン状態を配列で取得
glfwGetJoystickAxes() – ジョイスティックの全スティック状態を配列で取得

例えば以下のような処理を、（scheduleUpdate を行った後）シーンのupdateメソッド内で行えばよいです。

	for (int i = 0; i <= GLFW_JOYSTICK_LAST; i++) {

		if (glfwJoystickPresent(i)) {

			int buttonNum;
			int axisNum;
			const unsigned char* buttons;
			const float* axes;

			buttons = glfwGetJoystickButtons(i, &buttonNum);
			axes = glfwGetJoystickAxes(i, &axisNum);
      
			do_something();
		}
	}

for (int i = 0; i <= GLFW_JOYSTICK_LAST; i++) {

if (glfwJoystickPresent(i)) {

int buttonNum;

int axisNum;

const unsigned char* buttons;

const float* axes;

buttons = glfwGetJoystickButtons(i, &buttonNum);

axes = glfwGetJoystickAxes(i, &axisNum);

do_something();

}

Mac 版ではここまでです。意外と簡単にジョイスティックサポートできましたね！

Windows 版はこのままでは動作しませんので、以下のような対処が必要でした。

以下、Windows版のみの問題

Windowsでは、普通に上記の処理を行っても、glfwJoystickPresent() から 0 が返ってきてしまい、うまくいきません。どうやら、Cocos2d-x 本体 (libcocos2d.dll) がスタティックライブラリ版の GLFW (glfw3.lb) をリンクしていて、それとは別にプログラム本体 (xxxx.exe) もスタティックライブラリ版の GLFW をリンクすることになるので、GLFW の実態が複数存在してしまっているのが原因のようです。

解決方法はいくつかありそうですが、とりあえずDLLバージョンのGLFW使用することで回避できました。

GLFW DLL 版のダウンロード

GLFWは github で公開されており、過去のバージョンも含めてバイナリ版がダウンロードできます。

使用している Cocos2d-x のバージョンによって、使われている GLFW のバージョンが異なりますので注意してください（Cocos2d-x v3.12 までは GLFW3.0.4、Cocos2d-x v3.13 以降は GLFW3.2 が使われています）。

ここでは、以下のページから glfw-3.2.bin.WIN32.zip をダウンロードしました。

https://github.com/glfw/glfw/releases

ダウンロードした zip ファイルを展開し、使用している Visual Studio のバージョンにあった glfw3.dll と glfw3dll.lib を、Cocos2d-x の cocos2d\external\glfw3\prebuilt\win32 にコピーします。

ビルドパラメータの変更

Visual Studio 上で、プロジェクト libcocos2d および自分のプロジェクト（ここでは JoystickSample）の両方のビルドパラメータに以下の変更を行います。

(1) [C/C++]-[プリプロセッサ]-[プリプロセッサの定義] に GLFW_DLL を追加

(2) [リンカー]-[入力]-[追加の依存ファイル] に glfw3dll.lib を追加

（残念ながら libcocos2d のリビルドが必要です。５分くらいでしょうか・・・。）

ここまでやれば、ジョイスティックが exe 側からでも見えるはずです。

最低限の動作が確認できるサンプル JoystickSample が github に置いてありますので、参考にして下さい。win32版です。

ジョイスティックが１６本まで認識されて、ボタンとスティックの状態がリアルタイムに表示されます。

この例では、ジョイスティックが２本認識されています。
１つ目のジョイスティックの１番と４番のボタンと、２つ目のジョイスティックの１４番のボタンが押されています。

どうも Cocos2d-x の Windows ビルドは、フルスクリーン対応も中途半端だったり、ちょこちょこ抜けがある気がして不安ですが、がんばって行きましょう。

Cocos2d-x/JS

Cocos2d-x陣営の切り札？Cocos Creator を触ってみました

2016年3月11日 TOME One comment

こんにちは。

ゲームアプリ開発のプラットフォームとしては、１年くらい前までは Cocos2d-x と Unity が半々くらいで、残り少数（Flash, Unreal Engine など）他のものが占めていた印象があります。（個人的な印象）

しかし Unity が去年(2015年) Unity 5 のリリース時にほとんどの機能を無料で使用できるように改定したあたりから、Unity のシェアが急拡大してきた気がします。

Cocos2d-x はこのまま消えてしまうのか・・・。

一部でそんな悲観的な憶測すら流れていましたが、2016年3月7日になって、Cocos Creator なる Cocos2d-x をベースにした統合開発環境のパブリックベータ版が公開されました。

今日さっそくダウンロードして、１日触ってみましたのでその印象をまとめてみました。

ダウンロード

以下のページからダウンロードできます。

Cocos Creator Public Beta

http://blog.cocos2d-x.org/2016/03/announcing-the-cocos-creator-public-beta/

インストール

試したのは Mac 版バージョン 0.7.1 です。ダウンロードした zip ファイルを解凍すると app ファイルができます。（ちょっと恐いですが）app ファイルを /Application に移動させればインスール完了です。

起動

起動するとログインを求められます。Cocos2d-x のデベロッパー登録してある方は、そのメールアドレスを使ってログインできるはずです。そうでない方はアカウントを作成しないと起動できないようです。

空のプロジェクトか、Hello World などのサンプルプロジェクトが選べます。

試したこと

試しながらツイートしていたので、それを引用しながら紹介します。(^^;

画面デザイン／アニメーションの作成

おお、コードを一切書かずにアニメーションできた！！
Un◯ty みたいだ！（笑#cocoscreator #cocos2dx pic.twitter.com/VVloawiXF9

— TOME (@shinhirota) 2016年3月11日

イベントの取得

簡単にマウスイベントとれた
いいかんじ#CocosCreator #cocos2dx pic.twitter.com/5z3DtJ4kLZ

— TOME (@shinhirota) 2016年3月11日

別アニメーションの起動／動的なノードの生成（プレハブの利用）

昔作ったアプリの素材で
・アニメ再生
・クリックイベント取得
・別アニメ再生
・動的なノード生成
までコード10行くらいでできた
「プレハブ」って概念できたけど、Unityをパクってますよね？ (^^;#CocosCreator pic.twitter.com/yQSsYTiOVE

— TOME (@shinhirota) 2016年3月11日

試していないこと

ネイティブへのビルドは試しませんでした。

メニューを見る限り、

Web
iOS
Android
Mac OS X

など向けにビルドができるようなのですが、今回は Web でのビルドしか試しませんでした。

良さそうな点

以前 Cocos Builder を試したのですが、細かいバグが多く、Cocos2d-x/JS でのコーディングも結構必要でした。

しかし Cocos Creator に至って、かなりコーディングの必要が減っています。可能性を感じる環境です。

気になった点

「パブリックベータ」なので仕方ないのかもしれませんが、動作があまり安定していない気がしました。ウインドウを開き直すと動きが改善したりしたことは何度もありました・・・。

効果音鳴らそうと思ってドキュメントの Audio Asset という項を見たのですが「Coming Soon…」と書かれていました。効果音を鳴らすには結構コードを自前で書かないといけないかもしれません。

スクリプトは Java Script と（未確認ですが）Coffee Script にのみ対応しているようです。

最後に

まだ１日しか触っていないのですが、第一印象としてはかなり使えそうでした。

このツールをきっかけに Cocos2d-x 勢が打倒 Unity を果たす日が来るかもしませんよ！

Cocos2d-x/JS

Cocos2d-JS の Scale9Sprite で画像を伸縮する代わりにタイルする方法

2015年10月13日 TOME Leave a comment

こんにちは。

Cocos2d-x/JS では Scale9Sprite という、フレーム画像を９分割し、必要な大きさに応じて角や縁の比率を保ったまま伸縮してくれるクラスがあります。

これは非常に便利なのですが、元画像と使用サイズがあまりにも違いすぎると、伸縮が目立ってしまい、綺麗にならないことがあります。

そこで角や縁以外の画像を伸縮するのではなく、サイズはそのままで繰り返し配置（タイル）してみたところ、かなり改善したので、やったことをメモします。

尚、Cocos2d-x でもできるはずですが、JS のようにクラス継承ルールがゆるくない（private/protected 指定がある) ので、同じように簡単にできるかどうかは不明です。

確認した環境

Cocos2d-JS v3.2

Scale9SpriteTiled

既存の cc.Scale9Sprite を継承して “Scale9SpriteTiled” を作りました。Scale9Sprite が、各辺と中心部を伸縮するのに対して、この Scale9SpriteTiled では各画像をタイルすることで全体のサイズ変更を実現します。

変更を少なく抑えるために現在の Scale9Sprite にべったり依存した実装をしたので Cocos2d-JS のバージョンが上がった際に動かなくなる可能性はありますが、まあ大丈夫でしょう・・。

<Scale9SpriteTiled.js>

_updatePositions というメソッドは、Scale9Sprite のサイズが変更された時に呼ばれるので、これをフックして必要な処理を行いました。

_top, _bottom, _left, _right, _centre というのは Scale9Sprite のおいて、９分割されたスプライトのそれぞれ上、下、左、右、中央部分です。四隅に対しては何も変更する必要はありません。

_addChildInsteadOfScaling というメソッドで、各スプライトの拡大率 (scale) を元に、自分自身の画像を必要な数だけ複製してならべます。サイズがぴったりになることはまれなので、最後半端なサイズに対して cc.Sprite のコンストラクタに範囲を指定してサイズを合わせます。

最後、もともとの引き伸ばされているスプライトは不要なので、不可視にします。

使用例

実際に現在制作中のゲームに使用する予定の枠の素材でやってみます。

元画像

これを Scale9Sprite と Scale9SpriteTiled で拡大した結果が以下の画像です。

Scale9Sprite

Scale9SpriteTiled

この画像では Scale9SpriteTiled のほうが綺麗になってますね！

以前『ネット上で公開されているコードをコピペする前に確認すべきこと』とか偉そうなことを書いたので名言しておきますが、この Scale9SpriteTiled.js は自由にコピペしてお使いください。その際、一声かけていただけると嬉しいですが、必須ではありません。

今回は以上です。

Cocos2d-x/JS

Cocos2d-x 公式ソースコードに自分のバグフィックスが取り込まれた

2015年7月2日 TOME Leave a comment

先日 Cocos2d-x の一部、Cocos2d-JS のバグ（彼らは仕様と言うかもしれない）を見つけたので、修正案を GitHub 上で公式に提案（プルリクエスト）してみました。

結果、取り込んでもらえましたので、その時やったことを紹介します。

バクの内容

JS の機能の一つに、JavaScript 側から Objective-C の関数が呼び出せるというものがあります。Cocos2d-JS v3. 6.1 現在、その引数が BOOL 型だったときに値がうまくわたらないので、NSNumber型を使わなければならないという制限がありました。

[参考]
HOW TO CALL OBJECTIVE-C FUNCTIONS USING JS ON IOS/MAC
http://cocos2d-x.org/docs/manual/framework/html5/v3/reflection-oc/en

JavaScript には int と float の区別はなく、数値は “number” 型なので、int や float はNSNumber を使わなければならないのはよいです。しかし JavaScript でも bool は “boolean” 型があるので、NSNumber を使わなければならないのは違和感がありました。

ソースコードを確認したところ、以下の部分で JavaScript から受けた引数を NSInvocation の引数に変換しているのですが、数値も bool も区別せずに処理していました。

<cocos2d-x/cocos/scripting/js-bindings/manual/platform/ios/JavaScriptObjCBridge.mm>

[gistcode data_gist_id=”d694618edd6f08a811a3″ data_gist_highlight_line=”114″ data_gist_line=”110-119″]

これを isKindOfClass を使い、bool の時だけ特別扱いします。これで BOOL 型を引数とする C++ の関数を、修正することなく呼べるようになりました。

[gistcode data_gist_id=”0b75dc16272371a4e2a5″ data_gist_highlight_line=”114-125″ data_gist_line=”110-129″]

やったこと

バグを見つけるまではよくあることですが、今回は修正案を公式に提案するところまでやってみました。会社のコードとかではよくやってましたが、天下の Cocos2d-x 公式レポジトリに修正案を出すのは緊張します。変な日本人と思われたくない。

修正のコミット

前述の修正を、自分のローカルレポジトリでコミットし、GitHub の自分のクローンしたレポジトリ（自分の場合はshinhirota/cocos2d-x）に push しておきます。

プルリクエスト

フォーク（クローン）してある自分のレポジトリで修正のコミットを済ませていれば、Web上で簡単にできます。Cocos2d-x の開発元は中国の会社なので、レポジトリの管理も中国人エンジニアが行っているようです。詳しいコミットの説明を、英語（か中国語）で添える必要があります。

説明はマークダウンで記述できるので便利です。十分な説明を書かないと英語で質問メールが来て、それに返事をしたりして時間がかかるか、最悪、無視される恐れがあります。

自分の場合は「こんな問題があって、このように直したら動作しました」のようなことを、サンプルコードを添えて、30分くらいかけて書きました。１００行の説明より１つのサンプルコードです。

プルリクエストを登録すると、レポジトリの管理者に通知が行くので、運が良ければあとは何もしなくてよいです。

自分の場合は、最初 Cocos2d-x とCocos2d-JSのレポジトリが統合されていたのをしらずに Cocos2d-JS のほうにプルリクエストを登録したら「Cocos2d-xのほうに登録してくれ」と言われてしまいましたが、あとは何もせずにすみました。

Cocos2d-x の管理者が、担当者にレビューを依頼し、その担当者のオーケーが出たので管理者がメインブランチである “v3” にマージしてくれました。やった！

Fixed iOS/JS-Bind callStaticMethod() with bool arg
https://github.com/cocos2d/cocos2d-x/pull/12598

~~Cocos2d-JS の次のバージョン (v3.6.2?) には取り込まれるはずなので楽しみです。~~

[2015年8月27日追記] 本修正が Cocos2d-x v3.8 (JSの一部がxに統合されたため、x からのリリース) に取り込まれてリリースされました！

まとめ

Unity人気に押され気味の印象がある Cocos2d-x/JS ですが、オープンソースであると言うのは Unity にはない魅力ですね！

Cocos2d-JS で広告を表示する (iOS編) その２

2015年6月21日 TOME Leave a comment

Cocos2d-JS で広告を表示する (iOS編) その１で単純な表示の方法を紹介したので、今回は位置の調整、表示／非表示を行う手順をまとめます。

Cocos2d-JS が生成するプロジェクトファイルは Interface Builer / Storyboard を使用していないので、ここでも使用しませず、ソースコードのみで実現します。

使用した環境

OS: Mac OS X 10.10.3
Xcode: 6.3.2
Cocos2d-JS: v3.6.1
Google Mobile Ads SDK iOS: 7.3.1

位置の調整

固定の位置で良い場合は、GADBannerView の frame プロパティを設定すれば反映されます。以下は、画面の下部中央に配置する場合の例です。

<./ios/AppController.mm>

    {
        GADBannerView *gadView = [[GADBannerView alloc] initWithAdSize:kGADAdSizeBanner];

        gadView.adUnitID = @"ca-app-pub-3940256099942544/2934735716";  // Official Test ID
        gadView.rootViewController = viewController;
        [gadView loadRequest:[GADRequest request]];

        [viewController.view addSubview:gadView];

        // gadView を画面下部の中心に配置
        CGRect contentFrame = viewController.view.bounds;
        CGRect bannerFrame = gadView.frame;
        bannerFrame.origin.y = contentFrame.size.height - bannerFrame.size.height;
        bannerFrame.origin.x = contentFrame.size.width / 2 - bannerFrame.size.width / 2;
        gadView.frame = bannerFrame;
    }

ただし画面回転に対応したり、親ビューがレイアウトを変更したりする場合、ビューコントローラーの viewDidLayoutSubviews メソッドをオーバーライドするなどの対処が必要ですが、ここでは省略します。

うまく動作すれば、広告が画面の下部中央に表示されます。

実行結果

表示／非表示

やっと Cocos2d-JS 特有の話になります。

ゲームなどで、タイトル画面では広告を表示し、ゲーム中は広告を非表示にしたりしたいことがあると思います。そのために、まずは JavaScript から C++ の関数を呼ぶ必要があります。Cocos2d-JS では JavaScript 側に jsb.reflection.callStaticMethod という関数が用意されています。名前の通り、スタティックメソッドしか呼びだせません。

C++側

まずC++側で、任意のクラスのスタティックメソッドを用意します。

そのためのクラスを作っても良いですが、ここでは変更を少なく抑えるため既存のクラス AppController に isAdVisible と setAdVisible というスタティックメソッドを追加します。

C++側では、戻り値、引数として BOOL, 数値 (NSNumber), 文字列 (NSString) が使用できます。ただし現在の Cocos2d-JS の実装の制限として、BOOL の引数を受ける場合、NSNumber* で受けて boolValue に変換しないとうまく動作しないので注意してください。（将来改善されるかもしれません）

<./ios/AppController.h>

@interface AppController : NSObject <UIAccelerometerDelegate, UIAlertViewDelegate, UITextFieldDelegate,UIApplicationDelegate>
{
    UIWindow *window;
    RootViewController    *viewController;
}

// 追加
+ (void) setAdVisible:(NSNumber*) isVisible;
+ (BOOL) isAdVisible;

@end

<./ios/AppController.mm>

// gadView をローカル変数ではなくスタティック変数にする
static GADBannerView* gadView = nullptr;

@implementation AppController
 :
(中略)
 :
+ (void) setAdVisible:(NSNumber*) isVisible {
    gadView.hidden = ([isVisible boolValue] == false);
}

+ (BOOL) isAdVisible {
    return gadView.hidden == false;
}

@end

JavaScript側

Cocos2d-JSのサンプルのメニューボタンを押したときに、先ほど作成したC++ のメソッドを呼び出し、表示／非表示をトグルできるようにします。

<./src/app.js>


var HelloWorldLayer = cc.Layer.extend({
    sprite:null,
    ctor:function () {
        //////////////////////////////
        // 1. super init first
        this._super();

        /////////////////////////////
        // 2. add a menu item with "X" image, which is clicked to quit the program
        //    you may modify it.
        // ask the window size
        var size = cc.winSize;

        // add a "close" icon to exit the progress. it's an autorelease object
        var closeItem = new cc.MenuItemImage(
            res.CloseNormal_png,
            res.CloseSelected_png,
            function () {
                cc.log("Menu is clicked!");

                // 現在の表示状態を取得
                var isVisible = jsb.reflection.callStaticMethod(
                    "AppController",
                    "isAdVisible"
                );

                // 表示／非表示を設定
                jsb.reflection.callStaticMethod(
                    "AppController",
                    "setAdVisible:",
                    isVisible == false
                );

            }, this);
        closeItem.attr({
            x: size.width - 20,
            y: 20,
            anchorX: 0.5,
            anchorY: 0.5
        });

        var menu = new cc.Menu(closeItem);
        menu.x = 0;
        menu.y = 0;
        this.addChild(menu, 1);

うまくいけば右下のメニューボタンを押すたびに広告の非常／非表示が切り替わります！

参考

HOW TO CALL OBJECTIVE-C FUNCTIONS USING JS ON IOS/MAC
http://cocos2d-x.org/docs/manual/framework/html5/v3/reflection-oc/en

Cocos2d-JS で広告を表示する (iOS編) その１

2015年6月20日 TOME One comment

こんにちは。Cocos2d-JS で広告を表示したときの手順をまとめます。

概要

今回は、とりあえず AdMob を表示するまでをまとめます。実際のアプリに組み込む場合、位置の調整、表示・非表示などの制御が必要だと思いますが、それについては次回以降。

使用した環境

OS: Mac OS X 10.10.3
Xcode: 6.3.2
Cocos2d-JS: v3.6.1
Google Mobile Ads SDK iOS: 7.3.1

手順

ただ単にバナー広告をずっと表示していればよい場合は、JavaScript 側ではなにもせず、iOS 上の Objective-C++ 側の View に AdMob の GADBannerView を貼り付ければよいです。

JavaScript (Cococs2d-JS) とは関係のない話になってしまいますが、以下のように AdMob を組み込みます。

AdMob SDK をダウンロード

以下のページから googlemobileadssdkios.zip をダウンロードし、解凍します。

Downloads | Mobile Ads SDK | Google Developers
https://developers.google.com/mobile-ads-sdk/download?hl=ja#downloadios

zip の中身はこのようになっています。

Xcode プロジェクトに追加

広告を表示したい Cocos2d-JS プロジェクトに含まれる Xcode プロジェクトに、ダウンロードした SDK を追加します。

（参考：Cocos2d-JS のサンプルを動かしてみる (iOS編))

Xcode でプロジェクトを右クリックし、[Add Files to “xxxx”…] を選びます。

先ほどダウンロードし、展開しておいた GoogleMobileAds.framework を選びます。この際、Copy items if needed のチェックはON、Added folders は Create groups、Add to targets は xxxxx iOS のみチェック、にします。

Framework の追加

AdMob 公式ページの最新の手順では @import 文を使えば Framework は自動的に追加されると書かれていますが、Cocos2d-JS/x のプロジェクトでは Objective-C++ (.mmファイル) を使っているからわかりませんが、@import がうまくいきませんでした。

ここでは手動で Framework を追加する方法でやります。以下の Framework をプロジェクト設定からリンク対象に追加します。

SystemConfiguration
StoreKit
MessageUI
EventKitUI
EventKit
AdSupport
CoreTelephony
CoreMedia

AdView 表示コードを追加

最低限、AppController.mm に以下のコードを追加すれば AdMob 広告が表示されます。

./ios/AppController.mm

#import "GoogleMobileAds/GADRequest.h"    //追加
#import "GoogleMobileAds/GADBannerView.h" //追加

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{

    // didFinishLaunchingWithOptions 内に以下のコードを追加
    {
        GADBannerView *gadView = [[GADBannerView alloc] initWithAdSize:kGADAdSizeBanner];

        gadView.adUnitID = @"ca-app-pub-3940256099942544/2934735716";  // Official Test ID
        gadView.rootViewController = viewController;
        [gadView loadRequest:[GADRequest request]];

        [viewController.view addSubview:gadView];
    }

}

実行結果

うまくいけば画面左上部に AdMob のテストバナーが表示されます。

次回「状況に応じて表示／非表示を切り替える場合」についてまとめる予定です。

参考

AdMob iOS ガイド　(オフィシャルドキュメント)
https://developers.google.com/mobile-ads-sdk/docs/admob/ios/quick-start?hl=ja

Cocos2d-JS で画面サイズを変更する

2015年6月16日 TOME Leave a comment

ブラウザ上のキャンバスサイズ

HTMLの canvas 要素として指定します。Cocos2d-JS のサンプルでは ./index.html で指定されているので、所望のサイズに変更します。

./index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Cocos2d-html5 Hello World test</title>
    <link rel="icon" type="image/GIF" href="res/favicon.ico"/>
    <meta name="apple-mobile-web-app-capable" content="yes"/>
    <meta name="full-screen" content="yes"/>
    <meta name="screen-orientation" content="portrait"/>
    <meta name="x5-fullscreen" content="true"/>
    <meta name="360-fullscreen" content="true"/>
    <style>
        body, canvas, div {
            -moz-user-select: none;
            -webkit-user-select: none;
            -ms-user-select: none;
            -khtml-user-select: none;
            -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
        }
    </style>
</head>
<body style="padding:0; margin: 0; background: #000;">
<script src="res/loading.js"></script>
<canvas id="gameCanvas" width="800" height="450"></canvas>
<script src="frameworks/cocos2d-html5/CCBoot.js"></script>
<script cocos src="main.js"></script>
</body>
</html>

Cocos2d 内部のデザイン画面サイズ（ピクセル解像度）

Cocos2d 内部でピクセルデータを処理する際に使用される画面サイズです。

Cocos2d-JS のサンプルでは ./main.js で cc.EGLView.setDesignResolutionSize() メソッドによって指定されています。ほとんどの場合、さきほどブラウザ上のキャンバスサイズに指定したものと同じサイズを指定することになると思います。このメソッドの第3引数 Resolution Policy については以下で説明します。

./main.js

cc.game.onStart = function(){
    if(!cc.sys.isNative && document.getElementById("cocosLoading")) //If referenced loading.js, please remove it
        document.body.removeChild(document.getElementById("cocosLoading"));

    // Pass true to enable retina display, disabled by default to improve performance
    cc.view.enableRetina(false);
    // Adjust viewport meta
    cc.view.adjustViewPort(true);
    // Setup the resolution policy and design resolution size
    cc.view.setDesignResolutionSize(800, 450, cc.ResolutionPolicy.SHOW_ALL);
    // The game will be resized when browser size change
    cc.view.resizeWithBrowserSize(true);
    //load resources
    cc.LoaderScene.preload(g_resources, function () {
        cc.director.runScene(new HelloWorldScene());
    }, this);
};
cc.game.run();

Resolution Policy

Cocos2d-JS は内部のデザイン画面サイズと表示先（ブラウザ上のキャンバスサイズが異なる場合の解決ポリシーを以下から選択できます。基本的には SHOW_ALL にしておけば大抵よいと思います。

EXACT_FIT
NO_BORDER
SHOW_ALL
FIXED_HEIGHT
FIXED_WIDTH
UNKNOWN

EXACT_FIT

全体表示：◯
縦横比：×
余白なし：◯
ドットバイドット：×

キャンバスいっぱいに拡大縮小されます。縦横比率は保持しません。余白を作りたくない場合に使えるかもしれません。

NO_BORDER

全体表示：×
縦横比：◯
余白なし：◯
ドットバイドット：×

高さか幅の大きい方に合わせて拡大縮小されます。縦横比は保持しますが、全体が表示されないことがあります。余白を作りたくない場合に使えるかもしれません。

SHOW_ALL

全体表示：◯
縦横比：◯
余白なし：×
ドットバイドット：×

常に全体が表示されるように拡大縮小されます。縦横比は保持されます。全体表示しつつ縦横比が保持されるので個人的にはほぼこれの一択だと思います。

FIXED_HEIGHT

全体表示：×
縦横比：×
余白なし：×
ドットバイドット：×

常に上端は上端に、下端は下端に表示されるように拡大縮小されます。縦横比は保持されません。全体が表示されないことがあります。使い所がわかりません。

FIXED_WIDTH

全体表示：×
縦横比：×
余白なし：×
ドットバイドット：×

常に左端は左端に、右端は右端に表示されるように拡大縮小されます。縦横比は保持されません。全体が表示されないことがあります。使い所がわかりません。

UNKNOWN

全体表示：×
縦横比：◯
余白なし：×
ドットバイドット：◯

拡大縮小が発生しません。名前からするとちょっとハッキング的な使い方なのですが、ピクセル（ドット）の一つ一つを等間隔で表示したいドット絵マニアの方にとっては使いどころがあるかもしれません。

※ GitHub に動作するサンプルが公開してあります！
https://github.com/shinhirota/cocos2djs-sample/tree/47cf3117953a862e2b5042ee13a5bb9341b4d5cd

Cocos2d-x/JS

ラジウム・クリッカー（ブラウザ版）のソースコードを公開しました

2015年6月15日 TOME One comment

こんにちは。

先日ブラウザ版を公開した「ラジウム・クリッカー」ですが、Cocos2d-JS の普及およびブログの宣伝のためにソースコードを公開しました！

ラジウム・クリッカー（ブラウザ版）ソースコード – GitHub
https://github.com/shinhirota/radiumclicker

Cocos2d-JS にならいラジウムクリッカーはMIT ライセンスでの公開です。一言で言うと、著作権表示さえすれば、無制限に使用して構いませんが、作者はいかなる責任も負わないというものです。

今年１月ごろ作成したコードですが、そのあと比較的しっかりとしたアプリである「ねずみハンターキャシー」の制作でがっつり Cocos2d-JS を使ったせいか、今見ると結構恥ずかしい実装が随所にありますが、それは割り切りました。(^^;

参考

ラジウム・クリッカー (ブラウザ版)
http://tomeapp.jp/apps/radiumclicker/

ラジウム・クリッカーのブラウザ版を公開しました

2015年6月15日 TOME Leave a comment

こんばんは。

今年2月にCocos2d-JSで制作し、iOS/Androidアプリとしてリリースした「ラジウム・クリッカー」でしたが、せっかく JS で作っていたのでブラウザ版を公開します。

元祖リケジョの星、キュリー夫人になりきってラジウムを抽出しましょう！
インストール不要ですぐ遊べます！

↓ラジウム・クリッカー (ブラウザ版) ↓
http://tomeapp.jp/apps/radiumclicker/

ブラウザ版の特典として、キーボード入力もクリックと見なすようにしておきました！ (^^;

「ブラウザ版があれば、iOS/Android からもブラウザ経由から実行できるから、アプリ版もういらないじゃん！」と思われるかもしれませんが、アプリ版は SpiderMonkey という C++ で JavaScript を解釈するプラットフォームで動作しているので、かなり軽いです。このゲームくらいではあまり差が出ませんが、もっと多くの処理を行いたい場合は、やはりアプリ版をビルドし、使用すべきです。

その辺の紹介も時間があればしてみたいです。