Judder during animations that should be smooth

[gingerbeardman]

I recently finished a very simple game, but there's still some juddering and uneven framerate even though there's really not much going on.

2-3 milliseconds per frame according to https://github.com/englercj/phaser-debug

All I can think is that there's something that occasionally takes a few too many milliseconds that I need to optimise or move from one state to another.

Or maybe there's a deeper problem?

What are the best practices for the types of code and game logic recommended for each state?

What are the best approaches to finding the offending code and the subsequent optimisation?

boot:

config

preload:

asset loading

create:

object creation

update:

position changes

player logic

prerender:

?

render:

render effects

postrender:

?

[drhayes]

Are you seeing this behavior in all browsers? The best way to find what's wrong is profiling your JS.

 

FWIW, you've outlined exactly what I'm using each state method for in my game.

[gingerbeardman]

It's odd, I see the same stuttering in the Phaser examples.

 

Any ideas?

 

https://phaser.io/examples/v2/basics/07-tween-an-image

[clark]

This is the case for me as well but it is just so random.

 

I have a moving stack of X items, No more than 8.  During the update loop, I loop over this collection and update each position.  Since it is scrolling, it is easy to see jerkyness or just stuttering. 

 

I eventually got back to just the moving stack, I got rid of all other groups in the scene.  Same thing.  Some weird grinding is going on. 

This occurs on both. I was hitting the CPU profiler but it is not really helpful. My own methods are pretty low down the list (not that it means much probably). 

 

Canvas suffers from something similar so I could not really narrow it down there. 

Chrome says that I am running at constant 60fps on my game rig, and actually it is more noticible on FireFox.  

Funnily, on an IPad, there is silky smoothness at 60fps running in native texture sizes! It looks like an app!

I HAVE to set this.game.forceSingleUpdate = true.   Leaving that as false for all games, on all devices is a killer.  As I said, the older Ipad is looking good for speed with no stuttering, if it is false, performance decreases significantly.

So... I know what GBM is saying but I just cannot narrow it down or even really give any REAL reproduction.  I cannot isolate it to anything.

[drhayes]

Try running in Chrome Canary. You're probably getting bit by Chrome's vsync issue.

[gingerbeardman]

This isn't limited to Chrome, but I'll happily give Canary a try. Safari and Firefox also exhibit it, mobile or desktop.

 

(edit: no change in Canary)

My thoughts are that it is JavaScript Garbage Collection? And that's its unlikely we can avoid it on desktop, or even mobile?

Edit: changed topic title

[Hsaka]

Can you try setting 

game.forceSingleUpdate = true;

And see if you still get the judder?

[gingerbeardman]

It makes no difference.

 

I used the code from here:

https://phaser.io/examples/v2/basics/07-tween-an-image

 

in the Phaser online editor/sandbox

 

and added in your line.

 

No change to what I am seeing.

 

if I could see how to save a sandbox I'd share it with you.

[Hsaka]

Can you try this game which includes that line and see if it's jerky? http://www.gamepyong.com/wizzaman

[gingerbeardman]

Can you try this game which includes that line and see if it's jerky? http://www.gamepyong.com/wizzaman

Yes, there's a judder in the player sprite every second or so.

 

Video grab http://cl.ly/3D0W0T0C0J0A

[wkd-aine]

Hi,

 

When I test your game now, it works great, my game is juddering like your video in FireFox, what did you do to fix it please?

 

Many thanks,

Áine