Help us understand the problem. What is going on with this article?

Cocos2d-x js セットアップ + スマフォブラウザ周りの動作確認

More than 3 years have passed since last update.

覚え書きです。

開発環境

  • 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が申し訳程度に置いてある

デプロイ

  • ファイル更新のみで済む
  • ブラウザキャッシュ対策は必要
Why do not you register as a user and use Qiita more conveniently?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away