Play the game at
Check the source code on Github.

Thursday, 12 February 2015

Drawing Map Efficiently

There are many ways to draw the map where the player is. This is a quite big client side operation and map images take a lot of bandwidth so optimizing it is important.

The most intuitive way is to generate a giant image representing the map and simply drawing it. The problem with that approach is that the browser handles large files not very well.

A better way would be to subdivide the map in regions and only draw the region where the player stands. The main problem with that is region transition. If the player stands near the edge of a region, he will see nothing. One way to fix that would be to make larger regions overlapping each other. But by doing so, you would duplicate data.

Another approach, which is the one I'm using in Raining Chain HTML5 MMORPG, is to make quite tiny regions and draw multiple of them at the same time. Check here for a map image example and here for the implementation (check MapModel.draw function).

In another post, I will talk about another option, which is to only send the double array of data about the map and using that data to generate the image on the fly on the client side.

No comments:

Post a Comment