Note: My Tiled2Unity utility is available for download on this page. Also, please consider contributing to Thorbjorn Lindeijer’s Patreon for continued Tiled Map Editor support.

I’ve been working on an upcoming Tiled2Unity tutorial to help people that are trying to get information for a specific tile at a specific location at runtime.

For instance, say your working on a game like Advance Wars where the game logic has a dependency on the type of tiles that make up a level (grass, trees, mountains, etc.)

Advance Wars 2 (Copyright Nintendo)

Achieving this with Tiled2Unity is done through having all the different tile types (with collisions) on separate Tile Layers and using a raycast against their generated PolygonCollider2D objects. This gives you the ability  to know which “type” of tile you are “using”. Further, I use Tiled’s Automapping capabilities so that I only manage one Tile Layer and let the Automapper take care of the rest. (More on that in the upcoming tutorial.)

The idea isn’t that difficult but the previewer in Tiled2Unity was a huge disappointment for a map with multiple collider layers. Here is a screenshot of it in action …

Can't see collisions

What a mess. There’s six different kinds of polygons in that picture (plus a bunch of rectangles to indicate sprite location) but it’s impossible to tell where they are.

So, the latest versions of Tiled2Unity has previewer options …

Right-click to bring up Previewer Options

… that allow you to select which layers are being shown in the previewer. They also allow you to choose a color for the collision polygons on a per-layer basis:

Previewer Options (Per Layer)

(BTW, the color settings are saved to file so that you don’t have to reset them every time you use the previewer. Other maps that use similar layer names will inherit these colors while previewing.)

Now we can get a much better sense of how polygon colliders are going to be created in Unity.

Much better view of collisions

We can take this one step further. The collision layers in this example (CollisionWood, CollisionMountain, etc.) make use of the unity:collisionOnly custom property. This tells Tiled2Unity that we only want collision polygons for these layers and ignores the mesh that would normally go with them.

Given this we can preview only these layers and get an even better sense of the colliders that will be created by Tiled2Unity. Notice how the blue water polygon stands out. (And yes, that’s one polygon in Unity.)

Viewing only collisions

What I like most about Tiled2Unity (and why I made it available to the public as a side-effect of my Mega Man game) is that all of this information for the map is going to be represented by just a few polygons – and not some O(N2) number of per-tile objects.

And now, it’s easier to see that in the previewer. Happy developing.

{ 4 comments }

unity-5-logo

I’ve been waiting a long to get my hands on Unity 5 and I’m happy to see that Unity Technologies has followed the lead from Epic’s Unreal 4 Engine and has made their full product free to hobbyist developers — not that you needed any of the professional features to use Tiled2Unity.

I’m also happy to announce that the latest version of Tiled2Unity is compliant with Unity 5. Enjoy.

Update for Unity 4.x users: This update had inadvertently broken scripts for those of you that haven’t jumped to Unity 5 yet – a completely plausible scenario given Unity 5 is less than a week old. I just put up a new version of Tiled2Unity that supports both versions. Sorry for the inconvenience.

For Visual Studio users: When switching between versions of Unity I’ve found that I often have to delete the solution files and have Unity regenerate them. Try that if you are still getting compile errors.

Reminder: The tool we all love the most for 2D development, Tile Map Editor, is seeking support on Patreon. Please consider throwing Thorbjorn a couple of bucks . He’s been good to us.

{ 5 comments }

Scaled Vertices

A while back I offered a solution for Tiled2Unity users that wanted to partner scaled sprites (using a Pixels Per Unit value that was often the 100:1 default) with exported maps that used the (totally more sane) metric of one pixel per one unit in Unity.

Turns out that solution sucked. (more below)

Now, starting with Tiled2Unity 0.9.8.1, the desired scaling can be baked into the vertices that make up your meshes and collision geometry.

You can set the vertex scale in the Tiled2Unity UI:

Scaled Vertices in Tiled2Unity UI

Or you can use a command line argument (-s=VALUE or --scale=VALUE).

  • From Tiled: Tiled2Unity.exe %mapfile -s=0.01 c:\My\Unity\Project\Folder
  • From command line: Tiled2Unity.exe c:\My\Map\Folder\MyMap.tmx --scale=0.01

