Fancy UI Transitions in Godot
Вставка
- Опубліковано 20 жов 2024
- Through the power of Post-Effects, Viewports & Shaders I've managed to make incredibly powerful transitions for my User Interface, Menus and Windows.
Follow me and support me, check out these links :
Support me on Patreon ► / ombarus
Join the discussion on Discord ► / discord
Twitter ► @Ombarus1
Instagram ► / ombarus1
Website ► www.ombarus.com
Email ► ombarus.dev@gmail.com
Github ► github.com/Omb...
Music ► www.bensound.com
My name is Ombarus and I'm a programmer / game developer from Canada who moved to Japan and decided to try my own luck with game dev.
I know what you mean with this video, and I felt the same many times when developing when I am not sure if I am doing the pretty way. That worrying consumes a lot mentally. So I decided to not go longer with these kind of stuff if things are working, organized and performing good. You know why? Because probably we will learn another ways to approach that soon that might trigger an AHA moment in the near future.
We are doing games for gamers, not developers, so if things works, don't let that consume you too much.
Could not agree more.
Get a practical system in place then refine as needed keeping the UI relevant with the touch up and graphical treatments put off until finalization. Supports resource management at all levels from attitude to ultimate man-hours and shrink (wasted resources).
Good stuff Raphael!
@@NOPerative This is exactly the kind of problem I run into with making my games. I have been following a different strategy, indeed creating separate shaders to each object, or making a shader visible just in some instances and not in others.
@@pedrorns Modularization - there you go! Helps out with maintenance while facilitating change in a more stable manner - something the AAA gaming market has somehow forgotten oddly; prep patch for the main patch with the main patch followed by a patch to fix what the patch broke. Think a meme is in order?
Glad to hear you're making progress Pedro!
I like to follow the development of your game, you had problems and solutions that you describe and show very well. Keep up the good work!
You can use NodePath as an export hint, and drag the node you want, the editor should track it's path when it is moved
Also :
The tween class in Godot is great, you can Tween Proprieties, argument in a method, fellow a proprieties, the return of a method...etc
just use custom texture rect in canvas layer and apply your shaders to them, while placing them over the menu parts you want to get affected by them, and tween the modulation or something
I was bugging another dev about his full screen transitions, so he was kind enough to make a video about how he does it. It does not fit all of your use cases, but might be informative. www.twitch.tv/videos/638837250
Just a few thoughts I had while listening is to test the crap out of it on other systems if your that worried about it, find the ways it can break and just get familiar with its nature. Make a plan for what you would do if it stops working, etc. Become ok of letting it go if its not a part of the core function of the game and its too risky. Also something to discuss with Godot developers in developing a feature for this in future Godot.
Thanks for sharing, your work is insightful and helpful.
I am not sure if it works (I didn’t try it out) but did you try using a ViewportTexture as the texture of a TextureRect, instead of using a ViewportContainer? You can also extract the texture from a Viewport manually and set it somewhere else (such as a TextureRect) without needing to move the viewport around.. I think (again, I didn’t test it)
You and Matthias Wandel could be brothers. The resemblance is uncanny.
Wait....if your goal was to make your UI look like a glitchy CRT monitor and people thought that there was a bug in the UI.....um....yeah.....that's a bonafide success my dude.
i feel like i need this discussion in Unity !! XD
I use tween to animate my ui in godot
Couldn't you use a tween for animating transitions? That's how I was taught to do it
I wanted to be able to apply any effect on top of everything. I Couldn't figure out a way to do it with Tween.
I would of used a overlay with a screen reading shader. But your approach is good too, you just need to keep a good structure and organisation hygiene.
Enjoy le confinement !
Yes this is 2 years old but in modern Godot you can animate each menu and transition and use state machines or one shots to play the other menu.
I've had a similar issue with syncing up a shader animation across multiple nodes. And realized that I could just attach a script to the shadermaterial and created a singleton with signals that the shadermaterial script could connect to. So any functions that I could call globally would effect all nodes using that shader. Not sure if that's helpful in your case but is a solution that worked for me.
I can imagine few ways of doing this. We need to have a conversation about shaders...
Happy to chat. I made a discord just for that : discord.gg/8vUQuqh
Out of the top of my head, for the Papers Please thing, is to use a line2D with caps and animate the lenght of the line, that way the caps wouldn't deform as the size changed. (It's a guess on how to do it, haven't tested it tough)
You could do the same with NinePatchRect also, and animate/Tween the rect_size
I know this is kinda late, but why dont having 2 viewports for the menu with the shader and other without the shader? Or 2 cameras rendering the different menu's, is something that could work i think
I barely understand how all the viewport stuff actually works. But I think moving the viewport arround didn't break anything because the viewport container doesn't actually do anything. I think it just sets the viewport's size automatically.
Well, the viewport won't be rendered to the screen unless you use a viewport container or check the property in the viewport "render direct to screen"
I'm looking for a tutorial to make a mode selection menu like the one in super meat boy but I can't find one, if anyone knows of one please help
Very well explained video with very few uses of code. But if code got involved it was clean and easy to read! Thank you!
I hate Code in tutorrial-videos that make you pause with lines like "xrt.brts(bxdr,rndr)" just because people programming are either lazy, cant type quickly enough and try to save some letters or both.
what if you keep the a reference of each ui node as a singleton, and each node declares itself with NodePath every time it enters a new tree /parent ?, so instead of get_node(string), you get_node(NodePath reference) which still is a string. no sure it would work i haven't done it myself. i dont think re-parenting nodes is a good idea but if i had to, i would try it this way.
That could be a good system though I'm not sure I would use it for all nodes in the game, that would defeat the purpose of the SceneTree in Godot. I've been thinking of a system like this to allow everything easy access to my Behaviors.
Godot 4.0 will be have local uniforms which should simplified lots of things.
Estimated Daffy, that "local uniforms" thing, is that related to shaders?
@@Crisisdarkness yes
what's the timeline on it's release?
can't you just put the UI elements inside another node, like a file sistem, and apply the shader to that parent node?
Normally Nodes only define the order in which things are rendered but they are rendered separably so the only way to have the same effect apply on all the children nodes is to use the ViewportContainer and the Viewport Node! The reason stuff like the Modulate parameter or the Position of Children is affected by the parent Node is because this is propagated by the engine before rendering.
Well... For the Transitions I would make 0 shaders but use sprites. Papers please could just be stretching a sprite, if you ask me.
After looking at some of the comments... Yeah, I probably went a bit overboard. On the plus side I have a very powerful system for doing post-effect on my UI windows!
Aaaaand I came back to this video after 3 Years. Now that it's relevant to me. Crazy how that works, lol! Currently working on a card game of sorts and I'm having a ton of challenges integrating neat UI (which is 2D) into my 3D scenes. I wonder how your effort has shaped up in all that time!@@Ombarus
i think i will wait for REdot at this point
turns out godot its more of a cult at this point
like i am sorry i just cant use this engine anymore
yes, this seems to be a godot problem due to the small funding of developers, I like godot but a normal listview with smooth animation and transitions, there is no way to do it easily. I am currently working on applications on Flutter where animations with lists, etc. are done in a few lines of code, example ua-cam.com/video/NHAIiAmxTAU/v-deo.html, ua-cam.com/video/qx4JphWeVao/v-deo.html
use lerp