Posted at

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

More than 5 years have passed since last update.


きっかけ

秋葉原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程度しか出ていない。

2014-09-20 16.08.54.jpg

//試したサンプル

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の普及につれて、注目度があがっていくかもしれない。