1

canvas 要素を使用して HTML5 で小さなゲームを作成しています。ほとんどのコンピューターで問題なく動作しますが、他のコンピューターでは遅れます。ただし、フレームをスキップせず、各フレームをレンダリングし続けるため、ゲームの速度が低下します。フレームをスキップする関数を作成しようとしていますが、それを行うための式が思いつきません。

あちこち探してみましたが、何も見つかりませんでした。

render と呼ばれるゲームをレンダリングする関数があり、次のようなループになっています。

var renderTimer = setInterval("render(ctx)", 1000/CANVAS_FPS);

render()
{
/* render code here */
}

助けてくれてありがとう、ブランドン・ファイファー

4

2 に答える 2

1

このパターンを使用すると、遅いことがわかっているコンピューターでフレームをスキップできます

var isSlowComputer=true;
var FrameSkipper=5;

function render(){

    // if this is a slow computer
    // just draw every 5th frame
    if(isSlowComputer && --FrameSkipper>0){ return; }

    // reset the frame skipper
    FrameSkipper=5;

    // draw your frame now

}
于 2013-03-17T05:46:20.077 に答える
0

ターゲット市場が HTML5 対応のブラウザーを使用しているユーザーである場合は、window.requestAnimationFrame を使用できます。これにより、すべてのレンダリング ロジックを単純な場所にバインドでき、必要な場合にのみ速度が低下します。1 フレームあたり 16 ミリ秒の割り当てに到達しようと懸命に努力し、60 fps に到達します。

var canvas = document.getElementById("#canvas"); (function drawFrame(){ window.requestAnimationFrame(drawFrame, canvas); // your main code would fire off here }()); ブラウザにフレームレートを理解させている限り、あなたはゴールデンです。

以前にキャンバスを使用していくつかの異なるエクスペリエンスを作成しましたが、requestAnimationFrame を使用するまでは少し不安定でした。

留意すべきもう 1 つの点は、ダブル バッファです。任意の瞬間に画面に多くのことを書き込もうとしている場合、それらすべてを 2 番目の非表示のキャンバス要素に書き込む方が簡単であることがわかりましたcontext.drawImg(buffer,0,0);。キャンバスを介したコードが多くのストリーンの下でも途切れることはないと考えている限り。

幸運を

于 2013-03-17T07:18:16.370 に答える