- Home /
How do I mask out part of canvas panel?,How can I mask out part of a canvas panel?
Hey experts!
I am currently working on a tutorial for my game. I want to show an overlay with a cutout circle to put some focus on the tutorial step. I am trying to get this working with the following setup:
- Canvas
Panel (gray background)
Image (Circle) with Mask or Sprite Mask
I can't get it to work with this setup. Can anyone give me insight how to achieve this effect?
Target I want to achieve: https://reddit-uploaded-media.s3-accelerate.amazonaws.com/images%2Ft2_aifgt%2Fxep2ukzfmz851
Answer by b3da · Oct 13, 2020 at 06:01 PM
Here are the steps to have a mask on UI to make a tutorial overlay:
Create a canvas (You can set the Renderer to "Screen Space - Camera" to see the result in the scene)
Right-click on your canvas and Create 2D Object > Sprite under it. Give it a square sprite as "Sprite" (make one by right-clicking on asset folder > Create > Sprite > Square if you don't have any). Scale-up this object to cover your whole screen and even bigger to not have any problems with different screen resolutions. Change "Mask Interaction" to "Visible Outside Mask". Change color alpha and Sorting Layer if it is needed.
Right-click on your canvas and select "Create Empty". Add component "Sprite Mask". Give it a circle sprite as "Sprite" (Create one if you don't have any). Scale-up the object to see the mask.
Good Luck
Answer by schubertyi · Nov 04, 2020 at 04:39 AM
UI > Image, then add the Mask component and use the Image on that object as the mask, put the objects that you want as child of the object that has the Mask component and select it as Maskable in the image component of each child.
Hey this is the simplest and most straightforward answer as of October 2021.
Answer by xxmariofer · Jul 05, 2020 at 04:31 PM
thats the needed setup for that effect to get achieved, but check this short tutorial in case you missed one step
Answer by JeroenvdLast · Jul 06, 2020 at 06:47 PM
Thanks for the reply!
Unfortunately, I didn't get it to work yet. The difference with the video is that I have a canvas (I want to have it fullscreen and scale it with the screen), so I need a Image instead of a Canvas Renderer. An image doesn't have the "Mask Interaction" shown in the video. The only relatable option an image has is "Maskable" but that doesn't help me in this situation.
And hace you tried this approach? https://youtu.be/g3gpXmo8zRo