その昔、Win32 でゲームを作ってた頃に timeGetTime() と sleep() で正確に 60 FPS にするには各フレームでどれだけ時間をとればいいのか考えた事があった。
(ちなみに、確か Direct2D に画面フリップまでブロックする処理があって、そっちを使った方が画面は崩れなかった気がする)
今は可変 FPS の時代だし、あんまり意味はなさそうだけど、なんかの参考になるかもしれないのでメモっておく。
大枠の考え方としては「きれいにバラけるように事前に表を作っておいて、各フレームではその表の時間だけ使っていいとする」みたいな感じ。
その表を作る部分は当時「こういう表が欲しいわけだから……」というところから逆算して、これでいけるな！と思った方法という、説明しがたいやつだったが、今回 HTML にべた書きした JavaScript でその表を計算して表示するので、実行して存分に堪能して欲しい。
ideal-frame-duration-calculation.html
<html>
<head>
<title>ideal frame duration calculation</title>
<script>
(function(global){
// 二つの数の最大公約数 (greatest common divisor) を求めます.
const gcd2 = function(value1, value2) {
if ((value1 == 0) || (value2 == 0)) {
// 想定外の引数
throw "illegal argument";
}
// ユーグリッドの互除法 (Euclidean Algorithm)
while (value2 != 0) {
const tmpValue = value2;
value2 = value1 % value2;
value1 = tmpValue;
};
return value1;
};
// // 二つの数の最小公倍数 (least common multiple) を求めます.
// const lcm2 = function(value1, value2) {
//
// if ((value1 == 0) || (value2 == 0)) {
// // 想定外の引数
// throw "illegal argument";
// }
//
// const v1 = value1 * value2;
// const v2 = gcd2(value1, value2);
// const result = parseInt(v1 / v2);
// return result;
// };
// `createCycleTable` 理想 FPS の為に各フレームで待つべき時間の表を作成します.
// `waitsPerSecond` 一秒辺りの待ち時間 (ミリ秒単位なら 1000, マイクロ秒単位なら 1000000)
// `fpsToDesire` 理想秒間フレーム数
const createCycleTable = function(waitsPerSecond, fpsToDesire) {
const baseTime = parseInt(waitsPerSecond / fpsToDesire);
const remaindered = waitsPerSecond % fpsToDesire;
if (remaindered == 0) {
return [baseTime];
}
const gcdValue = gcd2(fpsToDesire, remaindered);
const cycleItemCount = parseInt(fpsToDesire / gcdValue);
const longItemCount = parseInt(remaindered / gcdValue);
var cycleTable = [];
const mag = 65536;
const toDecrease = parseInt(mag * longItemCount / cycleItemCount);
var counter = mag * longItemCount;
for (var i = 0; i < cycleItemCount; i += 1)
{
const prev = parseInt(counter / mag);
counter -= toDecrease;
const curr = parseInt(counter / mag);
if (prev != curr) {
cycleTable[i] = baseTime + 1;
} else {
cycleTable[i] = baseTime;
}
}
// 確かめ算 verification of figures
var cntForVerification = 0;
var pos = 0;
for (var i = 0; i < fpsToDesire; i += 1) {
cntForVerification += cycleTable[pos];
pos += 1;
pos %= cycleItemCount;
}
if (cntForVerification != waitsPerSecond) {
throw `verification failed. expects: ${waitsPerSecond}, but actual: ${cntForVerification}`;
}
return cycleTable;
};
document.addEventListener('DOMContentLoaded', function() {
const waitsPerSecondBox = document.querySelector('#waits-per-second-box');
const fpsToDesireBox = document.querySelector('#fps-to-desire-box');
const calcTableButton = document.querySelector('#calc-table-button');
const resultPane = document.querySelector('#result-pane');
calcTableButton.addEventListener('click', function(event){
const waitsPerSecond = parseInt(waitsPerSecondBox.value, 10);
const fpsToDesire = parseInt(fpsToDesireBox.value, 10);
const cycleTable = createCycleTable(waitsPerSecond, fpsToDesire);
const cycleItemCount = cycleTable.length;
// 結果の表を作る (ここは出りゃいいでしょという適当なやり方)
const tableElm = document.createElement('table');
for (var i = 0; i < cycleItemCount; i = i + 1) {
const cycleItem = cycleTable[i];
const td1Elm = document.createElement('td');
td1Elm.innerText = `${i + 1}`;
const td2Elm = document.createElement('td');
td2Elm.innerText = `${cycleItem}`;
const trElm = document.createElement('tr');
trElm.appendChild(td1Elm);
trElm.appendChild(td2Elm);
tableElm.appendChild(trElm);
}
resultPane.innerHTML = '';
resultPane.appendChild(tableElm);
tickCycleTable = cycleTable;
tickCycleTableIndex = 0;
});
onTick();
});
const getTickCount = function() {
return (new Date()).getTime();
};
var progress = 0;
var increment = 15;
var max = 360;
var tickCycleTable = [1000];
var tickCycleTableIndex = 0;
var tickCount = getTickCount();
const onTick = function() {
const thisTickStartedAt = getTickCount();
const interval = tickCycleTable[tickCycleTableIndex];
tickCycleTableIndex += 1;
tickCycleTableIndex %= tickCycleTable.length;
// console.log(tickCycleTableIndex);
const nextTickShouldStartAt = tickCount + interval;
tickCount += interval;
// ----
const hoge = Math.sin(progress * (Math.PI / 180));
const demoCanvas = document.querySelector('#demo-canvas');
const ctx2d = demoCanvas.getContext('2d');
ctx2d.fillStyle = 'white';
ctx2d.fillRect(0, 0, 100, 100);
ctx2d.fillStyle = 'blue';
ctx2d.beginPath();
ctx2d.arc(50, 50 + (10 * hoge), 20, 0, Math.PI * 2, true);
ctx2d.closePath();
ctx2d.fill();
// console.log(`${progress} ${mage}`);
progress += increment;
progress %= max;
// ----
const tickProcessEndedAt = getTickCount();
var delay = nextTickShouldStartAt - tickProcessEndedAt;
if (delay < 0) {
console.log('間に合わない');
tickCount = tickProcessEndedAt;
delay = interval;
}
setTimeout(onTick, delay);
};
})(this);
</script>
<style>
table { border: 1px solid; }
td { border: 1px solid; }
</style>
</head>
<body>
<div>
<label for="waits-per-second-box">Waits per second</label>
<input id="waits-per-second-box" type="text" id="" value="1000" />
<span>一秒辺りの待ち時間 (ミリ秒単位なら 1000, マイクロ秒単位なら 1000000)</span>
</div>
<div>
<label for="fps-to-desire-box">FPS to desire</label>
<input id="fps-to-desire-box" type="text" id="" value="60" />
<span>理想秒間フレーム数</span>
</div>
<div>
<button id="calc-table-button">Calculate</button>
</div>
<div>
<label for="demo-canvas">demo</label>
<canvas id="demo-canvas" width="100" height="100"></canvas>
</div>
<div id="result-pane">
</div>
</body>
</html>
「数学は無理、算数の時点で超苦手」という自分が何故最大公約数にたどり着いたのか、本当に覚えてない。
(でも一人でゼロから売り物の 3D のアクション RPG (BREW by KDDI な奴のアプリ) を書いた事あるんですよ！描画はライブラリがやってくれたけど、内部計算はガチで自力で全部やったの！ってか malloc/free 相当のやつも自作した。自分でも信じられない！)