2

状況: すべてのプレイヤーがヘビを持っているゲームを作成しています。

問題: 特殊な状況下では、プレイヤーのヘビは 1000 を超える弧を描くことがあります。ティックごとにキャンバスを再描画します (60fps を取得しようとします)。ここで、描画するアークが多すぎるため、非常に遅くなります。

私の考え：すべてのプレーヤーのヘビを画像/テクスチャに描画し、キャンバス上の各プレーヤーの画像全体のみを再描画します。

私の質問：これは可能ですか？はいの場合、何を検索する必要がありますか? 私はゲーム開発の経験があまりありません。

4

1 に答える 1

3

方法を検討することをお勧めしcontext.createPatternます。新しいキャンバスを動的に作成し、その上に複雑な画像を描画できます。一度描画を終えたら、呼び出しcontext.createPattern(dynamicCanvas, 'no-repeat')て、そのパターンへの参照を保持できます。次に、そのヘビを描きたいときはいつでも、コンテキストを適切な場所に変換し、 をパターンに設定しcontext.fillStyleて、パターンに合う長方形を塗りつぶします。一般化されたコードを次に示します。

// Only do this once per unique snake, not per frame
var patternCanvas = document.createElement("canvas");
// Set the size to be the minimum size to draw your snake on
patternCanvas.width = 100;
patternCanvas.height = 100;
// code that draws snake onto patternCanvas here
// ...

// Create the pattern
var pattern = patternCanvas.getContext("2d").createPattern(patternCanvas, "no-repeat");

// Using your real canvas that's drawing every frame
var realContext = realCanvas.getContext("2d");
realContext.save();
realContext.translate(50, 80); // x, y coordinates of where you want to draw your snake
realContext.fillStyle = pattern;
realContext.fillRect(0, 0, 100, 100); // The last two parameters are your width and height of your snake pattern
realContext.restore();

createPatternは canvas オブジェクト全体を取得でき、 を DOM オブジェクトに追加する必要がないpatternCanvasため、バックバッファのように機能することに注意してください。

パターンを描画するときは、すべて同じsave/内に描画するようにしてくださいrestore。長方形を翻訳して塗りつぶし続けるだけです。save/restoreおよび を変更するたびcontextに速度が低下するため、可能な限り呼び出しをバッチ処理する必要があります。

Canvas の描画が遅くなる理由はいくつか考えられるので、http://www.html5rocks.com/en/tutorials/canvas/performance/に記載されているいくつかのアイデアに従うことをお勧めします。

于 2013-02-03T18:22:45.633 に答える