覚え書きです。

開発環境

cocos2d-x 3.10
OSX 10.11.4 (El Capitan)
Google Chrome 49.0.2623.87

セットアップ

git submodule を入れておかないとプロジェクト生成時に必要なファイルがコピーされない。

$ pushd cocos2d-x
$ git submodule update --init --recursive
$ popd
$ cd ${WORKSPACE}
$ cocos new SandBoxWeb -p com.smith.sandbox.web -l js -d .

起動確認

ローカルサーバにビルドされたアプリがブラウザで開かれる

$ cocos run -p web

サーバ再起動無しでjsへの変更を反映したい場合、ブラウザリロードで反映される。
キャッシュが利用される場合は強制リロードすればOK。
(chromeであれば shift+cmd+R など)

コンパイル対象ファイルを編集

poject.json に対象ファイルを追記する。
ここは自動生成したい。

${PROJECT_ROOT}/poject.json

{
    "project_type": "javascript",

    "debugMode" : 1,
    "showFPS" : true,
    "frameRate" : 60,
    "noCache" : false,
    "id" : "gameCanvas",
    "renderMode" : 0,
    "engineDir":"frameworks/cocos2d-html5",

    "modules" : ["cocos2d"],

    "jsList" : [
        "src/resource.js",
        "src-es5-transpiled/app.js",          // added
        "src-es5-transpiled/another_scene.js" // added
    ]
}

es5 で書いてみる

パッケージインストール

$ npm init
... # 適当に
$ npm install gulp --save
$ npm install gulp-babel --save
$ npm install babel-preset-es2015 --save
$ echo '{ "presets": ["es2015"] }' > .babelrc

タスク定義

gulpfile.js

var gulp  = require("gulp");
var babel = require("gulp-babel");

var path = require("path");

var es5SrcDir  = path.join(__dirname, "src-es5");
var es5DestDir = path.join(__dirname, "src-es5-transpiled");

gulp.task("transpile", () => {
    return gulp.src(path.join(es5SrcDir, "*.js"))
        .pipe(babel())
        .pipe(gulp.dest(es5DestDir));
});

Scene の実装は割愛。

transpile & run

$ gulp transpile
$ cocos run -p web

その他

スマフォブラウザでの動作確認

Android 5.0.2 / Zenfone2 Lazor / Chrome

スプライトアニメーションちゃんと動く
ローカルストレージ機能する
フルスクリーンになってくれる
サウンド再生される

Android 5.0.2 / Zenfone2 Lazor / android.webkit.WebView (アプリ内ブラウザ)

動かない

iOS 9.1 / iPhone / Safari

スプライトアニメーションちゃんと動く
ローカルストレージ機能する
フルスクリーンにならない (IOS 9から？)
ナビゲーションバーとかが描画領域にかぶる
音声フォーマットの認識が厳しい
適当なフリー素材のmp3のBGMが再生されなかった
iTunesで当該ファイルを読み込んで、mp3で書き出したら再生されるようになった。
イヤフォンジャック経由でないと音がならない

iOS 9.1 / iPhone / UIWebView (アプリ内ブラウザ)

スプライトアニメーションちゃんと動く
サウンド再生が怪しい

iOS 9.0.3 / iPod6 / Safari

スプライトアニメーションちゃんと動く
ローカルストレージ機能する
フルスクリーンにならない (IOS 9から？)
ナビゲーションバーとかが描画領域にかぶる
イヤフォンジャック経由でも音がならない(バグ？)

ES対応状況

公式非対応、自前で頑張れ

パフォーマンス(描画)

条件

SpriteSheetでアニメーションするNodeを1000個配置。
Batchなどの利用は明示していない。

Zenfone2 Lazor / Android 5.0.2) / Chrome

10 - 15 fps

ちなみに、Node 500個で 25fps 程度。

iPod6 / iOS 9.0.3) / Safari

30 fps

通信系API

HTTP通信用APIがない
socket.ioが申し訳程度に置いてある

デプロイ

ファイル更新のみで済む
ブラウザキャッシュ対策は必要