任意のJavascriptライブラリはオンデマンドでローカルイメージの作成とレンダリングを行うことができますか？

Question

私はブラウザゲームを構築しています。これはタイルベースのゲームです（あなたがよく知っているなら、ポケモンのようなものです）。私は約9年前にC++を使って同様のゲームを作りました。私はまだ私が使用したすべての画像と音楽を持っています。私はJavascriptを使ってこのゲームを再構築したいと思っています。

私が抱えている問題は、画像として読み込むには大きすぎる（〜300000ピクセル* 300000ピクセル）ことがあります。私は "要求に応じてロード"を巡回し、 "遅延読み込み"を行うことができるライブラリをいくつか見つけましたが、別の問題があります。約3000のマップがあります。ゲーム全体をプレイしているプレイヤーは、50ギガの画像をキャッシュすることになります。サーバーネットワークへの負荷はもちろんのこと、

ゲームはタイルベースで、一般的に（〜300000px * 300000px）マップは約100種類のマップコンポーネント（< 2MB）しか使用しないため、地図のすべてのコンポーネントを1つの画像に入れてこのようなタイルマップ：map1.pngから600

タイル（0,1）、幅100、offset_y map1.png、幅200、高さ200、450 offset_x、から

タイル（0,0）高さ100、オフセットx 650、オフセットy 500

...

したがって、マップ全体をイメージとしてダウンロードする代わりに、クライアントは2MBのイメージファイルと500KBのタイルマップをダウンロードするだけで済みます。実際のマップは、局所的に形成し、オンデマンドでレンダリングすることができます。

タイルのプレイヤー（100、100）、レンダリング長方形（70、70、130、130）

私の質問は以下のとおりです。 が任意のライブラリが行うことができますですオンデマンドでのイメージの作成とレンダリング 既存の例やチュートリアルはありますか？ CSSスプライトは何をすることができますか？ 他のキーワードやリンクがありますか？

ありがとうございます！

Answer 1

キャンバスを使用するライブラリを使用せずに、純粋なjavascriptで画像を作成できます。 しかし、彼らは* 200 200にいるとき、あなたのIMGSは、約2Mである理由を私は見ていない... スプライトは助けるが、3000ピクセルよりも大きいスプライトを持ついくつかの問題があるので、心の中でそれを維持することがあります。スプライトは、イメージがごくわずかな問題になるほど大きければ、イメージごとに数バイトだけ縮小します。

私のアプローチは、オンデマンドで画像をロードし、100枚の画像を使用することです。したがって、トラフィックはユーザの特別な必要性に低減される。プレイヤーが動いているときに各タイルのソースを切り替えてください。

Answer 2

いくつかの例をお願いしました。私はこれを前にオンラインで見つけました。

http://www.def-logic.com/_dhtml/basestation/

それはあなたが話しているかの良い例です。