ไม่สามารถเล่นวิดีโอนี้
ขออภัยในความไม่สะดวก

Godot UI & Control Node Crash Course

แชร์
ฝัง
  • เผยแพร่เมื่อ 5 ส.ค. 2024
  • In this Godot 4 tutorial, we're creating a basic main menu user interface using control nodes, containers, and buttons. We'll take a look at how to organize control nodes and use Godot themes and styles to customize the look of our UI.
    🔥 GET THE SOURCE FILES ►► / stayathomedev_
    👉🏼 CHECK OUT MY GODOT 4 FPS TUTORIAL SERIES ►► • Make An FPS in Godot 4
    -----------------------------------------------------------------------------------
    0:00 - Introduction
    0:05 - Overview of the Tutorial Series
    0:44 - Focus on Basic Main Menu Setup
    1:24 - Creating a New Scene
    1:51 - Using Container Nodes
    2:17 - Adjusting Layout with Anchors
    3:12 - Adding a Label Node
    3:37 - Using Panel Container
    4:06 - VBox Container for Vertical Layout
    4:37 - Adding Buttons
    5:00 - Testing the Menu
    5:55 - Introduction to Themes
    6:39 - Creating and Saving Themes
    7:01 - Customizing the Panel Container
    9:00 - Adjusting Padding and Borders
    10:48 - Custom Minimum Size and Button Spacing
    12:26 - Setting Up Button Styles
    13:06 - Creating New Button Types
    14:50 - Customizing Button Appearance
    17:01 - Theme Variation for Buttons
    18:00 - Summary and Next Steps
    19:00 - Future Tutorials and Series Outline
    -----------------------------------------------------------------------------------
    This series is part of my sponsored User Interface (UI) and Control Node tutorial series where we will walk through how to create various user interfaces, heads up displays, and more in Godot 4, step by step. I won't be skipping any steps in the process and everything will be sequential video to video.
    Joining my Patreon in one of the 3 tiers will give you:
    - access to the private Discord channel
    - your name in the project README
    - early access to tutorial videos
    - power to vote on what mechanics get covered in future videos
    - full access to the project source files to use in your own projects
    -----------------------------------------------------------------------------------
    STAYATHOMEDEV ►► stayathomedev.com
    TWITTER ►► / stayathomedev
    MY GODOT ASSETS ►► stayathomedev.itch.io/
    #godot #godotengine #ui

