Controlling Tiled2Unity Scale

by Seanba on June 14, 2014

Update: Most Tiled2Unity users will want to use the newer vertex scaling feature to scale their Tiled maps.

Tiled2Unity Scaling

A couple of weeks ago I released my free Tiled2Unity Utility, allowing developers to export their old-school and tile-based environments (built with Tiled Map Editor) into Unity with (one hopes) relative ease.

You can download the Win32 installer or zip file for Tiled2Unity from the Download Page.

Some of you requested a feature to control the scale of the prefab objects exported by Tiled2Unity, especially give that sprites in Unity2D projects default to a completely weirdo coordinate system where 1 pixel is equivalent to 0.01 units in Unity.

A short note on this: Unity uses Box2D behind the scenes for the physics engine. Box2D is great but it isn’t well suited for pixel-perfect retro game development in my opinion. Our retro games want to work with pixel units where our characters are some 24 or 48 units high and moves some 100 or 200 pixels a second. Box2D wants to work with real-world units where a given character is 1 or 2 meters high and is moved my Newton forces. I feel getting NES-era 2D platforming out of a modern day physics engine is not worth the headache but your mileage may vary.

But I digress. The point being, an important goal for Tiled2Unity is that your generated prefab, once exported from Tiled, is ready to go into your scene without further edits.

So for people that wish to use Tiled2Unity on projects with sub-pixel coordinate systems here’s how you can easily set up your Tiled maps to scale appropriately. Note: This will require you install the newer version of Tiled2Unity (0.9.1.0).

So You Want to Use Physics2D

Let’s say we’ve got the first lady of video games, Samus Aran, in your Unity project and you’ve imported the sprite with the default Pixels To Units setting of 100.

Samus in Unity

With this, we have a sprite image that is 26x43 pixels but has dimensions of 0.26x0.43 units in your Unity project. Using the minimalist-collision.txm Tiled map from the Tiled2Unity example as-is we’d end up with an exported background that is 100 times too large for our sprite to inhabit. Here she is between two blades of pixel grass …

Samus between 2 blades of grass

Setting the Scale in the Tiled File

We could just scale down the prefab we created by hand in the Inspector within Unity but I don’t want to do that every time we export the Tiled map. Instead, we’ll set a property within the map once …

Map property, unity:scale

unity:scale 0.01

Now when we export the Tiled map, our Tiled2Unity Utility looks for that unity:scale property on the map data (Tiled2Unity will complain if you try to scale layers or objects, btw) and the automatically created prefab will have the appropriate scale value assigned to it.

Once re-exported, here’s the final scene with Samus resting on collision geometry with sprite and background using coordinate system values of the same magnitude.

Samus and Environment at Scale

BTW, there are other properties you set in your Tiled map file that control the way your prefab is constructed.

  • unity:sortingLayerName
  • unity:sortingOrder
  • unity:layer
  • unity:tag

I’ll cover these soon in another post. In the meantime I’m happy to take suggestions for improvement.

{ 26 comments… read them below or add one }

Yeah, Cheers June 16, 2014 at 11:03 am

Thanks! This post clears things up for me.

Here is an example of the image differences I was seeing using tiled2unity and a straight sprite import: http://yeahcheers.com/images/misc/tiled2unity_test.png.

A bit more information here:
http://yeahcheers.com/blog/?x=entry:entry140611-170944;comments:1#comments

Seanba June 16, 2014 at 11:20 am

Cheers, those artifacts are due to the “Pixel snap” settting on the shader. Disabling it will get rid of those in the “Scene view” but then you will have other sub-pixel artifacts in the “Game view” depending on your GPU hardware. Do you still see those bands when you play your game?

Yeah, Cheers June 16, 2014 at 10:54 pm

So that shot actually was from the “Game” view (within Unity) — however once I actually built the app — and run the output, they do go away. That’s good to know. Thanks!

Ginich June 20, 2014 at 8:33 pm

Does Tile2Unity support tile sets from multiple images? I’ve tried it but the application throws an error when trying to load the TMX file. Think its throwing a null pointer exception.

It works if I try to export a TMX file with 1 image

Seanba June 20, 2014 at 9:44 pm

Hello Ginich, I think you’re talking about a TileSet that is of type “Collection of Images”? I’ve actually just discovered that feature in Tiled just now and have confirmed that throws an exception when loading the TMX file in Tiled2Unity.

I’ll look into my options here. What I don’t like about that feature is that every Layer+Image combination has to be a separate mesh and that’s going to complicate your prefabs significantly.

Seanba June 22, 2014 at 1:14 pm

Ginich, I’ve just added support for Tilesets that use “Collection of Images”.

http://www.seanba.com/tiled2unity-tilesets.html

kong July 28, 2014 at 9:49 pm

