覚え書きです。
開発環境
- 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が申し訳程度に置いてある
デプロイ
- ファイル更新のみで済む
- ブラウザキャッシュ対策は必要