Both examples scale your vertices down to 1/100th of a unit which will be the most common. You can use other values though.

Problem With the Original Solution

The old way of scaling your exported maps was to instruct Tiled2Unity to hardwire the Transform component of the created prefab so that its scale matched the unity:scale map property in your TMX files. This became be a problem should GameObjects transfer in and out of your object hierarchy which is a common enough thing someone may want to do.

Not to beat a dead horse (and I say this as someone with a ton of enthusiasm for Unity) but I view the Pixels Per Unit setting in Unity to be a huge hack just to get sprites working with Box2D Physics which is a bad idea anyway for retro 2D games. I just don’t use it. However, if that’s the way you roll I now encourage you to use vertex scaling to get the job done.

If you decide to go this route keep in mind that the unity:scale property is still honored so make sure to rip it out of your TMX files. Otherwise, you’ll end up with prefabs that are scaled twice over.

Happy developing.

Update: User Adam offers an alternative way to think of scale in relation to physics …

For games that do use the physics engine, it seems to me that setting the pixels per unit to the size of your tiles makes sense, in my case 16. That’s because as far as the physics engine is concerned, one unit is one meter. With a tile size of 16, 100 gives you colliders that are too small and 1 gets into some large values that make me worry about floating point errors.

I can’t argue that. For people relying on the built-in 2D physics provided by Unity this sounds like a reasonable approach.

By the way: If you enjoy using Tiled then please consider contributing to Thorbjorn Lindeijer’s Patreon so that he can work on Tiled fulltime. It’s a great deal for our development community. Even a buck or two per month helps.

{ 2 comments }

Support Tiled Map Editor on Patreon

For a long time now, Thorbjorn Lindeijer’s Tile Map Editor has been one of the most essential tools for 2D game development. My homage to Mega Man in Unity was created with Tiled and that editor combined with some hand-rolled exporting tools became so important to my development process that it gave birth to Tiled2Unity which is basically the only reason for my blog’s existence now.

And you know that super hot Titan Souls game we can’t wait to get our hands on? They credit Tiled as their favorite game-making tool.

Titan-Souls-Screen-2

Thorbjorn has done our hobby a great credit and I know from releasing Tiled2Unity to the wild that support and additional features can be overwhelming for those of us with a day job.

So let’s make Tiled Map Editor development Thorbjorn’s new fulltime job.

Tiled on Patreon

On Thorbjorn’s Patreon page he has 3 milestone goals:

  1. $500 a month: 1-day per week focus on Tiled.
  2. $1500 a month: 2-day per week focus on Tiled.
  3. $5000 a month: Fulltime development on Tiled and other game development tools.

Even his first milestone would be a benefit to our game development community but I think we should give him the whole enchilada. At $5000 a month it’s a steal. Do you know how much it would cost a business to hire a fulltime, experienced senior-level programmer with a proven track record and a popular product to their name? The salary alone is in the six figures. Add benefits, employment tax, equipment, software licenses, etc. and you could double that expense.

I’d imagine Tiled has many tens of thousands of enthusiastic users so even a contribution of $1 a month from people that care should get him there easily. Please contribute and help me spread the word.

The way I see it, Tiled is our version of Photoshop and since a Photoshop subscription costs $10 a month then that sounds like a good level of contribution for Tiled. That’s what I’m in this for but if I could get only 5 of you Tiled2Unity users to chip in any amount and let me know about it then I’ll double my monthly patronage to $20. Deal?

We’re in a golden age of revisiting the kind of retro games that we grew up on and I want to see more of that stuff out there. That’s why I made Tiled2Unity free for everyone to use and why I strongly support Thorbjorn’s efforts to make Tiled even better. Join me.

Edited to add: I can’t believe I missed this but this past summer’s love-letter to the NES glory days, Shovel Knight, was also made with Tiled. See what I mean? This technology is totally worth getting behind.

Shovel Knight

{ 0 comments }

Tiled2Unity is on GitHub

by Seanba on February 15, 2015

 

Update: Tiled2Unity is now officially supported on Mac and Linux platforms as a command line utility through Tiled2UnityLite.


 

