UI Mask - Unity Official Tutorials

Unity · 198K views · 2014 · 1:22

Open on YouTube

Game programming & enginesIndie game developmenttutorial

Why Stack Overflow recommends it

Stack Overflow users link it when answering Unity UI questions that need masking, such as shaped images, progress bars, or cut-out holes in a UI.

Recommended by 3 people across 3 different months, 2016 to 2019.

What it is

A 1m22s official Unity tutorial showing how the UI Mask component hides part of a UI Image. It covers using masks to define an area to animate images into, and pairing them with Scroll Rect for scrollable areas.

What people said

Recommends Nicholas Bucher · 2019-03 · Stack Overflow · on “How to make a simple progress bar”

For a progress bar You can use the Unity scrollbar object to make what you're looking for. There's a good tutorial on it here [LINK] . Essentially, you add a scrollbar object to your canvas, and then change the slider value from code. For scrolling textures If you want a scrolling texture on your progress bar, then you can animate an image placed on the slider. If you don't want to animate it by hand, then it's a little more complicated. Ideally you could set the texture offset of the image in code to get it to scroll, but after looking it up I don't think that Unity allows you to do that on non-3D objects. If you still want it to scroll and don't want to make a hand-drawn animation for it,

Recommends Nikunj Paradva · 2019-06 · Stack Overflow · on “How to set my Image Mask in Hexagon Shape in unity?”

Create UI Panel And ADD COMPONENT Image Mask In Image Component You set Your Any Shape's Image And Also Add One Image Into Panel That you mask in this Shape [LINK] Check it out for more information [this video]

Recommends CosmicGiant · 2019-09 · Stack Overflow · on “How to make a hole in Unity UI?”

You can do this with masking for the visual part, and Canvas Groups for the interaction part. For the visual part, see Unity's official UI Mask tutorial [this video] . As for the interaction part, I am not completely sure this works, as I haven't done it myself, but according to the Unity documentation, you should be able to do it with Canvas Groups [LINK] . Have a parent canvas group with the Block Raycasts flag set to true (marked), and then, for the non-blocking area use a second canvas group with the Block Raycasts flag set to false (unmarked), and the Ignore Parent Groups flag set to true (marked). The second group should thus override the parent group's blocking behaviour.

Cites Ciel · 2016-08 · Stack Overflow · on “Unity how to get masked texture and save as png”

Hi I am using mask in unity and now I want to get the masked texture and save as a png file. Unity Mask [this video] For example, in this video, I want to get the masked image instead of the whole background image or the mask texture. I tried (GetComponent<Mask>().graphic.mainTexture as Texture2D).GetPixels() but it doesn't work. Thank you very much.