(Nicole Brauer) #1


An extended Tilemap class that allows defining animated tiles in Flash- and HaxePunk.

I really needed animated tilemaps in my project so I wrote this quick addon to make it as easy as possible. It mostly works with an array that store the different tile animations (with frames, framerate, timer and such) and the setTile() function.

The end result looks something like this:



  • Animated Tilemaps!
  • As many animations as you like
  • Each animation can have different amounts of frames and different framerates
  • ???

How to install

You can find everything your need here on GitHub: https://github.com/voec/punk.AnimatedTilemap

Basicly just copy over either the HaxePunk or FlashPunk version of AnimatedTilemap to your game and you’re ready to go! (You can also copy it into your *Punk directory)

How to use

Using AnimatedTilemap is really easy, it works much like the Spritemap class. But I have written a small guide anyway to make it a bit simpler:


So first of all you are going to need a tileset graphic. Let’s use this one:


Each tile is 32x32 pixels. As you can see, there are 2 animation in there: One in the second row for the flowers bobbing around and one in the bottom row for the water animation.


Draw a level with this tileset in your level editor of choice (I use Ogmo) like you would with a normal tileset.

When you want to draw some animated flowers or water in your level, make sure to draw them using the first frame of their animation in the tileset (so use the first tile from the left in this case). This is going to be important later.


Now to create the tilemap in your game, instead of adding a normal Tilemap, make an AnimatedTilemap:

var tilemap:AnimatedTilemap = new AnimatedTilemap(YOUR_TILESET, 256, 96, 32, 32);


(For a tutorial on how to use Tilemaps or how to import Ogmo levels in *Punk have a look at www.youtu.be/TPPzgB3fv8A)


Now this should already work like a normal Tilemap. To add animations just do this:

tilemap.animate([8, 9, 10, 11], 1);

This syntax is really similar to Spritemaps, where the first parameter is an Array of frames that you want as your animation and the second parameter is the framerate at which to play the animation.

The frame index also works just like it does with Spritemaps, basicly you imagine every tile in your tileset as a frame in a Spritemap.

So if you wanted to also add the water animation, you see the tile is at the 16th position in the tileset and has 3 frames:

tilemap.animate([16, 17, 18], 1);

You can add as many animations as you want! (But you should probably not overdo it…)


And that’s it already!

The animations will start automatically when the AnimatedTilemap is added and will loop on their own. Pretty easy.

My code is horrible and I’m a horrible person

If you have any suggestions on how to improve this, for example performance-wise, please let me know or create a pull request or something. I searched very long for a method to do this and just wanted to share it with anyone that could use it, but I am certain there is lots of room for improvement.

If you have any questions how to use the class or maybe ideas for new features please let me know as well!

(Jacob Albano) #2

This is exactly what I was just about to start looking into. I was talking about making a tiny networked game with some friends and we all had this sort of style in mind – Pokemon even came up during the brainstorming phase.

Regarding terrible code…I took your word for it and gave the class a look, but it looks totally fine to me. If I was going to be super nitpicky I’d suggest caching the length properties of arrays you’re looping over, but that’s a tiny optimization that won’t matter in the vast majority of cases. The API is intuitive and minimalistic, everything’s well-documented, and the one feature I was going to suggest (offsets for animations to make adjacent tiles seem more natural) is already present if you use permutations:

tilemap.animate([8, 9, 10, 11], 1);
tilemap.animate([9, 10, 11, 8], 1);
tilemap.animate([10, 11, 8, 9], 1);
tilemap.animate([11, 8, 9, 10], 1);

Will definitely be using this in an upcoming project.

(Nicole Brauer) #3

Thank you very much for the feedback! I’m quite happy that it seems to be not as bad as I thought. I really have not a lot of experience with writing new classes and all that and I did go over it lots of times and rewrote much of it, but I’m glad it turned out nice after all.

I’ll keep your suggestions in mind, especially having offsets built in might be a good addition. Thanks :^)