Unity MASKING - Ultimate Guide | Unity UI & Sprite Tutorial
Вставка
- Опубліковано 7 лип 2024
- This tutorial will show you how to mask Unity UI and sprite elements very easily. I'm also using a wonderful asset from mob Sakai that allows us to easily soft mask UI in Unity. I'll show you everything based on these examples:
- Basic Unity Rect Mask 2D
- Unity Mask (Using a custom sprite shape)
- SoftMask to create smooth corners (With a custom shape)
- SoftMask to create UI scrolling (Using ScrollRect)
- Sprite Masks
➡️Mob Sakai's Unity Soft Mask Githhub: github.com/mob-sakai/SoftMask...
🎁 Get OVER 160+ Scripts, Projects and premium content on my PATREON HERE:
➡️bit.ly/SpeedTutorPatreon
·························································································
🔥 INSANE UNITY SAVINGS: bit.ly/UnitySalesHub
🕹️Synty Publisher Mega Sale: bit.ly/SyntyPublisherMegaSale
🕹️SpeedTutor Unity Store: bit.ly/STUnityStorePuzzlePacks
🕹️Unity New Release Discount Sale: prf.hn/l/BdvEmg3
🕹️Unity WELCOME2022 Offer: bit.ly/UnityWelcome2022OFFER
🔥 INSANE HUMBLE SAVINGS: bit.ly/HumbleBundleDeals
🕹️Humble Tutorial Bundle: bit.ly/MammothUnityTutorialsB...
🕹️Unity ART Bundle: bit.ly/UnityHumbleArtBundle
🕹️Unity TOOLS Bundle: bit.ly/UnityInsaneToolsBundle
🕹️SFX for Games Bundle: bit.ly/SFX-Music-For-Games
🕹️Learn Programming Games Bundle: bit.ly/LearnProgrammingGames
🔥Unity Materials / Files & More:
🕹️CGAxis 400 PBR Material Bundle: bit.ly/CGAxisPBRDeals
🕹️Synty Assets: bit.ly/SyntyLowPolyAssets
🕹️Filebase Assets: filebase.gamedevhq.com/ (Code: SPEEDTUTOR2022 - Sign up for a FREE MONTH)
🔥 UNITY SUBSCRIPTIONS:
🕹️Unity Plus: bit.ly/UnityPlusDeals
🕹️Unity Pro: bit.ly/UnityProDeals
·························································································
💰BIG DISCOUNTS on my website, for my UNITY ASSETS:
➡️www.speed-tutor.com
💬Join the Community Discord:
➡️ / discord
💝 Make a donation to the channel:
➡️www.paypal.me/speedtutor
·························································································
⬇️ SpeedTutor Puzzle Assets:
➡️Unity Store: bit.ly/STUnityStorePuzzlePacks
➡️My Website Discounts: www.speed-tutor.com/
⬇️ SpeedTutor Best Selling Assets:
🧩Adventure Puzzle Kit: bit.ly/STAdventurePuzzleKit
🗒️ Note & Letter System: bit.ly/STNoteLetterSystem
🔍Examine System: bit.ly/STExamineSystem
🔢Keypad System: bit.ly/STKeypadSystem
⬇️SpeedTutor Model Packs:
➡️Unity Store: bit.ly/STUnityStoreModelPacks
➡️My Website Discounts: www.speed-tutor.com/
My Assets include: Gas Mask, Flashlight, Generator, Themed Key , Padlock, Phone, Chess Puzzle, Lever, Valve Puzzle, Fuse Box & Safe Systems. Cardboard, Debris, Massive Models and more!
························································································
⭐ Connect with me:
💬| Discord: / discord
🐦| Twitter: / speedtutor
📱 | Facebook: / speedtutoruk
🖥 | Website: www.speed-tutor.com
·······················································································
#speedtutor #unity #masking
Sometimes you don't have to wear a mask to make this work in Unity, I'll show you how today! :D
🔥UNITY SAVINGS: bit.ly/UnitySalesHub
🔥SpeedTutor Unity Store: bit.ly/STUnityStorePuzzlePacks
🔥HUMBLE SAVINGS: bit.ly/HumbleBundleDeals
I'M BACK TO UNITY BABY!! Woooooo boy, I sure have missed a lot of your videos after a busy month! Time to binge watch them all!!
Great to have you back, my man! Haha. You're going to have to watch them all and let me know what you think! :D
You have a great way of explaining your process man, always enjoy these tutorials.
I'm really glad you like them, my man! :D I try my best. Thanks for coming along.
Great tutorial! Very useful!
Thanks!
That's no problem at all, I hope it helped! :)
Nice guide. Good job!
Thanks man! :D
Great little tutorial, thanks.
Thanks very much! :D
First comment :) and I love your videos!
Thanks man, I really appreciate it! :D
Thank You 👍🏻
No worries, thanks very much for watching! :)
Hi, is it possible apply soft mask in a Sprite masking? thanks.
I have a problem, I have to create a smart glasses, I want to show ui wordspace of some people only in the glasses, I try to use sprite mask (but it works only with objects not with ui element) and ui mask (but it hides only the children), how can I do this?
In the cutout mask, how to make clicks to work on the cutout area and not work on the remaining area ?
Thank you
You're very welcome! :D
Thank you sir :)
No problem at all, my friend! :D
@@SpeedTutor I love your content Sir ❤️💗
awesome
Thanks for coming along to watch! :D
u the best
Thanks so much! :D
Any reason why all the elements inside this softmask appear purple,as if they are not rendering?
Sounds like a problem with the shader, did you add the mask to the right object?
The soft mask would be a lot more convenient to use if I didn't have to use just images and nest the children. I think I do have a workaround. Since I can't detach the children without breaking the script, instead I can set the children to have a foster parent then after I'm done doing transforms, I reunite the children with the original parents.
That was written like a beautiful story of heartbreak, sorrow, loss and ultimately happiness!
Thank you for the tutorial. I use a sprite mask in my game, but no matter what I do it doesn't show up after I press play. Could you please help?
Is that because you didn't set the UI scaling? :o
When I try to add the soft mask from the git url, it doesn't seem to register. I then did the manual installation of the package but it isn't working, the maskable object component can't be added to anything because it's abstract.
EDIT: I actually think I got it working now, somehow.
EDIT 2: It works, sort of. The masking graphic has a weird partial edge in it so the underneath object is only partially masked.
EDIT 3: So the visual kerfuffle is actually an editor rendering problem, but looks normal in game.
Oh that's great, good work! :) You'll have to show me when you're actually doing!
@@SpeedTutor Thanks! I actually am pretty limited to what I can do. But I'm trying to not rush things and actually do things right so I don't get overwhelmed by a big mess of code. (In my case I'm using visual scripting, which can look pretty jumbled if not organized into subgraphs). Also trying to make some of the general stuff re-usable for future projects, like camera panning and zooming. I have barely even scratched the surface.
Hey Thanks for the tutorial. very nice explained. What if I wanted to use a material instead of a background image (a sprite unlit image, for UI elements) Because I notice that if you, for example, write something in text mesh pro, create a mask component in it, and assign a UI image as a children, it will be masked fine. But if instead of a texture image, I want to use a material for the image component, the mask doesnt work anymore.
I'm sorry to say but it's not something I can answer because it might be a limitation of the actual masks themselves. It might be something to ask on the forums or see if others have mentioned it. Thanks for coming to watch though! :)
Looking forward for Super Ultimate Guide with Custom Range covered
Did I promise something? :o
Hello, great thanks !
And a question)
Can we hide video behind the mask ?
That's a good question, if the video was on a UI component then it's possible. I really don't know about that, sorry!
Thanks for answering.
I’ll try to hide a video of Unity videoplayer
I want to mask UI , but don't want the parent to contain the mask component ,
that is , I want a mask component on a free object not on parent coz I will be changing the size of parent and this is causing me to change in masking area ,
What can I do , Please help.
Sprite mask is perfect , in that I am not forced to attach it to only parent , can't this type of thing done for UI ?
I'm really not sure about that one, I wish I could be more helpful. Could you ask ChatGPT or something? :)
@@SpeedTutor I asked and didn't found any help, so tried commenting here.
now have you found a solution? I have similar problem, I have to create a smart glasses, I want to show ui wordspace of some people only in the glasses, I try to use sprite mask (but it works only with objects not with ui element) and ui mask (but it hides only the children)
@@leonardocafissi5580 unfortunately not
My goal is to create a few soft masks to cut out of a black screen, and reveal the game as the player goes. I have done this by making a few cascading soft circles with the black rectangle as the child of those cascading circles. I am not sure how to implement this in code though (YET).
So you want the object to fall?
@@SpeedTutor By cascading, I meant having them nested in each other so they work as a single mask on the black rectangle. I actually am not going to use soft masks for this after all. I am going with a dithered look instead. It's a top down game where you can reveal the map with lights, and there are 3 layers of black overlays, the top one being solid black, and then the other 2 under are lighter and lighter opacity. This is probably more performant on the android platform, than using a bunch of soft masks, not to mention I wouldn't be allowed to stack more than 8 at a time. Then I have 3 circles positioned on top of each other per light, and they are differing sizes, to give the feel of a soft mask that looks dithered. I will however be using a couple soft masks for scrolling Ui buttons.
I'm a beginner and finding answers for what I want to do in Unity is just as hard as figuring it what I want to do it seems. But I am working with UI elements, animating with animation track.,
I have 2 scenes - I want one scene to star wipe to the scene behind it. But I can't find anything specific to what I need to do. Any ideas? Thanks
Maybe you could explain this a little better for me? You could animate the transition you want and then just load the next scene you want after a certain amount of time, or when that animation is finished! :)
@@SpeedTutor Sorry, you'll have to excuse me if I am not explaining it well. I'm only a month into Unity, and don't understand alot of the terminology or basics. I essentially regurgitate what I read and watch online, so I don't entirely understand what you just said above ,lol.
I'll do my best to describe my set up and what I"m trying to accomplish.
In my hierarchy - I have a set up with UI images - I've separated those images into two scenes - I have 1 animation track with the main parent folder dragged into it and all animation lives within this one animation track ( for build purposes - this cannot change )
I now have a lets say, 10 sec of both scene animating. At the 5 sec mark, I want to transition to the other scene on frame 5. I want to do this with a Star wipe. The star starts in the middle very small and expands outward revealing the 2nd scene . Like a standard screen wipe, but from the inside out and in the shape of star.
What I've tried so far that doesn't work, I can animate the mask, but when I drag scene 2 into the component, it animates with the mask, so it gets larger, when I just want it to remain at size.
Edit - I instead animated the width and height on the mask rather than scale. This solved the scene within (the child) from scaling but now when I position the mask to where it needs to be, when the scene is revealing, it is translating along the axis that I animated on the mask.
There has to be a way to do this, lol. I can make this exact setup in Adobe animate in 2 min. I imagine Unity can duplicate this process, lol
Hope that clears things up
Thanks for your time
I figured it out after 2 days, way longer than it should have. But I guess that's part of the process.
@@SpeedTutor 5 months later and I still have no idea how to make mask for what I want to do. Just a simple animated wipe from one scene to the next. And I have no idea what you mean in your description (loading scene?) They all exist on one animation timeline. On frame 5 I want it to wipe to frame 7. I have gameobject and within that gameobject I have a ton of UI images that are all animating. So I have to select the parent. So I have two parent scenes that I am trying to wipe from one to the next
"Ultimate" guide, I came here looking how to use sprite masks to make them affect only certain gameobjects, but this ultimate guide really omitted sorting groups totally. -_-
Apologies for missing something that you wanted to know but I never claim to be an expert of all things when it comes to Unity. I learn these things myself and show everyone. That's exactly why I try and timestamp different places and show the exact content in the introduction. I hope you find what you're looking for though :)
@@SpeedTutor No problem, sorry for sounding pissed off - but that's because I was, there are NO tutorials on UA-cam for this, yours was the fourth I watched. 🥲
Anyways, I fiddled around with things myself and managed to figure it out. It wasn't that complex, here's what to do for anybody else trying to do this: Just add Sorting Group component to your sprite renderer, set the sorting layer let's say 1, then in the sprite mask tick custom range and set front to 1 and back to 0 - now the mask only affects sprites with the same sorting layer (I'd assume, I'm using Default) that have order in layer of exactly 1 (note, this is different than sprite's own sorting order, so you can still have certain sprites appear on top of each other).
Maybe cover this in a future tutorial? There seriously were no good results explaining this on UA-cam and while it is simple now that I know how it's done, it was quite confusing at first.
Have a good day buddy! 🙂
Haha, it's just the way it goes but thank you for taking the time to write the solution and hopefully it will help others in the future! Best of luck with your creations and I hope to see you around, getting mad at me again! :P
I need sprite masking in UI 😄
+1
It's almost 2022 and we still can't have soft mask without using external assets. I hate this engine.
I know exactly what you mean, I'm just thankful that awesome people make such things for free and give it away so we can all make use of it! :)
I agree it’s frustrating...at least they made a new logo! Lol