6

Kinetic のようなものを使用する場合、キャンバス ゲームの主要な部分を異なるレイヤーに抽象化することが最善である理由 (実際、もし) を説明できる人はいますか?

もちろんそうすべきだと思いますし、これまでのところ、背景用に 1 つのレイヤー、プレイヤーのキャラクター用に 1 つのレイヤー、その他のレイヤーを使用してきました。

その後、あるレイヤーのシェイプを別のレイヤーのシェイプの後ろに配置する必要がある状況に遭遇しましたが、レイヤー全体を他のレイヤーの後ろに移動することはできませんでした。層。

しかし、驚いたことに、私はまだ必要なことをすべて行うことができます. 個々の図形やグループのイベントをアニメートしたり処理したりできます。

要するに、明示的なレイヤー化によってどのような利点がもたらされるのでしょうか? 1 層アプローチで直面する可能性のある落とし穴は何ですか?

4

3 に答える 3

6

実際、レイヤーは通常、大きな利点をもたらします。ただし、必要でない場合もあります。参考までに、PhotoShop (レイヤーあり) と MS Paint (レイヤーなし) を比較してみましょう。これがあなたにアイデアを与えるなら、それはそれです！

そうでない場合: レイヤーは組織の概念です。データをバラバラに扱うことができます。彼らは許可します：

  1. レイヤー全体に特定の変換を適用します。
  2. レイヤーごとにオブジェクトを自動的に分類して、レイヤーのすべてのオブジェクトを取得し、それらを非常に簡単に操作できるようにします。
  3. あるレイヤーで発生することはすべて、他のレイヤーで発生することから分離します。
  4. レイヤー全体を無効/有効にします。
  5. もっともっと！

ご覧のように、レイヤーは一般に、カプセル化などの抽象化と、ある程度のポリモーフィズムをコンテンツ編成レベルで適用できるようにします。1 層のアプローチがもたらす落とし穴は、カプセル化とポリモーフィズムが永遠に戦う永続的な混沌の世界からの獣です。言っ途切れる！

于 2012-08-29T07:49:19.700 に答える
5

ゲームにさまざまな要素が多数含まれている場合、すべてを描画するには時間がかかる場合があります。同じレイヤーに多すぎると、パフォーマンスが低下します。レイヤーが多すぎる場合も同様です。

チェックアウト: http://www.html5canvastutorials.com/labs/html5-canvas-kineticjs-drag-and-drop-stress-test-with-1000-shapes/

于 2012-08-29T07:08:51.013 に答える
3

組織的に言えば、noncom の答えは的を射ていました。ただし、彼が指摘したように、彼の答えは一般的なキャンバス アニメーションに関するものであり、KineticJS がそれらと同じ組織上の利点を提供する独自のツールを提供していることを指摘するのは非常に正しいです。

したがって、組織は無関係であり、私たちが持っているのはパフォーマンスだけです。そうは言っても、主な違いは、各「レイヤー」が個別のキャンバスタグに対応することです。

簡単な答えは、複数のレイヤーを使用すると、一度に 1 つのキャンバス タグのみを選択的に再描画できるということです。オブジェクトが背景の上を移動している場合、それらのオブジェクトが移動するたびに背景をクリアして再描画したいですか?

レイヤーを使用していない場合、それが起こっています。必要なのは、背景が変更されたときにのみ再び描画される背景、つまり背景のレイヤーです。

これが実際に価値があるかどうかは、アプリケーションに大きく依存しますが、それがアイデアです。レイヤー (組織外) のポイントは、必要な描画プロセスを実際に描画する必要があるものに分離することです。複雑なアニメーションでは、これは適切なパフォーマンスを維持するために非常に重要です。

参照用の jsperf は次のとおりです: http://jsperf.com/layered-canvases/3

于 2014-06-10T01:40:29.743 に答える