Jazz Up GODOT UIs & Games Using Clipping Masks

[@LucyLavend]

That clipping trick with with the progress bar is really neat! This opens up a lot of new options for spicing up UI

[@computersciencestudentriverbat]

If GDQuest ever gets the time/resources I'd love to see a "GDSideQuest" channel that just the staff going into deep dives into topics they like. I think their videos are a good format for learning. I'd love to hear about just about anything they'd like to talk about. These videos are great and I GDQuest is a doing a wonderful contribution for Godot development and community.

[@twenty-fifth420]

As an artist and noob image/video editor, ‘clipping masks’ are the most powerful feature in any piece of software.They are like the duct tape of the graphics world. 😂

[@Rauschen]

Your timing with this tutorial was incredible!! Starting last night, I was trying to figure out how to create an effect like this to replicate the scrolling difficulty bar in Risk of Rain and was worried it would have to be done using a shader that controls the transparency. This approach is much simpler. Thank you!

[@darkfoxfurre]

5:29 That effect is called a vignette (pronounced as "vin-yet")

[@HungryHungryB]

Nice seeing some GDQuest content, feels like its been forever 😀

[@Gdquest]

True. :( Those courses are shaping up to be like nothing else we've worked on before. There's so much content and so few of us.

[@Gdquest]

Thankfully we're getting lots of excellent feedback so it feels all worth it. We'll be setting more time aside for free content again.

[@KakarotSaiyan-v5p]

​@@Gdquest can you please upload a beginner friendly KZbin tutorial video. That teach you how to code and develop games using GD script. by illustrating step by step, how to code and make multiple games from different types and genres, by GD script and Godot. Including both 2D and 3D, different types and genres of games. I will really appreciate it if you did this please.

[@Gdquest]

You can check the channel to see what free video tutorials are available at this time.

[@KakarotSaiyan-v5p]

@@Gdquest thanks, but I mean relatively more advance games, such as crash bandicoot, Megaman network, Megaman marvick hunter x, super mario world, Pokémon etc. in a relatively beginner friendly way.

[@akitotest01]

now i need to make the pedro, pedro, pedro, peee meme on godot

[@jmagrippis]

Nice one, very handy! Feels like the z-index “limitation” could also be used to make an element “escape” the clipping mask! Like the character’s hair, or a scarf, could be a neat touch.

[@kiyasuihito]

I absolutely love Godot's UI/Control system. Most intuitive and flexible design for building UI I've come across. Almost feels like a toy. 🎉🎉

[@leonoliveira8652]

4:00 Limitation? That's literally a feature. You can just make animations that will pop out of the clipping mask when they happen.

[@WagnerGFX]

That's a good idea, but it could visually break certain parts of the character's body in the process. Instead, it would be easier to animate the clipping mask sprite to make it expand in areas that the character "leave" the mask.

[@maheryrazafindralambo9679]

Great explanation 👌👌 I discovered it after toying around for hours but, Oh my man, I needed this like 2 months ago...

[@Unimportant]

This looks so useful and convenient!

[@dingdong1112]

hey Mr GDQuest i have a problem running my godot engine in forward and mobile renderer when i run that renderer it show black editor. can you make video about how to fix this problem please🙏

[@RhevoRamirez]

thanks my friend

[@GaddrianYT]

How can I do the same with a 3d sprite in godot 4?

[@RPGgrenade]

so for something 3D would a subviewport be required?

[@soirema]

Amazing tysm!! ❤

[@pastor8647]

Please make a small 3D Dice Tutorial for games like SpellRogue! Specifically to be used with 2D UI (like in Dicey Dungeon).

[@Shadbolt001]

Any tips on if we want the character to "spill" over only some edges? For example clipping the lower part of the circle but allowing her hair to pop out the top of the circle.

[@WagnerGFX]

If it's static, all you need is a clipping mask in a similar, but different shape than the background color. Then you would use just the "clip" option to hide the actual mask. If it's something that happens in specific situations, you could animate the clipping mask itself and do some other animation tricks to make it look like the character just went out of the box.

[@cameronkerr6258]

Is there a way to make the clip mask invisible?

[@ic3bug]

Awesome 👍

[@qondonyon]

jazz up *dun* > add Sprite2D *Dun!* > reparent Node2D! *DUN!!* > Clip + Draw!!

[@jkouss]

Simple but so cool

[@RenderingUser]

Do you still use blender to edit videos?

[@Gdquest]

André, GDQuest's video editor (and the artist behind all the thumbnails!) is most proficient with After Effects so that's what he uses the most these days.

[@inigodot]

Does this work with 3D Models?

[@adiveler]

You mean like an animated portrait in an RTS game?

[@inigodot]

@@adiveler Yes, something like that. Maybe something like the Starfox games do

[@Gdquest]

Yes! But if you want to use the 2D clipping mask, you would have to render the 3D scene to a viewport and clip that.

[@inigodot]

@@Gdquest Ok thank you!

[@Hannah-Bernal]

Great tutorial! Does this also work with 3d objects like mesh3dinstance?

[@Gdquest]

Yes! But if you want to use the 2D clipping mask, you would have to render the 3D scene to a viewport and clip that.

[@Thomas_Lo]

very stylish

[@고자ryan]

How do i make a rhytnm game in godot4(like "no f***ing friday".)

[@digital_down]

Is there a way I can do this without clipping children, if I parent it to what I want to clip, it would basically break my game cause of the amount of code I use to reference the player, enemies etc.

[@doodleanimates8049]

Child of the mask is unnecessarily ominous.

[@leonoliveira8652]

I think I purchased a full course some time ago, with the promise that it would be updated to GD4 some time ago. I ended up never checking thanks to some life stuff. Is that still a thing?

[@Gdquest]

Did you log in to the new platform on school.gdquest.com? If the course you bought is currently being updated, you'll have access to it and can see it in your profile on the new platform. Remember to reset your password using the magic link or "forgot my password" as it won't be the same password you used on the mavenseed platform.

[@leonoliveira8652]

@@Gdquest I guess I only had access to the old site??? I'm trying to recover my password and still have the receipt from the purchase, but I guess it's an old site linking to a new one?

[@leonoliveira8652]

ok, yeah, I found the "one time link" thing and recovered my account, I still have the courses!

[@piousthepious]

We're so back

[@ZoidbergForPresident]

Kinda silly question: can the clipping mask be an animated picture? :P

[@Gdquest]

It's one of the examples in the video actually.

[@eduardonajera5459]

Pleeeeease, make new a 2D bone tutorial. I already own all your courses but cant find a word to help me on It.

[@abitraza2509]

No tutorials on multiplayer

[@killers1259h]

Hello gdscript can you make tutorial for mobile games touch screen games

[@wiltis1438]

Hej

[@wiltis1438]

❤❤❤❤

[@cycomkid]

Too much silence 🤐

[@allisongross2946]

That was at the bare minimum four clicks

[@mayckonm.rebecci7166]

Really, i was almost buying the course today, and then i see that GODOT fall for the woke culture 😥Goodbye Godot

[@Iqbal1808]

Just do youtube tutorials bruh

[@mayckonm.rebecci7166]

@@Iqbal1808 Yeah man, but for Unity now

[@Vegan_Kebab_In_My_Hand]

The game engine itself is completely apolitical though. I've bought the course "learn 2D gamedev from zero." It's stellar, I'd always highly recommend it because it also teaches you transferable techniques, good practices and mindset.

[@chidorirasenganz]

Cope

[@CoffeeDrinkerKim]

Cry harder.