Jittery Entity Movement

[Pattentrick]

Hi @collinhover,

Please take a look at this:

http://www.shuchu.de/ssr

The movement of the snail and the UFO is a bit jittery, although the game runs on 75 FPS on my PC. I am just calling once the moveToUp and the moveToRight method.

The vel and the accel of both entities is stable (no sudden changes on any frame). So i suppose it has something to do with the image drawing? This occurs on all browsers i have tested so far.

Not sure how to approach this issue, so i would be very glad for any ideas and suggestions from you :-)

[collinhover]

Do you have a link to the source so I can do some digging? The movement looks fine on my phone.

[Pattentrick]

You can have a look at the source here:

https://github.com/Pattentrick/jittery-movement

If you can't reproduce this problem on your pc, this might be related to my system. Thanks for your help!

[collinhover]

Hmm, I'm noticing a bit of jitter on Firefox, but Chrome and IE look fine. Is this the same issue you found in #119?

[collinhover]

On a side note, how are you hitting 75 fps? I've always thought 60 fps was the requestAnimationFrame limit, but I may be misinformed!

[Pattentrick]

Yes, that's the same issue. On my system the jitter on Firefox is the most noticeable. On Chrome and IE it's still there, but you have to look more closely to see it.

I do always get 75 FPS on Chrome and Firefox with impact++. Thought it had something to do with your improvements to impact ;-)

All i do is this:

javascript // Start up game ig.main( '#canvas', introScene1, 60, _c.GAME_WIDTH_VIEW, _c.GAME_HEIGHT_VIEW, _c.SCALE, ig.ssrLoader );

I noticed that changing the third paramter (fps) also does nothing. I am not sure about that, but as far as i know the fps parameter gets ignored in the current impact version

http://impactjs.com/documentation/class-reference/ig-core#ig-main

[collinhover]

You're right about the fps parameter, it does nothing... something that was never removed from ImpactJS. A few more testing results: when testing this on FF, I noticed a lot of system lag in the debug performance tab. I don't want to blame the jitter on system lag, but after updating to the latest FF, the system lag is gone and so is the jittery movement. I'm not noticing any jitter in playbiofleet.com, but I am noticing a very slight jitter here and there on your demo.

I believe the jitter issue has to do with frame time intervals. On FF I'm noticing a range of anywhere between 3 - 50ms between frames, which I wouldn't expect using requestAnimationFrame. Are you seeing the same thing on your end?

[Pattentrick]

Thanks for testing @collinhover,

I updated to firefox 27 and now the jitter is a little bit better, but still noticeable. Same problem in Chrome 32. To be honest, I am not sure how to measure the ms between frames. Any clarification on this would be great.

Since biofleet does not have any jitter, could it be that I messed something up (assuming that biofleet uses the latest dev)? By the way, on my end the system lag is about -3,5ms on every browser.

[collinhover]

Normally, when you use requestAnimationFrame, you get a high resolution timer as the first argument to the function that is being animated. However, Dominic has put several layers of functions in between, so to get at that you'll need to dig through the ImpactJS core code. The less accurate way to find the ms between frames is to use Date.now() stored in a variable, then compare that value to the value in the next frame, or get the value a second time after you've run some code. Give it a try =)

I'll run some profiling on the demo to see if I can figure out if anything is taking more time than it should.

[Pattentrick]

I will give it a try. Thanks for explaining and your help on this one!

[collinhover]

Profiling didn't show anything out of the ordinary at first glance. On a whim, I tried forcing the game to a lower scale, and this seemed to really make the jittering obvious. I also tried disabling top-down mode, and that eliminated all the jitter (I just had to set the gravityFactor of all entities to 0 so they wouldn't fall off the screen). On a side note, you should make your crop into a background tile map instead of entities and it will be drawn far more efficiently.

I also loaded up the run n' jump example on both side-scrolling and top-down, and could not find any jitter. Can you give the run n' jump example a try and let me know if you see any jitter?

[collinhover]

Hmm, it also seems as if the top-down mode version of your demo is much slower than the side-scrolling version. I'm not entirely sure why the change in speed is occuring.

[collinhover]

The change in speed is caused by the entities all becoming ungrounded in the side-scrolling mode, and while ungrounded they have no friction. Now that we've got that out of the way, the demo is far smoother when the entities have higher max velocity. It appears that setting the max velocity very low is causing jitter. I'll check that out now.

[collinhover]

Okay, so it appears that very slow moving entities will have a jittering movement effect. Try setting the demo's UFO entity to a max velocity of 1, and you'll see how it jumps from pixel to pixel. One way to minimize this effect appears to be to set ig.system.drawMode to ig.System.DRAW.SUBPIXEL, but when the scale is 1 it will blur the image and if the scale is >1 the jumpy movement is still present.

I may be wrong, but I'm not sure this is something we can fix. An entity moving at a speed of 1 is moving at 1 pixel per second, and the browser cannot draw more precisely than a single pixel. Just tested a few velocities on the demo, 1 is absolutely jumping, 10 has a slight jitter, 20 is almost there, and 30 or higher has no jitter at all. My suggestion is that if you want all your entities to move without any jitter, they should be moving at >30 pixels per second.

[Pattentrick]

Oh my ... i figured out what the problem was. I feel so stupid! You invested so much time and effort on this issue and it was so simple. I am so sorry for wasting your time @collinhover! I will explain the whole thing in just a minute. Needs just a bit more testing ...

[Pattentrick]

First of all, thank you for taking the time to look at my demo again to help me with this issue! What you discovered regarding to entity velocity at a lower scale is quite interesting, but the jumping/jitter that you saw there had actually nothing to do with my problem. The jitter/lag I saw was something quite different.

Remember that you asked me how I get 75 FPS? The refresh rate of my graphic card was set to 75hz, setting it to 60hz fixed the the problem! I am not sure if I understand this correct, but the maximum FPS on ImpactJS is bound to 60 FPS. But my graphic card refreshed the screen 75 times per second. So the missing 15 FPS caused the jitter/lag :O

That said, entities that are moving slow will indeed jitter/jump on a lower scale. But I don't think that is a problem in my case, because I expect the the game to run at a minimum scale of 3 most of the time.

One question about the cropping. You suggested to use a background map. Right now my level is exact as big as the game (320 x 200). To use a background map for cropping I would need a much bigger level to allow cropping areas above and besides the “game scene” and paint the whole area with background tiles. Is the performance gain so big, that it outweighs the entity solution on a really big level?

I totally trust you on that one. If you think that this is crucial, I will rearrange my existing levels and all entities. Or is there a way to position the cropping background map outside the existing layers? Until now I thought that every layer starts at 0,0.

[collinhover]

Haha, oh well. I was suggesting background maps because they will be prerendered, but on second thought you are right, it won't offer much of a boost. Glad we got to the bottom of things.

[Pattentrick]

Thanks again @collinhover! Learning never stops :D