Choppy sprite movement inside mobile webview

[Raptisha]

Hello everyone!

Just a quick question for you all.

Sprites in my game are moving flawlessly when the game is played inside a browser window. 

However, once I switch to mobile webview, all the movements / animations become choppy.

I have already set the following inside my game:

game.forceSingleUpdate = true

but nothing has changed.

Is there any way I an optimize my game, or add something to make make my sprite move without lags?

Thank you in advance!

[symof]

My guess would be that you are using Phaser.WEBGL or Phaser.AUTO that defaults to Phaser.WEBGL when you create the game object, using Phaser.CANVAS might solve that.

var game = new Phaser.Game(800, 600, Phaser.CANVAS, 'GameDiv' );

If that doesn't solve it then your issue might be with the physics and amount of bodies you have on the screen. ARCADE is best for mobiles.

[Raptisha]

25 minutes ago, symof said:

My guess would be that you are using Phaser.WEBGL or Phaser.AUTO that defaults to Phaser.WEBGL when you create the game object, using Phaser.CANVAS might solve that.

var game = new Phaser.Game(800, 600, Phaser.CANVAS, 'GameDiv' );

If that doesn't solve it then your issue might be with the physics and amount of bodies you have on the screen. ARCADE is best for mobiles.

Hi! 

I am already using CANVAS renderer and arcade physics. It is so weird.

Generally speaking, is webview suitable for running html5 games?

[samid737]

Are you rendering alot of debug info? That could also be one cause (in WebGL mode especially).

[Raptisha]

3 minutes ago, samid737 said:

Are you rendering alot of debug info? That could also be one cause (in WebGL mode especially).

No, there is no debug info in my game.

[symof]

Generally speaking WEBGL and webview will work best on new smartphones. So it does depend on your project needs. There are other alternatives to phaser such as

https://crosswalk-project.org/

You might also try to edit the css of the div you are using 

#game-area {

 margin : 0;
 padding: 0;
 transform: translate3d(0,0,0);
 -webkit-transform: translate3d(0,0,0);

}

This triggers the WEBGL before you actually try to run Phaser. It's a simple hack to trigger it since javascript use JIT compiling. 

It's kinda like saying to Javascript "hey i'm gonna use webgl on this page, initiate the API now).

So just experiment. Try to turn WEBGL on and off and see what works best for you.

[samid737]

@Raptisha do you have a link to the game/source (as PM if you prefer) so that we can test it?

Quote

Generally speaking WEBGL and webview will work best on new smartphones

@symofThat does make sense and I agree, but this was happening in my case (Still have to look at it at some time):

http://www.html5gamedevs.com/topic/29206-performance-iphone-5s-worse-than-iphone-5c-using-webgl/

[Raptisha]

On 14.04.2017 at 6:04 PM, samid737 said:

@Raptisha do you have a link to the game/source (as PM if you prefer) so that we can test it?

@symofThat does make sense and I agree, but this was happening in my case (Still have to look at it at some time):

http://www.html5gamedevs.com/topic/29206-performance-iphone-5s-worse-than-iphone-5c-using-webgl/

@samid737 sorry for my late reply

here is a link to my game:

https://github.com/pavermakov/phaser-runner