Tiled2Unity: Edge Collider Support in Tiled Layers

by Seanba on July 6, 2014

Edge Colliders for One-Way Collision

(Note: You can play the results of this tutorial in the Unity Web Player here. You can also find the Unity package and source Tiled files by downloading here.)

Judging from the emails I’ve been getting, my little Tiled2Unity tool is proving to be useful for developers wanting to bring their Tiled Map Editor levels into their Unity projects.

The best received feature in Tiled2Unity is the ability to build up collision geometry from the tiles you lay down — but it only supported creating a PolygonCollider2D from rectangle and polygon objects. With the release of Tiled2Unity 0.9.3.0 (download latest Tiled2Unity here),  support has been extended to polylines which are represented as EdgeCollider2Ds in Unity.

EdgeCollider2D Example

The most obvious use of this feature is for the type of one-way collision that you find in so many old 2D platforming games. That’s cool but I’ve put together a different kind of example that takes the moving platforms from Mega Man 2 (yes, again with the Mega Man references) and shows how they could be implemented with help from Tiled2Unity.

Moving Platform in Mega Man 2

These platforms move along a charted path and seems like a great use for the EdgeCollider2D class in Unity — but having to draw out that path by hand would be a total pain. Instead, we’re going to add polylines to the tiles that make up that platform path and have the Tiled2Unity exporter create the EdgeCollider2D object for us. This way we could change the visuals of the path and the physical colliders would automatically update to match.

Adding Polylines To Tiles

We start off with the platform-map.tmx file in Tiled …

Mega Man2 Map in Tiled

Just like we’d add polygons and rectangles to tiles in Tiled we can add polylines using the Tile Collision Editor.

Tile Collision Editor - Adding Polylines

After adding all the polylines to all the “path” tiles we can launch Tiled2Unity and preview the results …

Edge Collider Preview in Tiled2Unity

That path gets built into one continuous EdgeCollider2D component with 44 vertices which is exactly what we wanted. The example comes with a Platform sprite which is programmed to traverse that path (see the custom PlatformCharacterController.cs script).

Tiled2Unity Map Exported to Unity With EdgeCollider2D

And we’re done. Feel free to download all the tutorial files or play the demo. Send questions to me via the comments or email. Happy developing.

{ 14 comments… read them below or add one }

Tim July 13, 2014 at 9:56 pm

Just wanted to thank you for this awesome tool! I was looking for a Tiled importer for Unity, and I’m really happy I found Tiled2Unity. The support for colliders and properties is a huge help as well. I’m really excited to start using it for my Unity projects. Thanks Sean!

Tim July 18, 2014 at 4:37 am

I seem to have found a small bug that prevents the exported prefabs from working in Unity. It took me a while to figure out why, but I found that a space in my tileset filename was causing the exported prefab to be an empty game object. As long as there is no space in the tileset filename, everything works fine!

Seanba July 18, 2014 at 10:54 am

Thanks for the bug report, Tim. I’ll put in a fix for this over the weekend.

Edit to add: Fixed now. The problem is catching when Unity renames meshes on us. In this case it was when you use texture files with spaces in their file names (the generated meshes get their names from a combination of the layer and texture they are tied to — this is what allows us to support multiple layers using multiple tilesets). Thanks again for the bug report.

Peter August 5, 2014 at 6:19 am

I’m having an issue where my prefabs created by my custom importer are tiny. The prefab they’re based on is the correct size but every generated block is too small to even be seen. I thought the fact I’d used “unity:scale” as a map property to get the map the correct size, but even removing this property results in generated prefabs much, much smaller than everything else.

Any idea why my prefabs are being made so small?

Peter August 5, 2014 at 6:28 am

By setting the Pixels To Units for the spritesheet being used to 1, the prefabs appear the corrext size, however they also spawn down and to the left of their position in Tiled (half their width to the left and half their height down), as well as not being given Box Collider 2Ds. For the colliders I’m given the warning:
“The collider did not create a collision shape as it failed verification. This could be because it was deemed too small or its vertices were too close. Vertices can also become close under certain rotations.”

Peter August 5, 2014 at 7:02 am

Both comments were intended for this page: http://www.seanba.com/megadadadventures.html
Apologies, had your site open in multiple tabs.

Seanba August 5, 2014 at 3:39 pm

Hi Peter, perhaps you’ve found a bug. If you send me your *.tiled2unity.xml file that is generated by Tiled2Unity then it may be good place for me to start looking. Thanks.

Josh October 22, 2014 at 3:30 pm

If i am looking to have doors and various other interactable objects in my 2d levels, is it possible to add the objects in Tiled and then be able to add various scripts to them in Unity?

Seanba October 26, 2014 at 12:57 pm

Josh, I do this all the time with Tiled2Unity. The last example on this page shows how I do this for sprites that I want to spawn into the world.

P.S. Please forgive the lateness of my reply.

Jeff October 29, 2014 at 4:11 am

Hi Sean, I tried this tool today and it worked wonderfully. Thanks so much for releasing this (especially for free) and thoroughly explaining how it works. I may be back with questions once I dive into animated tiles and object layers, but for now I just wanted to let you know I appreciate all the work you’ve done! I also checked out your Megaman/Cutman project and was really shocked to see that you managed to faithfully recreate not only the graphics but the physics too. Well done!

[Seanba says: Thanks, Jeff. The precursor to Tiled2Unity was the best part of tech to come from the Megaman in Unity exercise. I’m glad to see other people are finding it useful.]

Elroy February 16, 2015 at 10:48 am

Thank you for your efforts for making Tiled2Unity.
I’ve got a slight issue with Tiled though. I’m unable to fit the collisions into the map.
I open up the map in the Tiled editor.
After that, I use the Tile Collision Editor and add the respective polygon colliders.
I save the map and reimport the map into Tiled2Unity but it does not show the finely dotted lines which represent the colliders. Please do help me with this problem. Thank you for your time.

Nick Chavez January 30, 2016 at 6:58 pm

Hi Sean,

You mention this at the beginning of the post, but how would one make one way platforms as in Mario? I used the polyline collider and specified it at the top of the platform, but this still does not let objects pass through from under. Any ideas?

Seanba sez: Hi Nick, if you’re using the physics stuff that is built into Unity then you can look at the Platform Effector 2D class. Because I desire pixel-perfect collisions I shy away from rigid bodies, gravity settings, and the like and use a series of raycasts to do collision checking instead. In that case, I don’t check for collisions against collision with up normals if I’m moving up — if that makes sense.

Berdu Smith February 9, 2016 at 4:18 am

Hey I don’t know if i did something wrong but if i try to add colliders in tile collision editor I’m stuck on the size box and cant draw anything on the tile. The buttons on the main screen is also grayed out

Seanba sez: Hi Berdu, that’s a small annoyance with the Tiled Map Editor when you’re using tileset (TSX) files. You need to “import” the tileset first, then make your changes, then “export” the tileset back out.

Wowsers May 28, 2016 at 1:44 pm

I’m quite stumped here as to how I can access a property in unity that I make in tiled, can you enlighten me in how to make a custom one?

Seanba sez: Hi Wowsers, during import into Unity, any custom property that you have in your Tiled file will be passed on, automatically, to a ‘Custom Importer’ that you have to create. I talk about Custom Importers in this post here: http://www.seanba.com/megadadadventures.html.

Leave a Comment

Previous post:

Next post: