Phaser tweens perfomance on mobile

[andreyko]

Hi guys,

In one of the methods of game object class I have following code which executed on object click:

var tween1 = game.add.tween(this.sprite.scale).to({x: 0}, 100, Phaser.Easing.Elastic.Linear);
var tween2 = game.add.tween(this.sprite.scale).to({x: 1}, 100, Phaser.Easing.Elastic.Linear);
var tween3 = game.add.tween(this.shadow.scale).to({x: 0}, 100, Phaser.Easing.Elastic.Linear);
var tween4 = game.add.tween(this.shadow.scale).to({x: 1}, 100, Phaser.Easing.Elastic.Linear);

tween1.chain(tween2);
tween3.chain(tween4);

tween1.onComplete.add(function() {
    me.sprite.loadTexture('fruit-' + me.index);
});

tween4.onComplete.add(function() {
    me.closed = false;
    me.level.onOpenBoxAnimEnd.dispatch(me);
});

tween1.start();
tween3.start();

When having 4 of these object in the scene it performs nice, but 30 objects cause performance to be very low (notice that only one object is animated, not all 4 or 30).

So maybe I'm doing smth generally wrong?

Tested on 8-cores 1.7 HHz CPU.

[WombatTurkey]

I don't really see anything out of the ordinary..check game.tweens._tweens to make sure there is no leakage all I can think of.. srry

[andreyko]

3 hours ago, WombatTurkey said:

I don't really see anything out of the ordinary..check game.tweens._tweens to make sure there is no leakage all I can think of.. srry

Thanks man, checked it, have only 2 tweens running simultaneously..

[drhayes]

How are these tweens created? How do you know you only have 2 running simultaneously? Are you calling Phaser.TweenManager.getAll and counting what it hands back to you?

[andreyko]

10 hours ago, drhayes said:

How are these tweens created? How do you know you only have 2 running simultaneously? Are you calling Phaser.TweenManager.getAll and counting what it hands back to you?

They are created in first 4 lines of code snippet

var tween1 = game.add.tween(this.sprite.scale).to({x: 0}, 100, Phaser.Easing.Elastic.Linear);
var tween2 = game.add.tween(this.sprite.scale).to({x: 1}, 100, Phaser.Easing.Elastic.Linear);
var tween3 = game.add.tween(this.shadow.scale).to({x: 0}, 100, Phaser.Easing.Elastic.Linear);
var tween4 = game.add.tween(this.shadow.scale).to({x: 1}, 100, Phaser.Easing.Elastic.Linear);

Yes, I'm calling  Phaser.TweenManager.getAll(), it's the same as checking game.tweens._tweens

[drhayes]

I was wondering if the tweens are hanging around, or if you're creating way more than you thought -- those both might explain any performance problems. I'm kinda stumped and don't have a lot of experience optimizing for mobile unfortunately.

[andreyko]

Seems like the problem is caused by Cordova Webview, cause when running web version of the game on the mobile animation is perfect.

[icp]

Try Crosswalk + Cordova. 

[andreyko]

16 hours ago, icp said:

Try Crosswalk + Cordova. 

Also thought about this  

With Crosswalk works perfect, but it is +25MB(!) to app size...

[in mono]

Maybe it's loading textures that causes slowdowns, not tweens. It's said in the documentation that it is an expensive thing to do.

As for file sizes of different ways of packing the game for mobile - the size difference might be because in one case it's the device's WebView implementation that's used, in other cases - WebView is packed along with the game (ensuring that the same one will be used across different devices). Can't tell by heart which is which, but that must be it.