複数のキャンバスオブジェクトを使用することは良い習慣ですか？

私たちはHTML5とJavaScriptを使ってジャンプアンドランゲームを開発しており、そのための独自のゲームフレームワークを構築する必要があります。ここにいくつかの困難があり、いくつかのアドバイスをお願いしたいと思います：

ゲームのルートを表す「ステージ」オブジェクトがあり、これはグローバルなdivラッパーです。ステージには、div要素でもある複数の「シーン」を含めることができます。再生タスク、一時停止などのシーンを実装し、それらを切り替えます。したがって、各シーンには、キャンバスを表す複数の「レイヤー」を含めることができます。これらのレイヤーには、「ObjectEntities」が含まれます。これは、画像または長方形などのその他の形状を表します。各Objectentityには、あるエンティティの画像を描画できるようにするための独自のtemporaryCanvasがあり、別のエンティティには長方形が含まれています。

ステージにactiveSceneを設定したので、ゲームをプレイすると、アクティブなシーンだけが描画されます。を呼び出しactiveScene.draw()、すべてのサブレイヤーを呼び出して描画し、エンティティを描画します（呼び出しdrawImage(entity.canvas)）。しかし、これはある種の良い習慣ですか？描画する複数のキャンバスがありますか？各ゲームループでは、すべてのレイヤーコンテキストがクリアされ、再度描画されます。たとえば、バックグラウンドレイヤーがまだ残っている場合、…これを一度描画して、毎回クリアして再描画するほうが便利ではないでしょうか。または、ステージなどでグローバルキャンバスを使用し、このキャンバスを使用して描画する必要がありますか？しかし、これは高額になると思っていました...

このページには、キャンバスに作成できる最適化の優れたリストが含まれています。「複雑なシーンに複数のレイヤー化されたキャンバスを使用する」というラベルの付いたセクションでは、大きくて高価なオブジェクト（背景画像）を頻繁に再描画する必要がないため、複数のキャンバスオブジェクトを使用する方が多くの場合実際に優れている理由について説明しています。発射体）。ここにあなたが始めるためのチュートリアルがあります。簡単に言えば、単純に異なる描画を必要とするもののためにいくつかのキャンバスを作成し、それらを絶対配置で並べます。

position:absolute;
left:0px;
top:0px;

各キャンバスオブジェクトは、z-indexを使用して名前を付け、階層化できます。

<canvas id="layer1" style="z-index: 1;" />
<canvas id="layer2" style="z-index: 2;" />

最後に、さまざまなコンテキストを利用します。

function draw1() {
    context1... // draw background
}

function draw2() {
    context2... // draw character
}

function draw3() {
    context3... // draw bullets
}

実際、Contre Jourがこれを行います。詳細はあまりわかりませんが、詳細なテクニカルノートが見つかるかもしれません。あなたが彼らのゲームをプレイするなら、私はあなたのキャラクターが相互作用する陸地のそれぞれがキャンバスであると信じています。

ゲームのアクティブな部分をキャンバスに分けるのは良い考えのようです。たとえば、RTSを作成している場合、コマンドバーは別のキャンバスであり、たまにしか再描画しないことに意味があるかもしれません。