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:       

1. /*:
2. * @plugindesc Fix the graphics jitter mostly noticeable when scrolling maps.
3. * @author Zumi Kua
4. *
5. * @help just enable this plugin, no need to do anything.
6. */
7. /*: zh
8. * @plugindesc 修复游戏地图在滚动时不定时出现的卡顿感
9. * @author Zumi Kua
10. *
11. * @help 实际原因为performance.now返回的数值似乎会有误差，导致两帧之间的deltaTime在1/60上下来回横跳，进而导致在一次
12. * requestAnimationFrame回调中一次updateScene也没调用，然后在下一次requestAnimationFrame回调中连续调用两次updateScene
13. * 无法解决在非60Hz的显示器上的卡顿问题
14. *
15. * 使用requestAnimationFrame作为参数提供的DOMHighResTimeStamp似乎不会有该问题
16. *
17. */
19. SceneManager.update = function(stamp) {
20.     try {
21.         this.tickStart();
22.         if (Utils.isMobileSafari()) {
23.             this.updateInputData();
24.         }
25.         this.updateManagers();
26.         this.updateMain(stamp);
27.         this.tickEnd();
28.     } catch (e) {
29.         this.catchException(e);
30.     }
31. };
33. const DEBUG = false;
35. SceneManager.updateMain = function(stamp) {
36.     if (Utils.isMobileSafari()) {
37.         this.changeScene();
38.         this.updateScene();
39.     } else {
40.         let fTime = (stamp - this._currentTime) / 1000;
41.         if (fTime > 0.25) fTime = 0.25;
43.         this._currentTime = stamp;
44.         this._accumulator += fTime;
45.         const old_ftime = fTime;
46.         const old_accu = this._accumulator;
47.         let i = 0;
48.         while (this._accumulator >= this._deltaTime) {
49.             i++;
50.             this.updateInputData();
51.             this.changeScene();
52.             this.updateScene();
53.             this._accumulator -= this._deltaTime;
54.         }
55.         if(DEBUG && i !== 1){
56.             console.log(i, old_ftime, old_accu);
57.         }
58.     }
59.     this.renderScene();
60.     this.requestUpdate();
61. };

复制代码

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:       

1. SceneManager.updateMain = function() {
2.     if (Utils.isMobileSafari()) {
3.         this.changeScene();
4.         this.updateScene();
5.     } else {
6.         var newTime = this._getTimeInMsWithoutMobileSafari();
7.         var fTime = (newTime - this._currentTime) / 1000;
8.         if (fTime > 0.25) fTime = 0.25;
9.         this._currentTime = newTime;
10.         this._accumulator += fTime;
11.         const old_accu = this._accumulator;
12.         let i = 0;
13.         while (this._accumulator >= this._deltaTime) {
14.             ++i;
15.             this.updateInputData();
16.             this.changeScene();
17.             this.updateScene();
18.             this._accumulator -= this._deltaTime;
19.         }
20.         if(i !== 1){
21.             console.log(i, fTime, old_accu);
22.         }
23.     }
24.     this.renderScene();
25.     this.requestUpdate();
26. };

复制代码

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:

1.             console.log(i, fTime, old_accu);

复制代码

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:       

1. 2 0.01699999999254942 0.033333333612730484
2. 0 0.015999999828636646 0.01633333343391655
3. 2 0.018000000156462193 0.03433333359037874
4. 0 0.016000000294297934 0.01633333371331332
5. 2 0.01699999999254942 0.033333333705862736
6. 0 0.015999999828636646 0.016333333527048802
7. 2 0.018000000156462193 0.03433333368351099
8. 0 0.015999999828636646 0.016333333340784285
9. 2 0.01699999999254942 0.0333333333333337
10. 0 0.015999999828636646 0.01633333343391654
11. 2 0.018000000156462193 0.03433333359037873
12. 0 0.016000000294297934 0.016333333713313313
13. 2 0.01699999999254942 0.033333333705862736
14. 0 0.016000000294297934 0.01633333362018106
15. 2 0.01699999999254942 0.033333333612730484
16. 0 0.01500000013038516 0.01633333343391655
17. 2 0.01699999999254942 0.033333333426465966
18. 0 0.01500000013038516 0.016333333433916554
19. 2 0.018000000156462193 0.034333333590378746
20. 0 0.015999999828636646 0.016333333527048813
21. 2 0.01699999999254942 0.03333333351959823
22. 0 0.014999999664723873 0.0163333333407843
23. 2 0.01699999999254942 0.033333333333333715
24. 0 0.016000000294297934 0.016333333620181068
25. 2 0.01699999999254942 0.033333333612730484
26. 0 0.01500000013038516 0.01633333343391655
27. 2 0.01699999999254942 0.033333333426465966
28. 0 0.01500000013038516 0.01633333371331332
29. 2 0.01699999999254942 0.033333333705862736
30. 0 0.015999999828636646 0.016333333340784288
31. 2 0.01699999999254942 0.03333333333333371
32. 0 0.01500000013038516 0.01633333362018106
33. 2 0.01699999999254942 0.033333333612730484
34. 0 0.015999999828636646 0.01633333343391655
35. 2 0.01699999999254942 0.033333333426465966
36. 0 0.016000000294297934 0.01633333371331332

复制代码

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

1. const DEBUG = false;

复制代码

to

1. const DEBUG = true;

复制代码

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/