Sprite with transparency: Create box collider (ignoring transparent area)

Question

I have a sprite which has a transparent area in it. The non-transparent area is a free-form graphic (red). I would like to create a box collider around it (yellow), but ignoring the transparent area.

Some notes to the image above:

• Left: This is what happens, if I apply a PolygonCollider2D. The yellow line represents the area covered by the PolygonCollider2D. This is not what I want.
• Middle: This is what happens, if I apply a BoxCollider2D. The yellow line represents the area covered by the BoxCollider2D. This is also not what I want, as it includes the transparent area of the sprite.
• Right: This is what I want: Have a BoxCollider2D outside my free-form graphic.

Here's how I currently load my sprite data into the game during runtime:

• My sprites are located in the /Assets/Resources/SceneData/... folder structure of my project. The graphics are stored as .png files.

• When loading a level, I load the required graphics as sprites like this:

    var sprite = Resources.Load<Sprite>("SceneData/AfternoonAtTheBeach/DragAndDrop/Graphics/Level1/ElephantWithIceCream");

"ElephantWithIceCream" is the .png file (Resource.Load wants me to refer to this file without file extension)

• After that, I create a new game object and attach a SpriteRenderer component to it. The sprite is assigned to the SpriteRenderer by setting the sprite attribute of the SpriteRenderer component.

My first thought on how to solve my problem was to do something like this:

• Create a PolygonCollider2D and try to convert it into a BoxCollider2D. But I was not able to find code examples on how to do this.

After that, I thought of trying it to do like this:

1. Create a PolygonCollider2D and try to extract some useful information out of it (such as bounds, center, extents, etc...).
2. Delete the PolygonCollider2D and create a BoxCollider2D. Use the previously extracted info to create the BoxCollider2D.

But I fail doing so. I am also a bit confused as sometimes they refer to world space or local space. Does anyone have a working recipe for doing something like this? I do not really understand how to work with center, bounds and extents. If there is any better way of doing this, I am highly interested. Thanks a lot for your help!

Answer 1

I would recommend using photoshop PSB importer package. You design your sprites in photoshop/illustrator, position them properly there, and when imported into unity, the resulting sprites will be cropped to size of the non-transparent area of the layers by default, just as you've shown above. The result will also keep relative positions perfectly.

The default box-collider will be exactly what you have drawn above.

Answer 2

Posting late to the party just to provide my 2 cents on this matter.

As @DMGregory has mentioned, unless you have some absurd number of sprites to generate prefabs from (in which case, automation may be something worth investing in), doing it manually could be the way to go.

That said, I've run into a similar issue and I wanted to share some advice that really helped me come up with a solution for my project.

Invest some time / thought into how your asset pipeline is going to work. This involves everything from:

1. where are your sprites getting created (Photoshop, Aesprite)?
2. how are you exporting them (file format, etc...)?
3. how are you bringing them into Unity (folder structure / organization)?
4. what is the structure of the prefabs that display these sprites?

I'm not familiar with your project, but maybe it turns out you don't need those transparencies in the first place. So maybe your issue resides within point 2 above. Maybe you might choose to export your images as tight as possible, so then you can generate colliders directly to the bounds of the sprite (if you're using the sprite renderer component, check out SpriteRenderer.Bounds).

Maybe you do need those transparencies though. While you may have to generate these colliders by hand, you can still alleviate some pain points by defining a process for how to make your prefabs.

For instance, if you have some sprites that have transparencies, can you use the sprite editor to auto slice, and then generate your collider using the sliced image?

This is a bit off topic, but I've also found that defining some rules about each sprite having a fixed border size can really help, especially when it comes to playing animations. It can be really useful to define each sprite has having their center of the free form shape be at the center of the entire image (or some other fixed point that is consistent from sprite to sprite).

Hope that helps!

Answer 3

https://docs.unity3d.com/ScriptReference/MeshCollider.html

as your mesh-collider is generated automatically, based on above reference, you can get the list of vertices and also bounds of collider you have.

just check the Bigget X,Y and Lowest X,Y to set bounds of your 2d box-collider.