Any Javascript libraries can do local image creating and rendering on demand?

I am building a browser game. It is a tile based game (pretty much like Pokémon if you are familiar with). I built a similar game using C++ about 9 years ago. I still have all the images and music that I used. I want to rebuild this game using Javascript (and potentially html5 as well) so people can play it online.

The problem I am having is some maps are too large (~300000px * 300000px) to be loaded as images. I googled around “load on demand” and I did find some libraries that can do “lazy loading”, but there is another problem: there are about 3000 maps. A Player playing the whole game will end up caching 50 gig images. Not to mention the pressure on server network.

Because the game is tile based and typically a (~300000px * 300000px) map only uses about 100 different map components(< 2MB) , my approach is to put all components a map uses into one single image and use it with a tile map like this:

Tile (0, 0) from map1.png, width 200, height 200, offset_x 450, offset_y 600

Tile (0, 1) from map1.png, width 100, height 100, offset_x 650, offset_y 500

…

So instead of downloading a whole map as image, a client only needs to download a 2MB image file plus a 500KB tile map. Real maps can be formed locally and rendered on demand:

Player at Tile (100, 100), Render Rectangle (70, 70, 130, 130开发者_开发百科)

My questions are: Are there any libraries can do image creating and rendering on demand? Are there any existing examples or tutorials? What can CSS Sprite do here? Any other keywords and links I can pick up?

Thanks!

you can create images with pure javascript, without any library using canvas. But i don't see why your imgs are about 2M, when they're 200*200... A sprite might help but there are some issues with sprites bigger than 3000 px so keep that in mind. The sprite would only reduce the size by a few bytes per image, if your imgs are that big that would be your smalest problem.

My approach would be to load the images on demand and use the 100 single images. So the traffic is reduced to the particular need of the user. Switch the source of each tile when the player is moving and youre done.

You requested some examples. I found this online awhile ago.

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

It is a great example of what you are talking about.