HTML5 で 3D ビデオ スロット マシン ゲームを作成中です。
ゲームは素晴らしく、Firefox で完璧に動作します。PNG シーケンスを使用して、ゲーム内のキャラクターとエフェクトに 3D の外観を与えます。PNG の総数は 550 (アニメーションあたり 70) です。
主な問題は Safari (デスクトップ、iPad、および iPhone) にあります。100 を超える PNG の長いアニメーションを読み込むと、フレームレートが約 4 に劇的に低下します。これは、合計で約 10 MB しかないにもかかわらず、Safari の画像メモリが 550 の画像をうまく保持できないためだと思います。
ファイルサイズも重要なので、Web ゲームなので、すべての PNG を GIF に交換して、サイズを約半分にすることを検討しました。画像の。
ここでの質問は、PNG シーケンス スタイルのゲームの場合、HTML5 でこれを実行するクロス ブラウザー互換の最良の方法は何でしょうか?
これまでの私の唯一の考えは、アニメーションごとにスプライトシートを配置し、div に配置し、左/上に移動することです。あるいは、画像をプリロードする方法に問題があるのでしょうか?
残念ながら、ソース コードを表示することはできません。