web-dev-qa-db-ja.com

Javascriptで単純なゲームループを行うための最良の方法は？

JavaScriptでゲームループを作成する簡単な方法はありますか？何かのようなもの...

onTimerTick() {
  // update game state
}
javascriptgame-loop
21
noctonura
setInterval(onTimerTick, 33); // 33 milliseconds = ~ 30 frames per sec

function onTimerTick() {
    // Do stuff.
}
23
James

アプリケーションに応じて、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フレームワークに変換しました。

https://code.google.com/p/twod-js/

32
1-14x0r

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 に関する詳細な説明と使用上のヒント

14
Cody Crumrine

うん。あなたが欲しい setInterval ：

function myMainLoop () {
  // do stuff...
}
setInterval(myMainLoop, 30);
4
Brian Campbell

これでいいですか？

setInterval(updateGameState, 1000 / 25);

ここで、25は希望するFPSです。フレーム間のミリ秒数をそこに置くこともできます。これは、25 fpsでは40ミリ秒（1000/25 = 40）になります。

4
Tatu Ulmanen

これらの回答の多くは時代遅れであり、最適ではありません。現在これを行うための推奨される方法は、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);
});
1
sdgfsdh

このページはそれをうまくまとめています： http://nokarma.org/2011/02/02/javascript-game-development-the-game-loop/index.html

0
Seth Ladd

これがどれだけうまく機能するかはわかりませんが、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...
}
0
SwiftNinjaPro