Jump to content

Tween not working in CANVAS rendering mode on Android device


Recommended Posts



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)


Link to comment
Share on other sites

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 ?...



Link to comment
Share on other sites

@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.

Link to comment
Share on other sites

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 !

Link to comment
Share on other sites

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.


Link to comment
Share on other sites

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?

Link to comment
Share on other sites

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 :


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

On desktop :

Capture d’écran 2016-10-04 à 08.28.22.png

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) :

Capture d’écran 2016-10-04 à 08.26.43.png



Thanks !


Link to comment
Share on other sites

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.

Link to comment
Share on other sites


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...