JitterFix - Fix the graphics jitter/stuttering

じ☆ve冰风

JitterFix Ver 1.0.0

Note: it has nothing to do with the event positon rounding error which mentioned here: https://forums.rpgmakerweb.com/index.php?threads/bug-fix-event-jitter-display-rounding-error.107752/

It should fix the issues mentioned here: https://forums.rpgmakerweb.com/index.php?threads/stuttering-jittering-without-fps-drops.125067/

License

I release this script to the public domain, you can use it however you want (yes, commercial use is allowed, credit is not needed but appreciated.)

Instruction

copy the following code into a text file and rename it to JitterFix.js

copy JitterFix.js to plugins/, and enable it in the plugin manager.
Spoiler: CODE

                JavaScript:       

复制

Explanation

Warning: I'm not a native English speaker, the following explanation may contain grammar or spell errors, I will try my best to make myself clear.

Another warning: the following explanation needs programming knowledge to understand.
Spoiler: explanation

1. How RMMV works

RMMV is a frame based game engine, which, in every game loop, you won't receive a delta time, the interval between each update is *considered* fixed. (not fixed in the real world, but if you are inside of the update method, you can not tell.)

                JavaScript:       

复制

This is the updateMain method of SceneManager(I made some modification to log some important info).

This method will be called every time browser wants to repaint the page (since this method is a part of the callback of the requestAnimationFrame: https://developer.mozilla.org/en-US/docs/Web/API/Window/requestAnimationFrame), if vSync is enabled (it is enabled by default), it means this method will be called 60 times a second (assume your monitor's refreshrate is 60Hz)

I will not explain the code since it is self-explanatory(I hope), and my English skill does not allow me to explain it clearer.

Just notice here:

复制

The i here means the times of the updateScene is called.

2. Why jitter happens

When jitter happens, you will notice something like this is printed in the console.

                Code:       

复制

The first number 0,2 means in this frame, updateScene is called zero times/twice.

Now, you will see the reason here. Every time updateScene is called, the map is scrolled a bit. If we scroll it twice in a frame, then don't scroll it in next frame, the scroll speed is not fixed, which looks stuttering.

Then, why we got this? Let's look at the seond number, the deltaTime between each call of updateMain.

Ideally, the deltaTime between each call to updateMain should be 1/60, which is 0.016666666

But we seldomly got the ideal value. Instead, we got 0.015 and 0.017, this unstable delta time is the root of the all evil.

The reason why the delta time is unstable is still unclear (A reasonable guess is that before updateMain, MV also called updateManagers, which consumes unstable time)., but I found that requestAnimationFrame also gives a timestamp as argument, and the delta between these timestamps are stable.

So the solution is simple: use the argument requestAnimationFrame passed to calculate the delta time.

Note

I haven't encounter this jitter issue after this plugin was enabled, if you still have this issue, you can change the

复制

to

复制

and watch the console, check whether it prints something like the output I paused above.

also:
If your monitor's refresh rate is not 60Hz, this jitter issue can not be fixed, unless you speed up your game.

Changelog

Spoiler: Changelog

Ver 1.0.0
Initial release.

本贴来自国际rpgmaker官方论坛作者:zumikua处,因国际论坛即将永久关站,为了存档多年珍贵资料,署名转载到本论坛存档,由于官方帖子为英文原帖，需要中文翻译请点击论坛顶部切换语言为中文就可以将帖子翻译成中文浏览,方便大家随时查看,原文地址：https://forums.rpgmakerweb.com/threads/jitterfix-fix-the-graphics-jitter-stuttering.144992/