Hello, guys! I am junior-developer of mobile apps and games (:
I created one small game (2048 clone with pictures) for Android (only) on html5 (js) with css animation. Many users told me in reviews that game crashed many times. I also have some trace info:
Quote
backtrace:
#00 pc 00000000 <unknown>
#01 pc 00b5159f /system/lib/libwebviewchromium.so
#02 pc 001dbdcf /system/lib/libwebviewchromium.so
#03 pc 001dc01b /system/lib/libwebviewchromium.so
#04 pc 001da25b /system/lib/libwebviewchromium.so
#05 pc 0000d280 /system/lib/libc.so (__thread_entry+72)
#06 pc 0000d418 /system/lib/libc.so (pthread_create+240)
I think it happens because game container have many tiles with png or it's bug with chrome and css animation. Also game has some performance issues on old devices.
To solve this problems I want to try convert my game to pixi js engine (canvas, webgl). I already convert game logic to pixi. Some examples:
// init pixi engine
function initPixi () {
renderer = new PIXI.autoDetectRenderer(280, 280, {backgroundColor: 0x101822});
document.getElementById('pixi-container').appendChild(renderer.view);
stage = new PIXI.Container();
requestAnimationFrame(animate);
}
function animate() {
requestAnimationFrame(animate);
renderer.render(stage);
}
// create game container
setup = function() {
// some code
g = new PIXI.Graphics();
g.beginFill(0x101822,1);
g.drawRect(0,0,280,280);
stage.addChild(g);
for (var i = 0; i < this.size; i++) {
for (var j = 0; j < this.size; j++) {
g.beginFill(0x999999,1);
g.drawRoundedRect(j * 68 + 10, i * 68 + 10, 58, 58, 3);
g.endFill();
};
};
};
// draw tile rectangle, add bg and png childs
function Tile (position, value) {
// some code
this.image = new PIXI.Graphics();
this.image.position.x = this.x * 68 + 10;
this.image.position.y = this.y * 68 + 10;
this.image.beginFill(qualityColorsArray[this.value],1);
this.image.drawRoundedRect(0,0,58,58,3);
this.image.endFill();
this.image.bg = PIXI.Sprite.fromImage('img/skins/skin-bg.png');
this.image.bg.width = 58;
this.image.bg.height = 58;
this.image.addChild(this.image.bg);
this.image.png = PIXI.Sprite.fromImage('img/skins/' + collectionIid + '/' + this.skin + '.png');
this.image.png.width = 58;
this.image.png.height = 58;
this.image.addChild(this.image.png);
}
// add tile to container
addTile = function(tile) {
// some code
g.addChild(tile.image);
}
// remove tile from container
removeTile = function(tile) {
// some code
g.removeChild(tile.image);
};
// move tiles (animate with TweenMax) and crate merged tile
moveTile = function(direction) {
// some code
if (merged){
TweenMax.to(tile.image, .2, {x: positions.next.x * 68 + 10, y: positions.next.y * 68 + 10, onComplete: removeTiles(merged.mergedFrom)});
self.grid.insertTile(merged);
} else {
TweenMax.to(tile.image, .2, {x: positions.farthest.x * 68 + 10, y: positions.farthest.y * 68 + 10});
moveTile(tile, positions.farthest);
}
}
My questions is:
-
On Genymotion Android Emulator instead of game container with tiles I see only black square. But game works (tiles moves, score updates etc). What's wrong? How can I debug game on Android emulator (I try already Canvas and WebGL render).
-
My PNGs are bigger that tile size (350px vs 58px). Pixi render images like with bad antialiasing
![pixi1.PNG]()
(pixi) vs ![pixi2.PNG]()
(css). How can I fix this?
-
How can I add animation for new tiles? I try to add some TweenMax functions after g.addChild() function but nothing happens. I want to recreate css animation (code bottom)
-
I move merged tiles with TweenMax.to() animation and call removeTiles function after complete. I think function must play move animation and then remove tiles from container but in real world it just remove tiles and render merged tile so I don't see any animation. With Not merged tiles animation works correct.
-
Do u have any other suggestions about game performance and correct work with canvas and sprites? It will be very helpful for me, newbie in game development ^^.
@-webkit-keyframes pop {
0% {
-webkit-transform: scale(0);
-moz-transform: scale(0);
}
50% {
-webkit-transform: scale(1.2);
-moz-transform: scale(1.2);
}
100% {
-webkit-transform: scale(1);
-moz-transform: scale(1);
}
}
Great thanks to community! Sorry for my bad English. I try to explain better if u don't understand something.
(pixi) vs 
(css). How can I fix this?
