Cutout Transition Effect in Godot

Tutorial on how to create a cutout transition effect, sometimes seen in 3D platformers, using the Godot game engine.
This tutorial uses Godot 4, but the same shader can be used in Godot 3.
Music:
"Getting it Done" Kevin MacLeod (incompetech.com)
Licensed under Creative Commons: By Attribution 4.0 License
creativecommons.org/licenses/b...

[@lunarcanvasdev]

If you're getting an error, replace "COLOR.a = 0f;" with "discard" Works for me.

[@sporktank]

Great video, well explained... exactly something I was looking for a couple months ago! 😊

[@cadoink]

SporkTank! I needed the effect too and found no resources. I figured it would be a useful video to make. :)

[@sporktank]

@@cadoink Haha funny you say that, I was thinking to make a video on it myself for practice!

[@redwolf6334]

Thank you very much you are very good at making videos its really impressive

[@projectavalongame]

Thanks for this. I have been looking for how to do this for a while but had no idea how to even search for it lol. Shoutout to GameDev Journey for having this in one of their videos.

[@cadoink]

Glad I could help! When I was trying to figure out the effect I couldn't find any information online either, so once I figured it out, I thought it would be a good idea to put the information out there.

[@luckyknot]

Immediate subscribe! useful and to the point!

[@salatah1224]

Thanks bro💪

[@Paruthi.618]

cool tutorial.. thanks

[@cadoink]

Glad you enjoyed it! :)

[@ld2studio675]

Thanks. Very interesting

[@cadoink]

Glad you enjoyed it!

[@Khalyn12]

Cool video, writing specifically to have the youtube algoritihm work in your favor 🧙‍♂️👍

[@cadoink]

Haha thank you! Glad you enjoyed it. :) Hope to have some more tutorials soon!

[@josmarpinheiro2589]

Top vídeo

[@cadoink]

Thank you!!

[@Coralori]

How would you implement this to play upon clicking a button in a different scene (i.e. the code needed)?

[@cadoink]

What I typically do is I have a main scene that contains two children, the scene with the button, and the cutout scene. The scene with the button will have an event that the main scene will listen for. When that event fires, the main scene will receive the event and tell the cutout scene to play the animation. I'll also typically have events for when the animations finish. So once the screen is completely black, I can clear out my scene with a button (typically my main menu), and add whatever scene I want to transition to. Then I call the cutout scene to fade back in.

[@WeirdGoat]

Great work! Could you please make a video to tell us how to set and get shader parameters with C#? Thanks alot!

[@cadoink]

Thank you for the suggestion! I'll see if I can get a video made about that. :)

[@WeirdGoat]

@@cadoink Happy to help. Sometime we need to switch from different shaders, or make a tween animation. And there are lots of shader you can find all over the internet, but how to use them properly is the problem. Like I got a water shader, how could I put a water pit in my Top-Down game, when character walk though it, it will show waves and reflection. There are really few tutorials that talking about it.

[@cadoink]

@@WeirdGoat Finally got some time to make a video about interacting with shaders and materials using .NET. I briefly cover a way to tween shader uniforms. kzbin.info/www/bejne/nnnMYmSCi7aVn9U&lc=UgwKnMY12akseUJhOUx4AaABAg I didn't cover waves and reflections for a character, but my suggestion would be to fake the effect rather than complicate the water shader. You could spawn a quad that has a water ripple texture under the character, or use particles. For the reflection, one common technique is to spawn a copy of the player or object upside down underneath the player with a material/shader that makes it look under water. There may some some tricks around using the water as a mask for that copy. Might look into it myself, could make a good video.

[@WeirdGoat]

@@cadoink Thanks for the advise, and I'm gonna check your new video out!

[@Zikes]

When I try this in Godot v4.0.2 the sampler2d texture repeats at scales less than 1.0, even when I use repeat_disable in the shader uniform. Is this a recent bug, or am I missing something? UPDATE: I've tried this in 4.0.3-rc1 and it works as expected. It seems 4.0.2 had a bug and it has been resolved.