JitterFix - Fix the graphics jitter/stuttering
JitterFix Ver 1.0.0Note: 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:
/*:
* @plugindesc Fix the graphics jitter mostly noticeable when scrolling maps.
* @author Zumi Kua
*
* @help just enable this plugin, no need to do anything.
*/
/*: zh
* @plugindesc 修复游戏地图在滚动时不定时出现的卡顿感
* @author Zumi Kua
*
* @help 实际原因为performance.now返回的数值似乎会有误差，导致两帧之间的deltaTime在1/60上下来回横跳，进而导致在一次
* requestAnimationFrame回调中一次updateScene也没调用，然后在下一次requestAnimationFrame回调中连续调用两次updateScene
* 无法解决在非60Hz的显示器上的卡顿问题
*
* 使用requestAnimationFrame作为参数提供的DOMHighResTimeStamp似乎不会有该问题
*
*/
SceneManager.update = function(stamp) {
try {
this.tickStart();
if (Utils.isMobileSafari()) {
this.updateInputData();
}
this.updateManagers();
this.updateMain(stamp);
this.tickEnd();
} catch (e) {
this.catchException(e);
}
};
const DEBUG = false;
SceneManager.updateMain = function(stamp) {
if (Utils.isMobileSafari()) {
this.changeScene();
this.updateScene();
} else {
let fTime = (stamp - this._currentTime) / 1000;
if (fTime > 0.25) fTime = 0.25;
this._currentTime = stamp;
this._accumulator += fTime;
const old_ftime = fTime;
const old_accu = this._accumulator;
let i = 0;
while (this._accumulator >= this._deltaTime) {
i++;
this.updateInputData();
this.changeScene();
this.updateScene();
this._accumulator -= this._deltaTime;
}
if(DEBUG && i !== 1){
console.log(i, old_ftime, old_accu);
}
}
this.renderScene();
this.requestUpdate();
};
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: explanation1. 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:
SceneManager.updateMain = function() {
if (Utils.isMobileSafari()) {
this.changeScene();
this.updateScene();
} else {
var newTime = this._getTimeInMsWithoutMobileSafari();
var fTime = (newTime - this._currentTime) / 1000;
if (fTime > 0.25) fTime = 0.25;
this._currentTime = newTime;
this._accumulator += fTime;
const old_accu = this._accumulator;
let i = 0;
while (this._accumulator >= this._deltaTime) {
++i;
this.updateInputData();
this.changeScene();
this.updateScene();
this._accumulator -= this._deltaTime;
}
if(i !== 1){
console.log(i, fTime, old_accu);
}
}
this.renderScene();
this.requestUpdate();
};
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:
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:
2 0.01699999999254942 0.033333333612730484
0 0.015999999828636646 0.01633333343391655
2 0.018000000156462193 0.03433333359037874
0 0.016000000294297934 0.01633333371331332
2 0.01699999999254942 0.033333333705862736
0 0.015999999828636646 0.016333333527048802
2 0.018000000156462193 0.03433333368351099
0 0.015999999828636646 0.016333333340784285
2 0.01699999999254942 0.0333333333333337
0 0.015999999828636646 0.01633333343391654
2 0.018000000156462193 0.03433333359037873
0 0.016000000294297934 0.016333333713313313
2 0.01699999999254942 0.033333333705862736
0 0.016000000294297934 0.01633333362018106
2 0.01699999999254942 0.033333333612730484
0 0.01500000013038516 0.01633333343391655
2 0.01699999999254942 0.033333333426465966
0 0.01500000013038516 0.016333333433916554
2 0.018000000156462193 0.034333333590378746
0 0.015999999828636646 0.016333333527048813
2 0.01699999999254942 0.03333333351959823
0 0.014999999664723873 0.0163333333407843
2 0.01699999999254942 0.033333333333333715
0 0.016000000294297934 0.016333333620181068
2 0.01699999999254942 0.033333333612730484
0 0.01500000013038516 0.01633333343391655
2 0.01699999999254942 0.033333333426465966
0 0.01500000013038516 0.01633333371331332
2 0.01699999999254942 0.033333333705862736
0 0.015999999828636646 0.016333333340784288
2 0.01699999999254942 0.03333333333333371
0 0.01500000013038516 0.01633333362018106
2 0.01699999999254942 0.033333333612730484
0 0.015999999828636646 0.01633333343391655
2 0.01699999999254942 0.033333333426465966
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 const DEBUG = false; to 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: ChangelogVer 1.0.0
Initial release.
本贴来自国际rpgmaker官方论坛作者:zumikua处,因国际论坛即将永久关站,为了存档多年珍贵资料,署名转载到本论坛存档,由于官方帖子为英文原帖，需要中文翻译请点击论坛顶部切换语言为中文就可以将帖子翻译成中文浏览,方便大家随时查看,原文地址：https://forums.rpgmakerweb.com/threads/jitterfix-fix-the-graphics-jitter-stuttering.144992/
页:
[1]