Cocoon JS and Kinetic JS

Question

I am developing an educational game for children (D&D, colors, shapes, numbers, etc) and I am using KineticJS for that purpose. It runs fine on Ipad 4 and Iphone 5, but on Android devices it runs with a very low framerate (Galaxy Tab 2 and Galaxy S2). I tried to compile the app with Cocoon JS to enable canvas acceleration, but it gets stuck on launch screeen (with phonegap build it runs fine).

Do I have to make any changes in the Kinetic source code to build on CocoonJS? Are there any alternatives to improve Kinetic performance on android devices?

have you tried to set your viewport to the following: ``? This makes a huge difference in performance if you scale your game up to `window.innerWidth`, because of the fact, that mobile browsers use a standard-viewport-width of 960px or so ;) — irie, Jun 26 '13 at 09:27
Hi! I change my viewport tag (``) with yours, but the performance is the same on the galaxy tab. — Iker Vázquez, Jun 26 '13 at 09:44

score 0 · Answer 1 · answered Apr 23 '14 at 10:31

Cocoonjs cannot render the parent container (its a div). You need to overwrite the prototype of Kinetic.

Kinetic.Stage.prototype._buildDOM = function() {
this.content = this.attrs.container;
this.hitCanvas = new Kinetic.Canvas(0, 0, true);

this.bufferCanvas = new Kinetic.SceneCanvas({
    pixelRatio: 1
});

this.bufferHitCanvas = new Kinetic.HitCanvas();

this._resizeDOM();

};

Kinetic.Stage.prototype._getContentPosition = function() { var rect = this.content.getBoundingClientRect ? this.content.getBoundingClientRect() : { top : 0, left : 0 }; return { top: rect.top, left: rect.left }; };

Then build your main stage as this.

this.stage = new Kinetic.Stage({width: 960, height: 500, container: document.body});

Cocoon JS and Kinetic JS

1 Answers1