ความคิดเห็น • 35

  • @bonaire1880
    @bonaire1880 26 วันที่ผ่านมา +6

    I'm usually a read the docs kind of guy but this tutorial was fantastic. I'm in need of polishing my UI and never learned how to use themes but this seriously made them seem way less intimidating. Big Thanks!

    • @stayathomedev
      @stayathomedev  26 วันที่ผ่านมา

      Thats awesome 👍

  • @Lowwaels
    @Lowwaels 25 วันที่ผ่านมา +2

    This tutorial is the best I've seen for explaining how the theme, overrides, and variations work with each other. Super excited for the upcoming videos!

  • @codesxt
    @codesxt 26 วันที่ผ่านมา +1

    Than you so much for this! I had no idea that you could create your own types.

  • @yall_girl_eve
    @yall_girl_eve 26 วันที่ผ่านมา +1

    I NEEDED THIS SO MUCH
    thank you for this tutorial, it will be undispensable surely

  • @dukkhan1288
    @dukkhan1288 22 วันที่ผ่านมา

    Exactly what I was looking for. Thanks

  • @ObiWanJaKobe
    @ObiWanJaKobe 25 วันที่ผ่านมา

    I genuinely love your tutorials. Thank you very much for making these. Once I have the disposable income for it, I'm definitely going to upgrade the patreon tier.

  • @dardasaba7971
    @dardasaba7971 26 วันที่ผ่านมา

    Great video, can't wait for the next ones! This is definitely a very useful topic

  • @MOON9FLY
    @MOON9FLY 26 วันที่ผ่านมา

    One of the Best Tutorial in UI , Thanx

  • @ayushsidam289
    @ayushsidam289 5 วันที่ผ่านมา

    I'm beginner in gamedev and currently making pong game clone for learning. I had done all the programming of game except the UI, as Godot ui system is very hard to understand and this tutorial helps me to complete the game. So Tysm and Sorry for this essay. 😅🙏🏻

  • @NirielWinx
    @NirielWinx 25 วันที่ผ่านมา

    We need a tutorial on how to cleanly distribute inputs to ViewportContainers, and in particular on how to get them to properly react to the physics raycasts when you move your mouse over objects in the various 3D scenes.

  • @turbomodus
    @turbomodus 26 วันที่ผ่านมา

    great tutorial!

  • @user-tc5yk4zd5k
    @user-tc5yk4zd5k 25 วันที่ผ่านมา

    Thank you!

  • @williambaker4915
    @williambaker4915 25 วันที่ผ่านมา

    Awesome!!!

  • @f0xshadow521
    @f0xshadow521 26 วันที่ผ่านมา

    the Godot devs early on: "the name Godot rhymes with Robot, like Go-Dot"
    later: "eehh... ge-DOE seems to be popular, lets just go with that"
    this guy: "GAAW-doh"
    :P
    UI + Control nodes need a lot of love in the tutorial community. Thanks for the upload
    liked + subbed

    • @stayathomedev
      @stayathomedev  26 วันที่ผ่านมา +2

      Thanks! And I'm totally right

  • @Oltohm
    @Oltohm 24 วันที่ผ่านมา +1

    He doesn't miss...

  • @DrW1ne
    @DrW1ne 26 วันที่ผ่านมา +1

    YOOO, right in time.

  • @berke4664
    @berke4664 26 วันที่ผ่านมา

    Thank You

  • @fernefer1071
    @fernefer1071 26 วันที่ผ่านมา +2

    bro why did no one tell me until now about that pin button in the theme editor

  • @jesusmora9379
    @jesusmora9379 25 วันที่ผ่านมา

    More people need to learn about control nodes

  • @jesusmora9379
    @jesusmora9379 25 วันที่ผ่านมา +1

    You don't need to assign the theme to each node, the theme is inherited from any parent node.

  • @Aserenesnow
    @Aserenesnow 26 วันที่ผ่านมา

    Yaaaay 🎉

  • @generrosity
    @generrosity 26 วันที่ผ่านมา

    So there isn't a global project defined theme? And it doesn't "inherit" the theme from parent UI nodes?

  • @krish-ut9de
    @krish-ut9de 26 วันที่ผ่านมา

    yaayyyyyy

  • @Hero-fo7jt
    @Hero-fo7jt 26 วันที่ผ่านมา +2

    I need this ui in Godot so hard

  • @jasonwilliams8730
    @jasonwilliams8730 25 วันที่ผ่านมา

    👍

  • @user-pj7ip3zr7m
    @user-pj7ip3zr7m 26 วันที่ผ่านมา

    Can you make an app with GODOT ?

  • @theTeslaFalcon
    @theTeslaFalcon 26 วันที่ผ่านมา

    I watched this to learn about UI & Control Nodes.
    Instead, you've spent the last 10+ minutes talking about themes. I HATE THEMES! I have never understood that nonsense.

    • @stayathomedev
      @stayathomedev  26 วันที่ผ่านมา +1

      Themes and UI are siblings. Once you get used to them, it gets better

    • @theTeslaFalcon
      @theTeslaFalcon 25 วันที่ผ่านมา

      @@stayathomedev
      You said that the confusion was when to use each node. I was hoping that you'd clarify that confusion. Themes are a distraction from that substantive (& advertised) issue. I feel like this was a bait & switch title. If it was titled, "How I Made This Menu Look Like This", it would have been more honest & a warning to not waste my time.

  • @porkyorcy1715
    @porkyorcy1715 25 วันที่ผ่านมา +3

    why do we require 10% of the screenspace to be your gray background, just chroma key yourself 😭

  • @vmakar85
    @vmakar85 24 วันที่ผ่านมา

    Just in time, my little project just started to acquire a UI and I got into so many mistakes because I didn’t understand how it should work, but here’s a whole tutorial, thank you! I will watch and absorb knowledge.

  • @drhayes
    @drhayes 26 วันที่ผ่านมา

    This tutorial is the best I've seen for explaining how the theme, overrides, and variations work with each other. Super excited for the upcoming videos!