ゲーム用のキャンバスとSVG
多くのチュートリアルとサイトがあり、「ゲームアプリケーションにはどちらが良いですか？」彼らは皆、SVGはゲームアプリケーションには向いておらず、キャンバスは適していると言っています。しかし、これは私を混乱させます。
- 何かがキャンバスに描かれると、それは忘れられます。
- SVG要素は、作成後、ゲーム内の他の視覚アイテムに触れることなく変更できます。
- キャンバスにはアニメーションが組み込まれていません
- SVGにはアニメーションが組み込まれています
プラットフォーマーを作っているとしましょう。美しく描かれた背景で、主人公にステージを歩いてもらいたい。 Canvasでは、ヒットボックス全体を再作成する（移動するすべてのエンティティのスポットを再描画する）か、個別のcanvas要素を作成してctxChar, ctxBG, ctxItemsなど。一方、SVGは組み込みです。<animate>彼女のタグ<use>彼女のx位置を変更するタグ（またはjsを介して手動で変更）、および別の<animate>タグで彼女のスプライトを変更します。そして、背景に触れる必要はありません。
多数の要素を同時にアニメーション化することに関しては、それがCanvasでSVGよりもどのように高速であるかはわかりません。 svg要素をグループに入れることの何が問題になっていますか？ヒットボックスの背景を再描画し、すべてのエンティティのエンティティ自体を再描画するよりも遅くなることはありますか？
編集：私の本当の質問は、SVGが機能するかどうかではなく、なぜ人々が機能しないと考えるのかだと思います。
SVG Vキャンバス
プロのゲームクリエーターとして、ブラウザーベースのゲームを作成する場合は、SVGから離れることをお勧めします。主な理由は、それが単に遅すぎるからです。 2つ目の理由は、SVGのパフォーマンスの欠如に対する解決策を見つけるのが難しいため、プログラマーとしての仕事が難しくなることです。 3番目の理由は、非常に遅いため、ゲームはすべてパフォーマンスに関するものだからです。
このページでは、SVGゲームの設計について説明します SVGを使用したWebゲーム開発への独自のアプローチ に飛び込み、すべてを読む前に、ゲームのプロトタイプを確認してください- ルーン文字と遺物プロトタイプ 。私の本の中の少しオハイオ州のハム。
これが私の検索の最初の段階であった他の試みがあると確信しています。しかし、私は良いSVGゲームをプレイしたことがありません。
それでは、SVGは何に適していますか？グラフィックリソース。 SVGは、ゲームの画像をパッケージ化するのに適した方法です。クライアントに画像を配置したら、ビットマップにレンダリングし、それを使用してゲームをレンダリングできます。美しさは、[〜＃〜] s [〜＃〜]VGの解像度に依存しないスケーラビリティと小さな画像サイズを取得できることです。ただし、ロード時にそれらをビットマップにレンダリングすることで、GPUを最大限に活用してピクセルを移動できます。 SVGはゲーム内で使用するには遅すぎる。
Canvasを使用する理由私はそれが速いので言いたいのですが、同等のJavascript /キャンバスゲームよりも10 *速く実行されるネイティブC++アプリと比較するとそうではありません。 10倍の速さは非常に重要ですが、Javascriptで得られるクロスプラットフォームの利点は得られません。
現在キャンバスは、真にクロスプラットフォームのゲームアプリケーションに最適なオプションです。 2Dまたは3DのいずれかのwebGLを使用して、フルスクリーンフルフレームレートのゲームを構築できます。 HTML5には、すべてのゲームのニーズに対応する一連の優れたAPIがあり、簡単に学ぶことができます。
私はゲームエンジンのファンではありません。それらはすべてをカバーするソリューションであり、あなたと彼らの（それほど素晴らしいものではない）方法でそれを実行するように強制する既にうまく設計されたAPIの間の仲介者です。しかし、それらはあなたに何が可能であるかについての良い概要を与えるでしょう。
Phaser は、多くのリソースと例を持つJavaScriptキャンバスゲームエンジンです。開始して何ができるかを確認するのに良い場所です。ゲームエンジン自体が販売されているという事実に夢中にならないでください。 HTML5とJavasScriptはそのままで、町で最高のゲームエンジンであり、ネイティブコードを実行し、巨大なユーザーとサポートベースを持っています。ゲームエンジンのAPIの使用方法を学ぶのに費やす時間は、HTML5 APIの使用方法（そして率直に言って、HTML5 APIは完璧であり、20年のブラウザ戦争の結果です）に費やす時間ではありません。使用して学ぶエンジン。