hi~this is my exact problem, but when the unity:scale set to 0.01, the map show up with black lines between tiles
see this:
http://a1.qpic.cn/psb?/641130733/crILCg79JQbkaV6wEDinS4ccpbaZvhfBYq0rCybF6hY!/b/dGmArpLDJQAA&bo=MAOAAgAAAAADAJQ!&rf=viewer_4&t=5

kong July 28, 2014 at 9:53 pm

sorry about the picture, i just imported a map in the tiled example folder: desert.tmx
if the scale is 0.01, black lines will apear

kong July 28, 2014 at 10:07 pm

here is a screen capture
http://pan.baidu.com/s/1pJ6YSXH

Seanba July 28, 2014 at 10:18 pm

Hello kong, it’s common for people doing 2D game development in Unity to have seams appear and I apologize for not having a 100% solid solution yet for that. (I get around the issue by controlling my camera position in-game)

Also, I just tried the same example file with that scale and it looks okay for me. Granted, different graphics cards will highlight the problem stronger than others.

How does the scene look in “Game View”? If looks that bad there I don’t mind taking a look at your example. Just email me your project as a Unity Package and I’ll see what I can find. Thanks.

Seanba July 28, 2014 at 10:30 pm

Also, Kong, I suspect you are referencing a texture that was already in your Unity project and is therefore dependent on the import settings you have set for that texture.

If so, try these import settings:
Texture Type: GUI
Filter Mode: Point
Format: Truecolor

The source texture is a non-power-of-two (hence the GUI texture type). I bet that’s where you’re seeing your problems as the texture coordinates will be off ever so slightly.

For textures referenced by Tiled that are *outside* your Unity Project you’ll find that Tiled2Unity automatically copies the texture for you with the proper import settings. This is how I recommend using Tiled2Unity.

thor6136 September 2, 2014 at 2:27 pm

Hey, can you tell me if i can change Filter Mode to Bilinear or Trilinear for textures that are exported to unity from tiled? I cant change it in inspector for some reason. Is there an option to export it differently from tiled?

Seanba September 2, 2014 at 2:39 pm

Hello, Thor. There’s a couple of things you can do:

1) Change this line in the Tiled2Unity scripts to the filter mode you want: textureImporter.filterMode = FilterMode.Point;

2) Use textures that are already part of your Unity project. In this case, Tiled2Unity does not try to overwrite the texture settings.

I’ll think of way I can make this process better. Maybe I can have a property on the tileset (in Tiled) that gives direction to the Tiled2Unity importer scripts.

thor6136 September 2, 2014 at 3:34 pm

Thanks!

One more thing, probably not related to tiled2unity, but maybe you can help 🙂

So, i have isometric art with orthographic map. What i need to do is render objects in front when player goes behind them. But you see, player goes behind when bottom of the legs go around certain area. I hope you know what i mean. Do you think the best way to go about is with with layers? Would you setup trigger ares to detect when player is “behind” object and change culling mask? Or any other way?

Seanba September 3, 2014 at 12:00 pm

Thor, I think I know what you mean. Like, you have a lamppost in your level that you want to be able to walk in front and behind?

If you can make the art so that it has two parts, one that is always in front and another that is always behind the player then you could by with using layers. (i.e. The bottom half of the lamppost has collision set up in such a way that you can always draw it behind the player — then you have the top half always draw in front of the player.)

If it is more complicated than that then you may be better served with each lamppost being a sprite and those sprites and the player sprite would set their render order through script in realtime. Hope that helps.

thor6136 September 5, 2014 at 1:48 pm

Ty for your answer, it’s working so far 🙂

downstroy January 27, 2015 at 5:14 am

Hi Sean,

I have been using your TiledToUnity software with success until now. I have just a little question about the scaling that is done on the prefab.

My player prefab (which is of localsScale 1, with 100 pixel = 1 unit in unity) is not in the level prefab when moving around for convenience reason. When I attach/detach it to the level prefab (which is of localScale 0.01), I have to update all properties of my player prefab to scale them by 100/ 0.01 (sprite size, box collision …) which is really messy.

Is there a way to set a “pixel per unit” setting in the export of Tiled2Unity, so that the exported prefab i displayed correctly at scale 1.

I have tried to set pixel to unit to 1 in unity , but I get wonky behavior when updating player position.

Thanks for the work on this nice tool!

Seanba February 10, 2015 at 9:39 pm

downstroy, with the latest version of Tiled2Unity you can use the -s or –scale command line argument to have an exported map that is “scaled” to your liking but the prefab’s scale remains (1, 1, 1). For your case you would add –scale=0.01 to the arguments passed in to Tile2Unity.

downstroy February 16, 2015 at 5:46 pm

I so hyped I tried it immediately and it worked wonderfully (had to tweak my CustomTiledImporter a bit to remove all those ugly scaling)

Thanks for the good work! ( The new version is really faster btw, I think console output was slowing down the exporting process)

Some guy October 5, 2015 at 9:46 am

Would you consider updating this post with an alternative (an Option #2 approach)

You can rig Unity to automatically set the “Pixels Per Unit” to 1 by extending the “AssetPostprocessor” class in the UnityEditor namespace.

ex:
/** MyTexturePostProcessor.cs **/
using UnityEditor;

public class MyTexturePostProcessor : AssetPostprocessor {
void OnPreprocessTexture ()
{
TextureImporter textureImporter = (TextureImporter)assetImporter;
textureImporter.spritePixelsPerUnit = 1;
}
}

You can read about the AssetPostprocessor here:
http://docs.unity3d.com/ScriptReference/AssetPostprocessor.html

Don’t need to add it to any scene. It just works. Any new image assets added should automatically update to reflect 1 pixel per point. This should also make it easier to work with coordinates.

I can’t take credit for this suggestion because I didn’t take time to read all the comments here (TL;DR) someone might’ve already suggested it, plus I figured this out from googling.

datahead8888 January 27, 2016 at 3:16 pm

I agree with @thor6136 — I’d also be interested in seeing a property exposed for each image used for the filter mode used for the generated Unity texture. I tend to prefer using bilinear in my game — it seems to blur less when the scene scrolls.

Seanba sez: Hi Datahead, you can change the properties on the Texture Importer to fit your tastes per texture. They will not be undone by Tiled2Unity when you export again.

Carlos January 29, 2016 at 5:49 pm

Hi Seanba, I’m using Tiled2Unity for a while but there’s something that concern me. i’m working in a 8 bit style so, my tiles are 16×16 px so I have 16 in “pixel per unit”. I try put in unity:scale 0.016 doesn’t do any change. if put 0.016 in scale vertex it’s too small compare to one tile in unity. only with 0.0624 is close to the tile in unity. what I can do to solve this?
btw great application.

Seanba sez: Hi Carlos, a common error in scaling is to use value/100 (or in your case, 1/1000) instead of 1/value as the scaling value. In your case you want 1/16 = 0.0625 as the scale value which you will note is very close to the 0.0624 value you got through trial and error.

Trevor Petersen June 25, 2016 at 3:14 pm

Hi, I’m using Tiled2Unity in a project of mine and was wondering if there is any way to set the scale to 32 pixels per inch. In my current project I have some restrictions that will not allow for my character to be 100 pixels per inch, so the character is set to 32 pixels per inch. I was wondering if there is a way to make the tiles also be 32 pixels per inch so that they match the character.

Seanba sez: Hi Trevor. The value would have been 1/32 but I recently changed Tiled2Unity so that you just enter 32, just like you would in Unity. Thanks.

agray427 July 13, 2016 at 2:05 am

I’m having an issue with importing. I’m not sure if it’s because I scaled the texture, but there are lines that go across the prefab in a grid pattern (scene and game view). The grid pattern is the exact size as the grid the texture was cut by. One thing that helps is turning off Pixel Snap in the material, but there are still a few lines although some a removed. Do you have any idea why?

Seanba sez: What you are seeing are seams. I’ve fixed a bug in the latest version of Tiled2Unity (1.0.7.5 as of this writing) that helps this in the case of rotated or flipped tiles. Seams may still show up due to mathematical precision issues with the texture sampling and will depend on a host of issues (texture size, camera location, lighting, platform, GPU drivers, etc.). In those cases the only surefire way to handle seams is to surround each tile in your tileset with a 1 pixel border that repeats the pixel color that came before it. There is a good write up on that here: TILE GAPS USING UNITY 5 AND TILED2UNITY

Mike Berg August 10, 2016 at 4:25 am

Hey Sean!

If you have some time I’d like to ask why everything I export from Tiled is extremely blurry? I’ve looked in the comments above for suggestions but I seem to be missing the mark here.

Here is an Imgur album showing what I mean: http://imgur.com/a/E62cw

Do you have any suggestions on how to fix this?

I went looking for the line of code “textureImporter.filterMode = FilterMode.Point;” however it’s already set to Point filter mode, so nothing I can change there.

Any help would be great, thanks!

Ruslan Abd October 21, 2016 at 4:40 pm

Hello Sean
i don’t know why but Vertex Scale always equals 1 even if i try to change it to 0.01

Seanba sez: There is no longer a “Vertex Scale” in the Tiled2Unity utility. Instead, you will use “Pixels Per Unit” and set it to same value you use in Unity when importing sprites. In your example, that will be 100, not 0.01.

Leave a Comment

{ 1 trackback }

Previous post:

Next post: