JavaScriptでゲームループを作成する簡単な方法はありますか?何かのようなもの...
onTimerTick() {
// update game state
}
setInterval(onTimerTick, 33); // 33 milliseconds = ~ 30 frames per sec
function onTimerTick() {
// Do stuff.
}
アプリケーションに応じて、JavaScriptを使用してこれを実現する方法はさまざまです。 setInterval()またはwhile()ステートメントを使用してもうまくいきます。これはゲームループでは機能しません。 JavaScriptはブラウザによって解釈されるため、中断する傾向があります。割り込みを使用すると、ゲームの再生が不安定になります。
CSS3のwebkitRequestAnimationFrameプロパティは、レンダリングループ自体を管理することでこれを修正することを目的としています。ただし、これはまだこれを行うための最も効率的な方法ではなく、更新されるオブジェクトが多数ある場合はジッターが発生しやすくなります。
これは始めるのに良いウェブサイトです:
http://nokarma.org/2011/02/02/javascript-game-development-the-game-loop/index.html
このサイトには、ゲームループの作成の基本に関するいくつかの良い情報があります。いかなる種類のオブジェクト指向設計にも決して触れません。正確なタイミングを実現する最も正確な方法は、日付関数を使用することです。
while ((new Date).getTime() > nextGameTick && loops < maxFrameSkip) {
Game.update();
nextGameTick += skipTicks;
loops++;
}
これは、setTimeoutが高周波数でどのようにドリフトするかを考慮していません。これはまた、物事が同期しなくなり、不安定になることにつながります。 JavaScriptは毎秒+/- 18msドリフトします。
var start, tick = 0;
var f = function() {
if (!start) start = new Date().getTime();
var now = new Date().getTime();
if (now < start + tick*1000) {
setTimeout(f, 0);
} else {
tick++;
var diff = now - start;
var drift = diff % 1000;
$('<li>').text(drift + "ms").appendTo('#results');
setTimeout(f, 990);
}
};
setTimeout(f, 990);
ここで、これらすべてを実際の例に入れましょう。ゲームループをWebKitのマネージドレンダリングループに挿入したいと思います。これは、レンダリングされたグラフィックを滑らかにするのに役立ちます。また、描画機能と更新機能を分割したいと思います。これにより、次のフレームをいつ描画するかを計算する前に、レンダリングシーンのオブジェクトが更新されます。更新に時間がかかる場合は、ゲームループも描画フレームをスキップする必要があります。
Index.html
<html>
<head>
<!--load scripts-->
</head>
<!--
render canvas into body, alternative you can use div, but disable
right click and hide cursor on parent div
-->
<body oncontextmenu="return false" style="overflow:hidden;cursor:none;-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;">
<script type="text/javascript" charset="utf-8">
Game.initialize();
window.onEachFrame(Game.run);
</script>
</body>
</html>
Game.js
var Game = {};
Game.fps = 60;
Game.maxFrameSkip = 10;
Game.skipTicks = 1000 / Game.fps;
Game.initialize = function() {
this.entities = [];
this.viewport = document.body;
this.input = new Input();
this.debug = new Debug();
this.debug.initialize(this.viewport);
this.screen = new Screen();
this.screen.initialize(this.viewport);
this.screen.setWorld(new World());
};
Game.update = function(tick) {
Game.tick = tick;
this.input.update();
this.debug.update();
this.screen.update();
};
Game.draw = function() {
this.debug.draw();
this.screen.clear();
this.screen.draw();
};
Game.pause = function() {
this.paused = (this.paused) ? false : true;
};
/*
* Runs the actual loop inside browser
*/
Game.run = (function() {
var loops = 0;
var nextGameTick = (new Date).getTime();
var startTime = (new Date).getTime();
return function() {
loops = 0;
while (!Game.paused && (new Date).getTime() > nextGameTick && loops < Game.maxFrameSkip) {
Game.update(nextGameTick - startTime);
nextGameTick += Game.skipTicks;
loops++;
}
Game.draw();
};
})();
(function() {
var onEachFrame;
if (window.requestAnimationFrame) {
onEachFrame = function(cb) {
var _cb = function() {
cb();
requestAnimationFrame(_cb);
};
_cb();
};
} else if (window.webkitRequestAnimationFrame) {
onEachFrame = function(cb) {
var _cb = function() {
cb();
webkitRequestAnimationFrame(_cb);
};
_cb();
};
} else if (window.mozRequestAnimationFrame) {
onEachFrame = function(cb) {
var _cb = function() {
cb();
mozRequestAnimationFrame(_cb);
};
_cb();
};
} else {
onEachFrame = function(cb) {
setInterval(cb, Game.skipTicks);
};
}
window.onEachFrame = onEachFrame;
})();
さらに詳しい情報
完全に機能する例とすべてのコードはここにあります。私はこの答えを、ゲームを構築できるダウンロード可能なjavascriptフレームワークに変換しました。
requestAnimationFrameは、現在ほとんどのブラウザーで利用できる優れた代替手段です。 setIntervalで実行していることを実行しますが、方法は異なります。おそらくそれについての最も良いことは、タブがフォーカスされている間だけ実行されることです。これが理由である可能性がありますnotバックグラウンドで実行したい場合は使用しませんが、多くの場合(特に、表示された場合にのみ重要なレンダリングループの場合)タブがアクティブでないときにリソースを使用しないのは素晴らしいことです。
使い方はとても簡単です:
function gameLoop(){
window.requestAnimationFrame(gameLoop);
Game.update();
}
古いスレッドに投稿するのは嫌いですが、これは「javascriptゲームループ」のトップグーグル結果であるため、実際にはrequestAnimationFrameを含める必要があります。
paulirish からコピーされた古いブラウザのポリフィル:
(function() {
var lastTime = 0;
var vendors = ['ms', 'moz', 'webkit', 'o'];
for(var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
window.requestAnimationFrame = window[vendors[x]+'RequestAnimationFrame'];
window.cancelAnimationFrame = window[vendors[x]+'CancelAnimationFrame']
|| window[vendors[x]+'CancelRequestAnimationFrame'];
}
if (!window.requestAnimationFrame)
window.requestAnimationFrame = function(callback, element) {
var currTime = new Date().getTime();
var timeToCall = Math.max(0, 16 - (currTime - lastTime));
var id = window.setTimeout(function() { callback(currTime + timeToCall); },
timeToCall);
lastTime = currTime + timeToCall;
return id;
};
if (!window.cancelAnimationFrame)
window.cancelAnimationFrame = function(id) {
clearTimeout(id);
};
}());
creativeJS に関する詳細な説明と使用上のヒント
うん。あなたが欲しい setInterval
:
function myMainLoop () {
// do stuff...
}
setInterval(myMainLoop, 30);
これでいいですか?
setInterval(updateGameState, 1000 / 25);
ここで、25は希望するFPSです。フレーム間のミリ秒数をそこに置くこともできます。これは、25 fpsでは40ミリ秒(1000/25 = 40)になります。
これらの回答の多くは時代遅れであり、最適ではありません。現在これを行うための推奨される方法は、requestAnimationFrame
を使用することです。
例えば:
let previousTime = 0.0;
const loop = time => {
// Compute the delta-time against the previous time
const dt = time - previousTime;
// Update the previous time
previousTime = time;
// Update your game
update(dt);
// Render your game
render();
// Repeat
window.requestAnimationFrame(loop);
};
// Launch
window.requestAnimationFrame(time => {
previousTime = time;
loop(time);
});
このページはそれをうまくまとめています: http://nokarma.org/2011/02/02/javascript-game-development-the-game-loop/index.html
これがどれだけうまく機能するかはわかりませんが、whileループを使用してスレッドをスリープさせる1つの方法があります。これは単なる例です。他の言語での方法に基づいて、以下のゲームループをより適切なものに置き換えることができます。より良いwhileループを見つけることもできます ここ
let gameRunning = false;
async function runGameThread(){
if(!gameRunning){
gameRunning = true;
// this function allows the thread to sleep (found this a long time ago on an old stack overflow post)
const sleep = ms => new Promise(resolve => setTimeout(resolve, ms));
// the game loop
while(gameRunning){
let start = new Date().getTime();
gameUpdate();
await sleep(start + 20 - new Date().getTime());
}
}
}
function stopGameThread(){
while(gameRunning){
try{
gameRunning = false;
}catch(e){}
}
}
function gameUpdate(){
// do stuff...
}