In keeping with my decision to keep Tiled2Unity free and choosing the permissive MIT License for it I have recently put all the source up on a public GitHub repository.

Full disclosure: I’m new to GitHub so bear with me if I make a mess of it. I’m a long-timer user of Perforce and Subversion and have been a bit of a dinosaur when it comes to Git.

Tiled2Unity on GitHub

{ 27 comments }

 Warning: This is an old post! Animation support in Tiled2Unity is now greatly optimized as of release 1.0.0.0. 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 0.9.5.3 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 }

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 }

The Real Life Adventures of MegaDad

(Note: All the examples in this post are playable in the Unity Web Browser here.)

I recently introduced my Tiled2Unity Utility where I showed how to get started with Unity2Tiled and walked us through a couple of simple examples.

Now I want to show off some actual gameplay. In these examples we’ll see how a “real” game could interact with our exported Tiled maps. We’ll be introduced to concepts like setting Unity Tags and Layers automatically and reacting to colliders. I’ll show you how I achieve tile map animation and how you can hook into the Tiled2Unity import scripts to add custom behavior to your exported map layers and objects.

I keep these same goals in mind with these examples:

  • Exporting should be easy
  • Once exported, your prefabs should work without further tweaking – you just place them in the scene and you’re done

A Quick Word on Character Controllers (and Mega Dad)

Mega DadThe focus of these tutorials is Tiled map files in Unity through Tiled2Unity but I did invest some time in a 2D platform character controller using the CharacterController2D provided by prime[31] as a starting point.

Also, this work is strongly influenced by the Mega Man franchise of the NES golden-age. This will not surprise anyone that knows me. My daughters, being well-aware of my affinity for Mega Man, have taken to calling me Mega Dad at times so my hobbyist programming often includes the sprite I’ve made for the nickname.

Get the Tutorial Files

All the scripting, art, and Tile source files (TMX format) used for these examples is available on GitHub here:

This project contains two sections:

  1. The Unity project source containing all the functionality and scripting found in this tutorial.
  2. The Tiled Map Editor TMX source files. These were exported into the Unity project through Tiled2Unity.

Simple Example: No Collision or Gameplay

The simplest use of Tiled2Unity involves a decorative Tiled map in your Unity project. For this, I’m using Magma Man’s lair from Mega Man 9 represented here in Tiled map form …

Magma Man - No Collision

There’s nothing special about this and no preparation is needed before export. You can find it in the simple-no-collision scene in the example where it just sits there with a camera on it.

Simple Example with Collision

For the Tiled file MagmaManLair-WithCollision.tmx I’ve used the Tile Collision Editor to add collision to all the tiles that I’d expect our playable character to collide with.

Simple Map with Collision

Using the Tiled2Unity previewer I can see how the collisions would appear in Unity before I export.

Magma Man Collision Preview

I purposely chose a screen from one of the Mega Man games that had some interesting collision in it to show the kind of complexity that Tiled2Unity can handle. We can see the exported results in the simple-with-collision scene. This scene introduces our Mega Dad sprite as well. You can move him around with the arrow keys and jump with spacebar and see that he’s colliding with the PolygonCollider2D geometry as we’d expect from a Mega Man type game.

Playing the Magma Man Lair scene

Note that all exported layers and objects are, by default, assigned the Default physics layer but we could change that if we wanted to (and will later with more complicated scenes). Since our Mega Dad sprite is set up to collide with Default physics we don’t need to make any changes yet.

Collision with Slopes

The collision geometry from the last example is actually one PolygonCollider2D object but it looks a bit boxy and doesn’t demonstrate the flexibility we have with the shapes of colliders we can use with Tiled2Unity.

There are no examples of sloped collision in the Mega Man NES games so for this example I’m going to borrow art from Capcom’s NES port of Strider — which had plenty of sloped terrain in it.

Here you can see the RedDragon-WithSlopes.tmx file open in Tiled with one of the tiles having a single triangle-polygon on it for collision …

Sloped Collision

And again, the Tiled2Unity previewer …

Slopes Preview

This map was exported and added to the slopes scene in the downloadable example. Here you can see Mega Dad standing on the sloped terrain.

