0

同じキャンバス内でオブジェクトをレイヤー化する方法を調べましたが、それに関する多くの情報は見つかりませんでした。

現時点では、複数のキャンバス手法を使用して、物事を互いに重ねています

例: キャンバス ホルダー <--- これは他のすべてのキャンバスのローディング キャンバス メニュー キャンバス ゲーム キャンバス バックグラウンド キャンバスを保持します

それらを特定の順序で「」に追加することでstage = new stage (mainCanvas)、目的のレイヤリングが得られます

stage.addChild(background);
stage.addChild(game);
stage.addChild(menu);
stage.addChild(loading);

これはうまくいきますが、そのキャンバスに2つの画像がある場合、「ゲーム」キャンバスに追加された画像のzIndexを変更する方法があるかどうか疑問に思っていますか?

フィールドランナー ゲームでこの種のことが行われているのを見たことがあります。ゲームはグリッドのような形式に従い、別のシューターの上の正方形にシューターを配置すると、その後ろに再配置されます..

http://fieldrunnershtml5.appspot.com/#sd --- Chrome で動作

それがどのように行われたかについてのアイデアはありますか？

ありがとう

4

3 に答える 3

1

複数のキャンバスは必要ありません。キャンバス 2d でゲームを操作する場合、通常、キャンバスのクリアと再描画を 1 秒あたり最大 60 回行います。最後に描いたものが上になります。したがって、レイヤーをシミュレートするには、z-index に基づいて配列内のすべてのゲーム オブジェクトを並べ替え、配列内のすべてのオブジェクトを反復処理して、描画メソッドを呼び出します。

このようなレンダラーを最適化する余地はたくさんありますが、これは機能させるための基本的で簡単な方法です。

于 2012-05-02T10:52:56.010 に答える
0

Acanvasは単なるピクセルです。「レイヤー」はありません。

パララックススクロールとかをやりたいなら、同じ場所に複数のキャンバスを置いて、後ろのキャンバスを透明にして見せればいい。

于 2012-05-02T09:20:29.490 に答える
0

複数のキャンバスを使用してレイヤーを実装する手法は、完全に優れたアプローチです。また、どのレイヤーをクリア/再描画する必要があるかを追跡する必要があります。たとえばmap、スクロールしたときにのみ更新する必要があるか、GUI/HUD1 秒あたり 60 回再描画する必要はありません。

キャンバスには z-index やオブジェクトなどはなく、すべてのメカニズムは独自の実装に依存します。たとえば、描画するコマンドまたはオブジェクトの配列を作成し、zIndex (または任意の名前) で並べ替えて、各要素を実行できます。

于 2012-05-02T14:51:36.870 に答える