HTMLキャンバス要素のベクターの利点とビットマップの組み合わせ - どのように？

Question

私がしようとしているのは、キャンバス要素に非常に多くのズーム機能を持つゲームを作成することです。私は、ビットマップイメージの高性能を利用して、実行時にプログラムで作成できるという点で、ベクトルグラフィックスが持つ利点を活用したいと考えています。

私がやりたいことは、ゲーム "スプライト"の最初のフレームの画像をプログラムで作成することです。これはベクトル画像になります。しかし、最初のフレームの後に、私は画像を描画する上でCPUサイクルを無駄にしたくありません。私はそのズームレベルのビットマップ/高性能画像としてキャッシュしたいと思います。

これに続いて、ユーザーが20％以上ズームすると、より詳細な詳細ベクトル画像で画像を再描画します。上記のように、このベクトル画像はキャッシュされ、最適化される。

あなたがここに見ることができるように、これはかなり基本的な宇宙船だろう..私は最初にベクトルとして、プログラムでそれをレンダリングします。..ラスターそれは私が推測しますか？目標はCPUの無駄を避けることです。

ユーザーがズームインした場合...

同じ形状の新たなベクトル画像は、細部のはるかに高いレベルにもかかわらず、描画されることになります。これは基本的にレベル詳細システムです。この場合も、最初のプログラムによる描画の後、最大限のパフォーマンスを得るためにイメージを「ラスター化」します。

誰かがHTMLキャンバス内でこれを実現するために必要なツールについて知っていますか？ （ゲームの残りはキャンバス要素内で実行されます..）

ありがとう、あなたの考えに感謝します。

**編集：私はSVG経由でイメージをレンダリングするルートをプログラムに追加し、drawimage（）を使用してそのPNGファイルをキャンバスにプッシュするルートを追加したかったでしょうか？似たような？うーん...

Answer 1

私は自分の質問に答えることができました。

これを行う方法は、最初にSVGファイルを作成し、それを "canvg"を使ってクライアント上のPNGファイルに変換することです。 PNGは必要なものに基づいてさまざまなレベルの詳細で作成でき、このようにして動的LODシステムを作成できます。

フラッシュは、SVGファイルのビットマップイメージをキャッシュすることで自動的に同様のことを行います。これは、「プレレンダリング」と呼ばれています。 SVGが拡大縮小されていない場合、またはアルファが変更されていない場合、フラッシュはビットマップを代わりに使用します（複雑な場合はSVGファイルを再描画する方がはるかに高速です）。PNG出力のサイズ（したがって詳細）は自由に変更できますので、プレレンダリングもイベントに基づいて行うことができます。

この情報から、ユーザーがアクティブにズーム（ターゲット "スプライト"を拡大）している間にSVGが使用され、ズームが遅くなるとPNGプレレンダリングを計算するようにLODシステムを実装することに決めました。また、非常に高レベルのズームでは、CPUがSVGを高解像度で計算するのがはるかに簡単であるため、SVGを使用するだけで、ほとんどの画面をカバーするビットマップイメージが得られます。 （画面上にたくさんのアイコンを置くHTML5アイコンテストのいくつかを見てください...アイコンが大きくなればなるほど、実行は遅くなります）。

皆様のご意見に非常に感謝し、私の質問/回答が誰かを助けてくれることを願っています。

Answer 2

あなたが望むことをするための標準的な方法はないようですが、IEで失敗する可能性があります。

http://svgopen.org/2010/papers/62-From_SVG_to_Canvas_and_Back/#svg_to_canvas

あなたはおそらく、すべてのSVGゲームで行く、またはあなたのゲームに最大ズーム速度を提供し、スプライト資産として大きな画像を使用する必要があります。それは、フラッシュを使用して問題はなかっただろうが、私はあなたがとにかくフラッシュと一緒に行くつもりはないと思う。

多分、SVGを「キャンバス描画シーケンス」に変換できるフレームワークがありますが、その場合は高いパフォーマンスには賭けません。