Sloped Collision in Play

Games with such terrain in them usually build their sprites with this in mind so they look better on a slope, but I think you get the idea.

Still, we can make this better through using Tiled2Unity’s ability to set the Sorting Layer on an exported Tiled layer.

Sorting Layer and Order in Layer Properties

As you can see, Mega Dad looks a bit awkward when not on even ground …

Mega Dude Hanging

Games generally handle this by changing their sprite artwork or by changing their environment  to give it more depth or by using the foreground to hide the sprite’s feet.

Slope Examples

Taking a cue from Super Metroid, I’m going to put some railing in the foreground over our slopes.

Slope, with rails

Adding this to our map in Tiled is easy enough but now we’re doing something new with our scene in Unity: We need to render our sprite between two Tiled layers.

By default, Tiled layers are exported with the Default sort layer. Now we’ll want to purposely assign sorting layers. This Unity project has the following sorting layers in order:

  1. Background
  2. Default
  3. Foreground

(Our Mega Dad sprite renders to the Default sort layer in this example)

Each layer or object in Tiled supports custom properties and in order to change our Sorting Layer we add a custom property named unity:sortingLayerName to our layers.

Putting our Background Tiled layer in the Background sorting layer …

Background Sorting Layer

And putting our GuardRails Tiled layer in the Foreground sorting layer …

Foreground Sorting Layer

… we construct a prefab on export that hides our Mega Dad’s feet behind the foreground while he’s standing on a slope.

Hiding odd looking collision

Here’s the list of the properties we can set in Tiled that the Tiled2Unity exporter looks for when constructing a prefab:

  • unity:tag
  • unity:sortingLayerName
  • unity:sortingOrder
  • unity:layer (Layer is such an overloaded term. In Unity it means the “physics” layer.)

We often don’t want to set unity:sortingOrder as it is implicitly set for you by the order of Tiled layers in your TMX file. We’ll use unity:tag and unity:layer in interesting ways soon.

Note that should you try to use a Sorting Layer Name that does not exist in your Unity project that the importer scripts in Unity will let you know about it through an error in the Unity console:

Sorting Layer "Foreground" does not exist. Check your Project Settings -> Tags and Layers

Important Update: With Tiled2Unity 1.0.5.0 and later you no longer need to use the unity:layer property. Instead, use the Type field of your rectangles, polygons, and polylines in the Tile Collision Editor. This Type will match the physics layer in your Unity project.

Adding Gameplay with Tags

This next example is probably my favorite as the water scene in the Unity project is a good example of bringing Tiled maps to life in your Unity project.

Getting back into the Mega Man look and feel, the DiveMan-water.tmx Tiled map file borrows from the Dive Man stage of Mega Man 4. You’ll notice the Tiled layers are animating (Update: Animations are supported in Tiled now and later versions of Tiled2Unity will export those animations as-is. There is no longer a need for additional scripting to pull this off.)

Animating Tile Layers

This is achieved in Unity scripting by simply selecting game objects based on their tags (AnimLayer1 and AnimLayer2) and toggling between them at a given framerate.

// A cheap an easy class that animates our Tiled layers
class LayerAnimator : MonoBehaviour
{
    public float TimePerLayer = 0.5f;

    private void Start()
    {
        StartCoroutine(AnimateRoutine());
    }

    private IEnumerator AnimateRoutine()
    {
        bool isLayer1Active = true;
        var layer1Objs = GameObject.FindGameObjectsWithTag("AnimLayer1");
        var layer2Objs = GameObject.FindGameObjectsWithTag("AnimLayer2");

        while (true)
        {
            foreach (var obj1 in layer1Objs)
            {
                obj1.SetActive(isLayer1Active);
            }
            foreach (var obj2 in layer2Objs)
            {
                obj2.SetActive(!isLayer1Active);
            }

            isLayer1Active = !isLayer1Active;
            yield return new WaitForSeconds(TimePerLayer);
        }
    }
}

All this script requires is that we have objects in our scene with the appropriate tags. This is where unity:tag comes in.

In Tiled, all we need to do is select the Tiled layers we want to toggle between and give them the AnimLayer1 or AnimLayer2 tag. For instance …

