Performance

[Zaidar]

Hi,

 

I'd like to know how to stop my game to feel laggy.

 

I tried to debug with the source and timeline profile, but it's not really helping as most indications redirect to phaser loop and requestAnimationFrame functions.

 

How to you guys do to make games which are not janky especially on mobile ?

 

I don't particularly do big calculation in my code, I'm just rendering sprite and moving them.

Some event on click and collide, but nothing too fancy...

 

It's making me crazy, what if it's bigger games with big calculations, nothing will works...

I'm a HTML5 and JS enthousiast, but right now I feel a little depressed about JS games.

 

People makes unreal engine with JS, and I never achieved to make 5sprites game with good perfs

 

I read this article, but nothing seems to help, really http://www.html5rocks.com/en/tutorials/canvas/performance/

 

Any help welcomed, thx very much.

 

EDIT : For instance, this game is way more complicated, has particles, multiple objects moving, etc... but I don't see that much of FPS drops;

[rich]

Can't answer this without seeing the game, but some common causes:

 

1) Game size is too large. Asking it to render too many pixels per frame can cause significant lag.

 

2) Texture sizes are too large, or there are too many of them filling up memory.

 

3) Expensive operations in main loops - pixel perfect click tests for example.

 

4) HTML page hasn't been set-up properly for games (i.e. viewport scaling allowed, other elements causing slow down)

[Zaidar]

Hi rich, if you want to try it, I hesitated to share it at first : http://jeandaviddaviet.fr/phaser/game/

 

As you can see, my biggest texture is 70 * 35 and the game stage is 800*450 max, I don't really know if it's a lot.

 

The lags appears time to time, it's not always laggy for me, but jut randomly some frames just take like 100ms. I think this all come from the main update() function, but if I can't make basics loops, it will be complicated afterwards

 

 

 

 

PS: I know I've put some timeout to generate the coins and obstacles, and I plan to remove this function and base it on time.

[feiss]

I don't see any frame drop, neither in my computer nor in my nexus7..  :/  did you try with another device/computer?

[Zaidar]

Hi, I usually develop on my old laptop, it's not a race machine (AMD 1.9ghz 4goR) its a dual core , so I expected to make at least my games work on it. I also have a nexus 4 which run the game quite nicely, but it's a good phone, all the mobile player don't have a last generation android device.

Lots of people advice to do performance profiling at the end, but if I see my game not as fast as wanted in the middle of the Dev, it's faster to improve the perf at this stage.

[Zaidar]

In order to be more practical, I'd like to use the off-screen canvas technique.

What is the best way to achieve this technique ?

Also, I have some generated obstacles and coins. For testing purposes I use SetTimeout, but it is bad ( compared to rAF and because when the tab changes, the code keeps working ). How can I access the Phaser RequestAnimationFrame to apply a function every two seconds ?

Also some people advice to separate the logic from the graphics. Form a phaser point of view, how is it possible ?

[Dannysw]

I have set up just a basic screen, it just had a tilte screen, with some text. I put in a fps logger and on a Samsung galaxy tab it was sitting around 15-20 fps. Anything else I tried it on it would sit at 60fps.

[feiss]

for applying a function every two seconds, you can use a variable in your update function. Let's call it 'timeout':

function update(){  if (game.time.time> timeout) {      call_your_function();      timeout= game.time.time+2000;   }  // ... your code}

Remember to initialize 'timeout'. Check Time class for more properties.

 

Would it do the trick? This is a way more efficient way of doing it instead of timeouts or intervals, and as you see, changing 2000 for a variable, you can call the function at variable (or random) intervals.

[Zaidar]

Yes, you're right, I forgot about this, I'll use that, thx !

[rich]

I have set up just a basic screen, it just had a tilte screen, with some text. I put in a fps logger and on a Samsung galaxy tab it was sitting around 15-20 fps. Anything else I tried it on it would sit at 60fps.

 

Text is really expensive! Some browsers go really slow when rendering it, so it's best to try and avoid it or use bitmaps instead (or DOM text over the top if you can).

[PhaserEditor2D]

Hello guys,

 

I think phaser is great, is very easy to learn, it has a pretty API, but I am frustrated because I don't get it to scroll the world in a smooth way. I just did a very basic demo:

 

http://games.boniatillo.com/dev/squareships/

 

Do you experiment the same in your phaser games?

 

Here you can see the source:

 

http://games.boniatillo.com/dev/squareships/js/main.js

[rich]

It scrolls really nicely for me, but I'm on a gaming-class desktop. You could try forcing the game to canvas mode and see if it makes much difference for you, some browser/hardware combinations have a rough time pushing up the BitmapData the tilemap needs every frame (which is why I'm looking at using a RenderTexture instead for the next version btw).

 

Also white on black is super high contrast, i.e. it will exaggerate 'stutters' in scrolling which can be mitigated with actual assets.

[PhaserEditor2D]

Hi @rich

 

My laptop is not so bad (i7/nvidia/8gb ram), but probably it has to be that I am running on ubuntu and maybe there is an issue with browsers/nvidia/ubuntu.

In that example I posted it is running on canvas mode, but also I tested it on webgl and it is the same.

 

By the way, is it possible to paint myself on top of the canvas? Really, in this specific game, I don't need the phaser physics/collitions/tilemaps/sprites etc... what I really need are the load and tween API, cause I can implement the rest myself.

[ChubbRck]

I can confirm that your example plays very smoothly for me - I am on OSX Chrome i7 iMac

[rich]

By the way, is it possible to paint myself on top of the canvas? Really, in this specific game, I don't need the phaser physics/collitions/tilemaps/sprites etc... what I really need are the load and tween API, cause I can implement the rest myself.

 

Just add a 'render' function and inside it draw on-top of game.canvas (or game.context).

 

This will only work in Canvas mode of course, and anything drawn here will appear on-top of anything added to the display list.

[PhaserEditor2D]

@ChubbRck and @rich, thanks a lot for your support.

[D3thy]

It scrolls really nicely for me, but I'm on a gaming-class desktop. You could try forcing the game to canvas mode and see if it makes much difference for you, some browser/hardware combinations have a rough time pushing up the BitmapData the tilemap needs every frame (which is why I'm looking at using a RenderTexture instead for the next version btw).

 

Also white on black is super high contrast, i.e. it will exaggerate 'stutters' in scrolling which can be mitigated with actual assets.

 

Agree with Richard, change from AUTO to CANVAS, this drastically reduced stuttering in my game and im using a 8000px wide background, multiple tile map layers, animations etc etc...

[jloa]

Stumbled the same things btw. WebGL is very VERY slow in firefox. Dunno why. Especially if you render text using "game.debug.text". For example, my game with 8 debug texts get a 4/60 fps drop on webgl, when i remove the "game.debug.text" calls i get stable 45-50 fps out of 60. Btw on canvas i get 60/60 fps in firefox with and without "game.debug.text" calls.

[lewster32]

The way all of the debug stuff works is incredibly inefficient on webGL, as it's essentially regenerating a screen-sized texture and uploading it to the GPU each frame - but as it's for debugging purposes only, this should not be a concern. 

[rich]

Yes, don't ever use the debug calls in any live game, especially not WebGL ones.