Tiled Animation Editor Support Added to Tiled2Unity

by Seanba on September 1, 2014

 Warning: This is an old post! Animation support in Tiled2Unity is now greatly optimized as of release You can now be more confident that a large number of animations will not sink performance as before.


Thanks to prodding and pleading by users I’ve decided to bite the bullet and add support for tile animations that newer builds of Tiled Map Editor allow through its Animation Tile Editor.

Tile Animation Editor

In a previous tutorial I demonstrated creating animations by using a combination of layers, tags, and specialized runtime behaviors. This approach is much better.

Like everything I else I try to do with Tiled2Unity, the animations from Tiled just work without any extra modifications. To achieve that, I’ve added a TileAnimator script that is automatically added to your prefab during the import process if animations are detected.

Tile Animator instances

Word of warning: Tiled layers are represented as meshes in Unity. In order to support animations the TileAnimator instances must modify these meshes in real-time. Under some conditions and platforms this may degrade performance. (I doubt it will be any worse then other attempts at animating tiles though.)

What You’ll Need

In order to get Tiled animations into your Unity projects through Tiled2Unity you will need the following:

  • Tiled2Unity version or later (download here)
  • A daily build of Tiled Map Editor that support the Tiled Animation Editor. I used the Aug 1st, 2014 build. (download here)

As of this writing the collision and animation editors in Tiled are not in a stable build, hence the need to get a daily build.

Example Project

Being a big fan of the Zelda series I’ve taken a room out of the Desert Palace from The Legend of Zelda: A Link to the Past as an example. I like how the animated water and lamps bring a bit of life to the room – and no custom scripting or sprite objects are needed.

Tile Animations

You can download the example project here to see it for yourself. It includes both the final Unity project and the source Tiled files (map and textures).

Happy developing.

{ 10 comments… read them below or add one }

Jogabba September 1, 2014 at 4:01 pm

I’ve noticed that, in order for animated tiles to look animated, it’s compulsory to use the Tiled/TextureTintSnap shader. However, until now I’ve been using another shader because in TextureTintSnap, Unity’s default lighting systems do not work. Is there any way to make tiles look animated without using the default T2U shader?

By the way, thank you for your efforts on helping developers. I’ve just started my first project and I have no words to say how much useful is your work. Keep it up!

Seanba September 1, 2014 at 5:37 pm

Hello Jogabba, yes, there is a dependency on the shaders that come with Tiled2Unity. However, you can edit other shaders to get the same effect by rejecting vertices that have a negative ‘z’ value.

You’ll need something like this in your vertex shader …

if (IN.vertex.z < 0)
  OUT.vertex.w = 0; // 'rejects' the vertex
  OUT.vertex.z = 0;

It’s a bit of a hack but Tiled2Unity animates tiles by toggling between negative and positive ‘z’ values in the generated mesh. The absolute value of each ‘z’ component is the identifier of the frame being shown/hidden. Hope that helps.

Jogabba September 1, 2014 at 7:38 pm

Yep, it’s working now! Thanks a lot! 😀

GreyToad October 22, 2014 at 3:31 pm

Hi Sean, Thanks for creating such a useful tool and making it free 🙂

I recently learned of Tiled2Unity from another forum, and am really interested in it for its animated tile capabilities. I’m considering switching from my current solution, but am curious if it can do what I need, which is to create levels during run-time. I am creating a rogue-like and will need to generate random levels. Your help would be greatly appreciated!

Seanba October 22, 2014 at 4:00 pm

Hi GreyToad, I get asked about procedurally generated content often. Tiled2Unity assumes you are using Tiled to create maps/levels/whatever. The only way I could see it working is if you build pieces of levels in Tiled, export into your project with Tiled2Unity, and then stitch those pieces together with some custom scripting.

facehead1992 November 1, 2014 at 3:27 pm

Hey Sean,

I’m in the same predicament as Jogabba as far as the desire to include lighting (for a Fog O’ War effect), but as I’m not familiar with Shaders and their usage, and I’m sure most beginners like me won’t be, I would like to suggest an alternative feature be added to Tile2Unity to add the ability for simple lighting on animated tiles. Or perhaps you could simply write an article that details exactly how one could design a valid material / shader?

From what I understand, someone just needs to follow the vertex/fragment shader tutorials inside the Unity manual and add the IN.vertex and OUT.vertex snippet you detailed above inside the CGPROGRAM section? Is that what makes lighting on your Tiled2Unity animated imports work?

Thank you for all the hard work. It appears to be a fantastic program so far.

Rafael November 27, 2014 at 1:08 pm

I really appreciate your lessons using tiled. Thanks man.. I came here trying to find some sollution to slopes collision and I found that I’m using almost the same concept using sprite kit and its physicsbodies.

William January 13, 2015 at 9:35 am

Hi, thank you very much for writing this tool, prior to it I had to use something similar (but way more basic) I wrote myself to import maps into unity. I used to import the tiles as prefabs and create the level “on the fly” inside the awake() function, your method is a lot better, expecially with collisions (with my method even a long platform would have been a sum of box colliders).

Anyway I have a problem, how can I tell tiled2unity to create some tiles as prefabs? I need to add rigidbody or other components to some of them and I don’t know how to do that right now.

Kulu January 18, 2015 at 10:15 am

seanba hello , I want to thank you for your contributions and helps you bring to the community. In fact , I work with tiled2unity it’s been two days, but I can not have a good result so I come to you to help me. My card goes in the direction of Mario Bross , a horizontal card. I realized the card with tiled but when I import it into my szene it is too big that I do not ensorts me with the other element ( sprites ).

robutMike January 31, 2015 at 10:04 am

You mentioned that animated tiles might be computationally expensive since each frame is its own mesh. Would it be better to simply instantiate a prefab animated tile into that area when you first load the scene?

Additionally, are there any plans to allow “marker tiles” that can be replaced with prefabs when the room is instantiated? For example, a coin marker would be replaced with a coin prefab that has its own set of components and whatnot.

Just curious! Thanks again for your great tool.

Leave a Comment

Previous post:

Next post: