Cocos2d-JS iOS8のSafari上でWebGLを使って動かす #cocos2d-JS

きっかけ

秋葉原Cocos2d-JSもくもく勉強会#12のネタ
iOS8のSafariでCocos2d-JSのアプリ表示したらそのままWebGL対応されるかと思ったら動かなくて、設定やら修正やらが必要だったのでメモ。

試したバージョン

cocos2d-js-v3.0

強制的にWebGLで動かす

project.jsonのrenderModeを2に設定する。
このrenderModeというプロパティの設定は、以下の様になっている。
0=自動判定、1=Canvas使用、2=WebGL使用

{
    "project_type": "javascript",

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

    "modules" : ["cocos2d"],

    "jsList" : [
        "src/resource.js",
        "src/app.js"
    ]
}

自動判定を効くようにする

renderModeを2に設定してしまうと、iOS7のSafariなど、WebGLに対応していないブラウザでは、アプリが表示できなくなってしまう。
renderModeに0にもどし、自動判定のロジックを修正することで、iOS8ならWebGLを使用し、iOS7以前ならWebGLを使わずに動作させることができる。

・renderModeを0に戻す。
・プロジェクトのframeworks/cocos2d-html5/CCBoot.jsの1521行目あたりを以下の様に修正する。

//修正前
if (userRenderMode === 1 
|| (userRenderMode === 0 && (sys.isMobile || notInWhiteList)) 
|| (location.origin == "file://")) {

//修正後
if (userRenderMode === 1 
|| (userRenderMode === 0 && 
(!document.createElement( 'canvas' ).getContext( 'experimental-webgl' ))) 
|| (location.origin == "file://")) {

修正内容としては、元のソースがモバイル端末であればWebGLを使用しない判定になっていた部分をWebGLが使用可能かどうかの判定に置き換えている。

結果

パーティクルのデモで比較するとWebGLにより描画のパフォーマンスが大幅に改善されていることが確認できる。左がiOS8で60fpsでている。右がiOS7で5fps程度しか出ていない。

//試したサンプル
var HelloWorldLayer = cc.LayerColor.extend({
    sprite:null,
    ctor:function () {
        this._super();
        var color = cc.color(128,128,128);
        this.setColor(color);

        var size = cc.winSize;

        this._emitter = new cc.ParticleFire();
        this.addChild(this._emitter, 10);

        //画像はcocos2d-jsのsamples/js-tests/resのものを使用
        this._emitter.texture = cc.textureCache.addImage("res/fire.png");

        this._emitter.x = cc.winSize.width / 2;
        this._emitter.y = cc.winSize.height / 2;

        return true;
    }
});

var HelloWorldScene = cc.Scene.extend({
    onEnter:function () {
        this._super();
        var layer = new HelloWorldLayer();
        this.addChild(layer);
    }
});

まとめ

今回は自動判定で行っているが実際の開発では、WebGLに対応していたらパーティクルを使用し、対応していなければオフにするなどの工夫が必要になりそう。

WebGLが使用できるようになったことで、Cocos2d-JSをスマートフォンのブラウザ上で動かす際にネックになっていたパフォーマンス部分がかなり解消される。

Cocos2d-JSをCocos2d-x上ではなくブラウザ上で動かすメリットは、ブラウザの機能（DOM、AJAX、それらを使用した豊富なライブラリ群）を利用しやすい点。ネイティブアプリの機能との連携が必要な場合は、PhoneGapなどと組み合わせてもよいかもしれない。（WebViewで動くかまだ試してないけど）

現状だとCocos2d-JSは、UnityやCocos2d-xに比べてマイナーな感じがするが、WebGLの普及につれて、注目度があがっていくかもしれない。