Tween not working in CANVAS rendering mode on Android device

[icelandic]

Hi, 

 

i work on a mobile game made with Phaser 2.6.2 and Cordova.

i want to do a tween on group children :

var game = new Phaser.Game(window.innerWidth, window.innerHeight, Phaser.AUTO, 'game');

function onCardClick(sprite){
	game.add.tween(sprite.scale).to({x : 0}, 100, "Linear", true, 0, 0, false);
}

myGroup.inputEnableChildren = true;
myGroup.onChildInputDown.add(onCardClick, this);


	

It works perfectly on browser, with Webgl rendering. But on Android device (with running by cordova), with canvas rendering, the tween is not shown, only a delay and my sprite.scale is set to 0 without any tween.

I tried to force Webgl on my device (with this tip) and the tween is working...

I am surprise that some simple tweens or animations are not working in CANVAS mode on mobile, do you know if it is normal ?

(i tried to set the game with Phaser.CANVAS but it does not work either)

thanks

[Tom Atom]

Hi, your tween is pretty fast - 100 ms. If there are some performance problems in canvas mode (low frames) on target device, it may look like no tween animation is running. For test, try to set tween duration to 3 seconds (3000 ms).

[icelandic]

Hi @Tom Atom

thanks for your reply, 

indeed you're right, i tried with 3000 and i see the tween..

But a problem is always visible : the tween is not so fluid as in webGL, it has some steps (with differents settings of duration, 1000 3000....)

Do you think it is due to Cordova, or Android, or other thing ?...

thanks

 

[Tom Atom]

@icelandic it depends ... how fast is your device, what browser do you use (Chrome / Stock browser), what is your game performance, what else is broken on your device, as there is always something wrong with mobiles

 Try to remove all debug output, if you have any. Also try to create minimal app (for example with one tweened image) to test your device. Also, if you can, try it on another Android device.

 Regarding Cordova, you can try to use Crosswalk plugin for Cordova (https://crosswalk-project.org/documentation/cordova.html). It increases size of your app a lot, but usually has better performance.

[icelandic]

ok thanks @Tom Atom

it is a very small test app for the moment, only a group of cards made with the same source image.. and an event for touch on the card, then a tween to return the card. But i was trying now to use the cakewalk plug in, because on my device (nexus 10) the displayed fps was...7 !

I have to choose the bette solution to develop this game (a simple memory) : with Phaser or with native Pixi.js.

 

thanks for your help !

[icelandic]

One thing is very strange : 

i try to make an empty project Phaser + cordova, only an empty game with no assets loaded or displayed, and no more code than basic Phaser game creation.

On boot state, i  display on screen the game.time.fps.

On browser, i have 60fps,

On ipad (ios 8), i have 60fps,

but on my two devices (Android smartphone and Android tablet), the fps displayed is only between 5 > 12 fps.

I tried to add crosswalk-webview for cordova, it seems to be well used (i check the phaser game.device.crosswalk value and it is true), but fps is no higher with this...

It is very slow on android for an empty project no, or did I miss some tip ?

 

I tried to compile my project with Cocoon.io, and it seems to work, but i find it is not very easy for debug (console.log etc) when working on dev project.

 

[Tom Atom]

How do you know your FPS rate? Any debug output? Using debug text in WebGL is performance killer.

Friend of mine making graphics for our games is using Nexus device and has no problems with performance. I have mid level device (ASUS Memo Pad) and while the game is not absolutely fuild, it still feels like 45 FPS (just estimation - I did not do any measurement). Do you have the same problem, if running it in mobile browser from server (not Cordova wrapped)? Can you zip and post your minimal app?

[icelandic]

For FPS rate, i use a javascript function AND the game.time.fps from Phaser. They give all the same results.

I join you the zip file (cordova elements are commented).

You can view the test here :

http://dev.davidanquetin.fr/tests/memory/

(left number : javascript FPS, right number : Phaser FPS).

On desktop :

When i run it on my tablet (Nexus 10) with the browser (Chrome), not wrapped in Cordova, I have the same result (low fps) :

 

and we see that WebGl is not working, Canvas is used (Chrome inspect) :

 

 

Thanks !

fps-test.zip

[Tom Atom]

Hi, tested on ASUS Memo Pad tablet. Results are pretty bad with Canvas renderer forced - 20 FPS. I played with it and found, that biggset performance loss parameter is game size. Try to reduce it to something like 200x100 and observe results. For real game, I would set renderer to AUTO. If you use Crosswalk - it creates unified environment for you, so you can use WebGL without worries.

[sinanqd10]

I'm also facing the same problem like @icelandic mentioned. Android devices seem run very slow in stock browser. 

 

 

[icelandic]

thanks @Tom Atom, i will try the game size setting. I used Crosswalk plugin for cordova and AUTO rendering , but it never changed anything.. Do you mean Crosswalk IDE ?

[Tom Atom]

@icelandic With rendering set to AUTO I got 58-60 fps in that simple scene. I tested only that simple app you put into .zip attachment. Crosswalk plugin should make it only better.

[icelandic]

@Tom Atom : with rendering set to AUTO, I got 60fps too, within a browser (on my Nexus 10).

But if i wrapped in with Cordova & CrossWalk Webview plugin, even if i set the game size to 200x100, i have always 5/6 fps...

Strange !