I've been working on my game editor and doing some performance tests. In the meantime I realized that my editors performance goes significant down if I draw a large map and zoom it.

100% zoom = 112 tiles on the screen

50% zoom = 364 tiles on the screen

25% zoom = 1350 tiles on the screen

12.5% zoom = 5247 tiles on the screen

5247 is a much of it. But that are only these tiles which are need to draw.

for (var layerX = minTileX; layerX < maxTileX; layerX++)
for (var layerY = minTileY; layerY < maxTileY; layerY++)

I decided to render areas of the map to rendertargets and draw only these. The framerate goes up. But if I want to scroll it goes down again, because it have to recreate and render all rendertargets.

Maybe I could draw the whole map on rendertargets (256*256 pixel per rendertarget => 63 rendertargets on a 500*500 large tilemap with 32px tiles)? But I dont think thats is the right way to do it.


1 Answer 1


Here are a few strategies you could try:

  • Precalculate scaled-down versions of your tiles. When you use the full-scale tiles as source and let your engine scale them down everytime it draws them, it needs to perform the interpolation algorithm again and again. But when you precalculate a version of each tile in each zoom-level when you load it, blitting the image stays a trivial copy-operation even when you zoom in- or out (in the context of 3d engines, this is referred to as mip mapping).
  • Don't redraw your whole map again and again every frame. Keep the last frame in memory and only redraw those parts which actually changed. You can use dirty rectangles for this. When something happens which requires a graphic update, you calculate a rectangle which covers all tiles affected by that event. When two such rectangles intersect, you replace them with a new rectangle which covers both. When you draw the next frame, you only need to loop over those rectangles which are marked dirty. When the map scrolls, draw the last frame with an offset of a few pixels and only draw those parts which newly appeared on the screen.
  • Make sure you use a graphic API which uses hardware-acceleration. This can make a lot of difference, even for 2d engines. You didn't say anything about which API you use to draw your maps. It might be possible that you are using one which isn't designed for performance.
  • \$\begingroup\$ Would you mind going into a bit more detail about your second point (only draw changed parts) or link me somewhere appropriate? I can think of some methods, but I'm really not sure what the best way to go about this would be. \$\endgroup\$
    – Christian
    Jun 18, 2014 at 9:32
  • 1
    \$\begingroup\$ @Christian A common technique to do this is using Dirty Rectangles. I updated my answer. \$\endgroup\$
    – Philipp
    Jun 18, 2014 at 9:40
  • \$\begingroup\$ Thanks, very interesting and helpful. I was suspecting something along those lines. \$\endgroup\$
    – Christian
    Jun 18, 2014 at 11:01

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .