Mask UI Image/RawImage

Question

I recently encountered a problem with UI. I opened a new 2D project and created a canvas with a GameObject with a Image component. I then added a sprite by right-clicking Assets > Create > Sprites > Circle. This added a circle sprite to my Assets folder.

The problem is when I choose the Source Image for the Image component as the circle, it still displays as a rectangle.

The circle sprite is imported as Sprite for Texture Type.

This problem also happens with the other shapes, such as triangle.

I am using Unity 5.6.0b9 Personal. Build target is PC, Mac, Linux Standalone.

I am probably missing something very simple. Any help is appreciated!

Solution

It doesn't work like that. Circle and all other type of Sprites under the Assets > Create > Sprites Menu are only made to work with SpriteRenderers. This would have worked if you used SpriteRenderer from GameObject--> 2D Object--> Sprite. They do not work with the UI.

For the UI, this has to be done with the Mask component. Just get any round image then use it to cut out circle from your target square image.

1. Create a UI Image called "TargetSquare" which is the image you want to round.

2. Duplicate it then name this "MaskCircle" and then resize it to make it smaller than the "TargetSquare" until that circle shape is what you want.

3. Make the "MaskCircle" object to be the parent of the "TargetSquare" object then use this round Sprite I made as it's source image.

4. Attach the Mask component to the "MaskCircle" object.

Done. Your "TargetSquare" object will have the shape of the "MaskCircle" object.

If you get jagged edges, select the sprite you used for the "MaskCircle" image and then make sure that Mipmap is disabled.