Setting Unity Tag

Once exported, our LayerAnimator component in the scene finds the GameObjects on our prefab and animates them.

Adding Gameplay with (Physics) Layers

Also in this example we have gravity changing for Mega Dad when he is inside water. Like the Mega Man games, this will slow his fall and allow him to jump much higher while in water.

This is achieved by having one of the Tiled layers (WaterVolume) being exported with the Water physics layer (again, I apologize for the overuse of the word ‘layer’ — it means different things in Unity and Tiled). We use a unity:layer custom property within Tiled …

Layer Property

Now all the tiles in this Tiled Layer with collision on them will be be gathered into a PolygonCollider2D with the Water physics layer.

Our Character Controller for Mega Dad is set up with a trigger that detects when it is in a water collider and changes Mega Dad’s response to gravity. We also tell Mega Dad to start breathing out air bubbles while within this collider in addition to spawning a “splash” sprite when he enters or exits the collider. It’s a nice example of interacting with maps exported with Tiled2Unity.

Water Trigger

Tiled Object Layers Can Have Colliders Too

Keeping with the water scene example, there are no tiles with collision off the upper left and right side of that map and we’d like to keep Mega Dad from falling out of the world with invisible collision. That’s where we can use the Object Layer features of Tiled which are, like Tile Layers, exported into the prefab hierarchy as GameObjects.

In this case, Tiled2Unity does not attempt to combine geometry into one collider. Since we are placing Rectangles, Ellipses, Polygons, and Polylines in Tiled separately they are themselves exported as separate GameObjects.

  • A Tiled rectangle object is exported as a BoxCollider2D
  • An Tiled ellipse object is exported as a CircleCollider2D (but only if it is a circle with equal width and height, Unity does not support ellipses)
  • A Tiled polygon object is exported as a PolygonCollider2D
  • A Tiled polyline object is exported as an EdgeCollider2D

To keep Mega Dad inside the level, I’ve added two rectangle objects to an Object Layer in the TMX file:

Adding Tiled Objects

Like other collisions we can see what they look like in the Tiled2Unity previewer …

Object Previewer

Once exported that gives us collision along the sides of our scene so that Mega Dad doesn’t fall out.

BoxCollider2D Blocking Player

Ladders With Custom Importing

One of the hard-learned lessons from my Mega Man vs Cut Man experiment is what a horrible pain in the ass ladders are to implement. The in-game mechanics of ladders are left, sheepishly, as an exercise of the reader but at least getting ladder geometry into a game can be made easier with Tiled2Unity.

First, in Tiled, we make a separate Tiled Layer for all ladders in the scene and paint some ladders with tiles.

Making Ladders in Tiled for export to Unity

Note that the ladders Tiled Layer is given the Ladders value for the unity:layer property. This will add all ladder collision into a special physics layer for us to manipulate later through custom scripting later but for now we can paint ladders with tiles as we wish in our Tiled map file.

What We Need from Ladders

Because of the way our Mega Dad character interacts with ladders we need to know, for each ladder instance, the following information:

  • The center-line (or spine) of each ladder
  • The top of each ladder
  • The bottom of each ladder

However, from Tiled2Unity, we get one PolygonCollider2D that represents all ladders in the Tiled Layer.

Ladder Have vs Need

We could lay down polylines in Tiled that get exported into EdgeCollider2D instances but if we move, add, or remove ladder tiles from our map then we have to manipulate our polylines as well. Instead, we can take advantage of the custom importing feature of Tiled2Unity and write a script that will add the EdgeCollider2D instances for us.

Use ICustomTiledImporter for Custom Importing from Tiled2Unity

Tiled2Unity provides an interface that allows you to add custom behavior to the prefabs it creates from exported Tiled map files. You only need to write a script class that inherits from ICustomTiledImporter with the CustomTiledImporter attribute. Tiled2Unity will use reflection to find such custom importers and instantiate them as part of the import process. (If order of execution is important use the Order property of the CustomTiledImporter attribute.)

// Example custom importer:
[Tiled2Unity.CustomTiledImporter]
class MyCustomImporter : Tiled2Unity.ICustomTiledImporter
{
    public void HandleCustomProperties(GameObject gameObject,
        IDictionary<string, string> keyValuePairs)
    {
        Debug.Log("Handle custom properties from Tiled map");
    }

    public void CustomizePrefab(GameObject prefab)
    {
        Debug.Log("Customize prefab");
    }
}

 

For this example we’re going to use the CustomizePrefab method to crack open the PolygonCollider2D instances belonging to ladders and add the EdgeCollider2Ds we desire.

// From CustomTiledImporterForLadders.cs
public void CustomizePrefab(GameObject prefab)
{
    // Find all the polygon colliders in the pefab
    var polygon2Ds = prefab.GetComponentsInChildren<PolygonCollider2D>();
    if (polygon2Ds == null)
        return;

    // Find all *ladder* polygon colliders
    int ladderMask = LayerMask.NameToLayer("Ladders");
    var ladderPolygons = from polygon in polygon2Ds
                         where polygon.gameObject.layer == ladderMask
                         select polygon;

    // For each ladder path in a ladder polygon collider
    // add a top, spine, and bottom edge collider
    foreach (var poly in ladderPolygons)
    {
        GameObject ladderTops = new GameObject("LadderTop-EdgeColliders");
        GameObject ladderSpines = new GameObject("LadderSpine-EdgeColliders");
        GameObject ladderBottoms = new GameObject("LadderBottom-EdgeColliders");
        ladderTops.layer = LayerMask.NameToLayer("LadderTops");
        ladderSpines.layer = LayerMask.NameToLayer("LadderSpines");
        ladderBottoms.layer = LayerMask.NameToLayer("LadderBottoms");

        // Create edge colliders for the ladder tops
        // We assume that every polygon path represents a ladder
        for (int p = 0; p < poly.pathCount; ++p)
        {
            Vector2[] points = poly.GetPath(p);

            float xmin = points.Min(pt => pt.x);
            float xmax = points.Max(pt => pt.x);
            float ymax = points.Max(pt => pt.y);
            float ymin = points.Min(pt => pt.y);
            float xcen = xmin + (xmax - xmin) * 0.5f;

            // Add our edge collider points for the ladder top
            EdgeCollider2D topEdgeCollider2d =
                ladderTops.AddComponent<EdgeCollider2D>();
            topEdgeCollider2d.points = new Vector2[]
            {
                new Vector2(xmin, ymax),
                new Vector2(xmax, ymax),
            };

            // Add our edge collider points for the ladder spine
            EdgeCollider2D spineEdgeCollider2d =
                ladderSpines.AddComponent<EdgeCollider2D>();
            spineEdgeCollider2d.points = new Vector2[]
            {
                new Vector2(xcen, ymin),
                new Vector2(xcen, ymax),
            };

            // Add our edge collider points for the ladder bottom
            EdgeCollider2D bottomEdgeCollider2d =
                ladderBottoms.AddComponent<EdgeCollider2D>();
            bottomEdgeCollider2d.points = new Vector2[]
            {
                new Vector2(xmin, ymin),
                new Vector2(xmax, ymin),
            };
        }

        // Parent the ladder components to our ladder object
        ladderTops.transform.parent = poly.gameObject.transform;
        ladderSpines.transform.parent = poly.gameObject.transform;
        ladderBottoms.transform.parent = poly.gameObject.transform;
    }
}

At first glance this may seem like a lot of work, but, once written, this script will now import all ladders for us in all our maps. We can place ladders with ease in Tiled and let the custom importer do all the heavy lifting.

You can see the results of this in the ladders scene included in the tutorial Unity package.

uni-cutman-ladders

Adding Spawners With Custom Import Scripting

With using the Tiled Map Editor as our 2D level editor we often need ways of marking up our worlds with some game-specific behaviors, with spawners for our game sprites being an obvious requirement.

Tiled allows us to place Tile Objects into an Object Layer. Moreover, our Tiles can have custom properties on them. Tiled2Unity allows us, through custom scripting, do get at these custom properties and manipulate the GameObjects they are attached to for game-specific behavior.

For this example we’re going to revisit a scene from the popular Mega Man 2 with the Appearing Block sprites from Heat Man’s stage.

