Rendering Tilemap through Node JS

[Menakatep]

Some questions have come up, since I recently began developing an isometric MMORPG-esque JS game. I’m running a Node JS server and serving map files to the client. My question is about making the images for the tiles more efficient and how best to serve them to the client.

 

I considered a tile sheet somehow stored locally on the client machine but I have about 2000 different tiles for just the floor pieces and then a couple thousand or so walls and decorations I can use on a separate layer. So, I didn’t feel that would be as viable considering it would be accessible by mobile devices. 

 

I also thought perhaps i could run through my image folders with a php script and store each tile as a base64 image code. The as maps are requested I could serve the map file with a json object containing the necessary base64 tile information. However, does a json object have data limits of some kind that I’d reach pretty quick? Can’t imagine each map would have more than, at most, 200-300 different tiles? They might be a kilobyte and a half each.

 

Am I missing a much better way to make this work? I’m pretty new to this method of application development and would appreciate any advice!

[ivan.popelyshev]

How many images of how many pixels are we talking about? I can do calculations if you give me the numbers.

[Menakatep]

Each tile is 56 x 27 each but theyre isometric so they each contain quite a bit of empty space. 

[ivan.popelyshev]

One 4k square texture stores 11k of tiles. Seems like you can use just a pair of 2k square textures. Each is 16 MB in videomemory, or 4MB if you use DDS (PC) or PVR (mobiles) compressed formats.

Just make a big atlas, you can optimize it later. Atlas can be generated with https://github.com/krzysztof-o/spritesheet.js/ on server side.