html5キャンバスの一般的なパフォーマンスのヒント
私は主にモバイルデバイスをターゲットにしながら、html5キャンバス用のゲームを開発しています。キャンバスは、利用可能な最大の解像度にサイズ変更されるため、ほぼフルスクリーンゲームになります。
1024x786のキャンバスになるiPadの場合。このような解像度では、フレームレートが大幅に低下します。 iPhoneの480x320のような小さな解像度では、ゲームはスムーズに実行されます！これは、デバイスの充填率が制限されているためだと思います。
とにかく可能な限り最適化したいと思います。 html5キャンバス開発に関する一般的なパフォーマンスのヒントを投稿していただければ幸いです。
こちらもご覧ください キャンバスパフォーマンスの最適化 html5rocksに関する記事。モバイルブラウザを含むjsperfデータが含まれています。
読むことができます iPad HTML5アプリを作成して本当に高速にするThomas Fuchs
彼の重要なポイント：
- 画像は物事を非常に遅くします–それらを取り除きます
text-shadow＆box-shadowは避けてください- ハードウェアアクセラレーションは非常に新しく、バグがあります（同時アニメーションは制限されています）
- 可能であれば
opacityを避けてください（ハードウェアアクセラレーションによるレンダリングに干渉することがあります） translateではなくtranslate3dを使用します（後者はハードアクセラレーションではありません）
パフォーマンスを大幅に向上させることができるその他のポイント：
getImageDataをできるだけ頻繁に使用しない（大幅な速度低下）[2]- より頻繁に変更される小さなパーツを再描画するために、複数のキャンバスを組み合わせます
Chrome/FirebugProfileを使用してアプリを benchmark することで、どの機能が遅いかを表示することもできます。
[2] http://ajaxian.com/archives/canvas-image-data-optimization-tip
さらにいくつかのリンク：
- HTML5 Games 0.2：整数はあなたの友達です
- deviantART muroでのHTML5キャンバスパフォーマンス
- ゲームエンジンリスト 。特に参照してください。追加リンクについては「その他」。
私はあなたのゲームに精通していないので、具体的なヒントを与えるのは難しいです。ただし、レンダリングを複数のレイヤーに分割することもできます。これは、静的要素がいくつかある場合に特に意味があります。このようにして、一部のクリアを回避し、全体的に優れたコードを作成できます。