refactored to use batch rendering

[zcking]

Hi @faiface I caught your last comment on my last PR about using batch rendering in this example instead of drawing to the window directly! I just finished reading the wiki today so I went ahead and made the batch tweak. Thanks for allowing me to contribute here--I've learned a lot already about Pixel and have to say I'm having a lot of fun with it!

So quick note btw, I used a map[string]*pixel.Batch where the string key is actually the tileset's image source path. I did this because even though there is only one image used in this example tilemap, the TMX file supports multiple images and could therefore require multiple *pixel.Batch instances; using a map prevents duplicate batches (and sprites) from being created when they use the same image. I learned that technique when working with SDL2 a long time ago :)

[faiface]

Great, thanks!

There's just one more problem with your code, sorry :). You draw the batches by iterating over a map. Iteration over a map has a random order (and each iteration order may be different from another). That means, that when you have overlapping sprites from different spritesheets, it's random which one will be on top.

There are multiple solutions to this problem. For example, you can create an additional slice of batches that determines the order. Or you can have an array/slice instead of a map and have a separate map that maps names of spritesheets to indices. Choose whatever solution you like.

Looking forward to merging this :)

[zcking]

Thanks for the excellent observation, and suggested solutions! I liked the idea of mapping the image sources to an index "pointer" in a slice/array, so I went with that approach!

[faiface]

This looks good now :) Thanks. Merging.