私は現在、小さなターンベースの迷路ゲームを構築しています。迷路は 2D で、タイルで積み上げられます。ゼルダのマップ ゲームによく似ています。
選択できるタイルは最低 256 種類あり、建物、木、壁、草、水など、さまざまな領域でそれらを再利用します。
私の計画は、Ajax と DOM 操作に jQuery 以外のフレームワークを使用せずに、できるだけスムーズに実行できるようにすることです。
ゲームエンジンはサーバー側であるため、クライアントブラウザは AI ロジックなどを実行していません。ゲームの「現在の状態」を要求し、オブジェクト/敵などを受け取るだけですが、レベルマップがダウンロードされています。はじめから。レベルは 256x256 タイルのようになり、各タイルは 32x32 ピクセルになる可能性があります... ブロック サイズはまだ決めていませんが、それが最適だと思います。もっと大きいかもしれませんが。
プレーヤーのビューポートは、おそらく 9x9 タイルまたはおそらく 15x15 タイルを占めます。次に、スクロールしてアクションを確認し、移動します。
ターン制なので「画面ちらつき60fps」の心配はありません。
私の質問は次のとおりです。クライアントでマップを生成する最適な方法は何ですか?
- 1) マップを「データ」(json など) として転送し、クライアントでタイルマップを構築するために CSS で DIV を生成する必要があります。これにより帯域幅が最小限に抑えられますが、マップをスクロールするときにクライアントの DOM が負担になるのではないでしょうか?
また
- 2) ブラウザが処理する DIV を少なくするために、完全なタイルマップまたはマップのより大きな部分 (正方形) を事前にレンダリングする必要があります。マップはほとんどパターン化されていないため、マップの再利用性が失われます。そのため、「純粋なグラフィックのダウンロード」と、ゲームの衝突などに必要なタイルマップ情報だけになります。ブラウザのスクロールはより高速になるはずです。
クライアント/ブラウザは、代わりにすべての大きな「事前レンダリング」ブロックにメモリを割り当てる必要があるため、2番目のアプローチでダウンロードすると、リソースが多かれ少なかれ必要になるかどうかわかりません。しかし、1) の「データに最適な」ソリューションである場合、クラスを使用して多くの DIV を生成し、これらをブラウザー DOM で何らかの方法でレンダリングします。
SVG とキャンバスは現在、オプションではありません。誰かがアルファ透過 PNG をキャンバスに変換し、ビューポートでスクロールできる高速な方法を提供できない限り (ただし、できるだけ多くの FPS で、別名 15 fps 以上) )