Appearing Blocks in Mega Man 2

Placing these Appearing Blocks in Tiled is easily achieved by using Tile Objects in an Object Layer. Here I’ve distributed a number of such Tile Objects amongst three Object Layers in the HeatManBlocks.tmx file.

tiled-blocks

The important part here is with the Tile representing our Appearing Block that we’ve added a custom property spawn with the value AppearingBlock. We only need to do this once and then we can place as many of those Tile Objects we wish. We’ll write some code soon that consumes those custom property values and, within Unity, will attach GameObjects to our map prefab.

Exporting this map into Unity we can see the blocks we’ve placed represented as GameObjects in the prefab …

Tile Objects as GameObjects

… but right now they’re just empty, albeit with the right positional data imported from our Tiled map file.

In order to allow for game-specific importing of map data Tiled2Unity can hook into any custom properties we assign to our map, layer, or object data within our Tiled TMX files. This is achieved through the HandleCustomProperties function on the ICustomTiledImporter interface that we can inherit from in our Editor scripts. It passes in the dictionary of custom property name and value pairs as well as the GameObject that you’ve assigned such custom properties to.

Here’s an example of a custom importer script that looks for a custom AddComp property that we have set in Tiled and, during import, will add those components …

Custom Property in Tiled

[Tiled2Unity.CustomTiledImporter]
class CustomImporterAddComponent : Tiled2Unity.ICustomTiledImporter
{
    public void HandleCustomProperties(UnityEngine.GameObject gameObject,
        IDictionary<string, string> props)
    {
        // Simply add a component to our GameObject
        if (props.ContainsKey("AddComp"))
        {
            gameObject.AddComponent(props["AddComp"]);
        }
    }

    public void CustomizePrefab(GameObject prefab)
    {
        // Do nothing
    }
}

Going back to our example with blocks, what we want to do is look for a spawn custom property with a value of AppearingBlock, instantiate the appropriate sprite, and then attach it to our game object.

[Tiled2Unity.CustomTiledImporter]
class CustomTiledImporterForBlocks : Tiled2Unity.ICustomTiledImporter
{

    public void HandleCustomProperties(UnityEngine.GameObject gameObject,
        IDictionary<string, string> props)
    {
        // Does this game object have a spawn property?
        if (!props.ContainsKey("spawn"))
            return;

        // Are we spawning an Appearing Block?
        if (props["spawn"] != "AppearingBlock")
            return;

        // Load the prefab assest and Instantiate it
        string prefabPath = "Assets/Prefabs/AppearingBlock.prefab";
        UnityEngine.Object spawn = 
            AssetDatabase.LoadAssetAtPath(prefabPath, typeof(GameObject));
        if (spawn != null)
        {
            // Remove old tile object
            Transform oldTileObject = gameObject.transform.Find("TileObject");
            if (oldTileObject != null)
            {
                GameObject.DestroyImmediate(oldTileObject.gameObject);
            }
 
            // Replace with new spawn object
            GameObject spawnInstance = 
                (GameObject)GameObject.Instantiate(spawn);
            spawnInstance.name = spawn.name;

            // Use the position of the game object we're attached to
            spawnInstance.transform.parent = gameObject.transform;
            spawnInstance.transform.localPosition = Vector3.zero;
        }
    }

    public void CustomizePrefab(UnityEngine.GameObject prefab)
    {
        // Do nothing
    }
}

Now when we reimport the map we see that our spawned block sprites were added to the prefab hierarchy …

Spawned Object in Prefab

With these spawned sprite objects now in the prefab they can be manipulated by other runtime scripts to add the gameplay we’re looking for – platforming blocks that appear and disappear with a given timed pattern (see the custom-import scene to play the example).

heatman-blocks

Complicated Gameplay with Little Work

These examples may seem a bit involved but I feel it’s a good example of how one could mix unity-specific and custom properties in Tiled with some scripting in your Unity project to achieve behavior that is specialized to the game you are creating. (It actually took me a lot longer to document the examples in this blog post than it did to build this Unity project.)

Any questions? Found a bug? As always feel free to drop me a line in the comments or email me. Happy developing.

{ 18 comments }