Godot Version
4.5.1
Question
I’m trying to make from scratch quest window inspired by WoW using UI system in Godot.
Since Its so complex the nodes , I briefly would just need it lay like in draft .
I tried use
QuestDialog (Control)
├─ Panel (Panel)
│ ├─ VBoxContainer
│ │ ├─ Label (QuestTitle)
│ │ ├─ RichTextLabel (QuestDescription)
│ │ ├─ VBoxContainer (RewardsContainer)
│ │ │ ├─ Label ("Rewards:")
│ │ │ ├─ HBoxContainer (RewardItems)
│ │ ├─ HSeparator
│ │ ├─ HBoxContainer (Buttons)
│ │ │ ├─ Button (AcceptButton)
│ │ │ ├─ Button (RefuseButton)
but it looked awful , since text often overlapped .
I had go at Dialogue Manager and Dialogic , but both came with their own challenges so I decided best be built simplistic way of interaction for as this is one of the core functionality in RPG .
Any help of which type of nodes, and hierarchy structure be appreciate to make it functioning .
The secret here would probably be to use lots of H and V box containers to align everything as you need it. Nest it all in an HBoxContainer to get that Icon/NameOfQuest > Description > Accept/Decline alignment. Then the Icon/NameOfQuest would be it’s own VBoxContainer to keep them side by side. Description would probably be a mix of ScrollableContainer and another HBoxContainer. I don’t know what sort of layout you’re looking for in there, though. And then Accept/Decline would be another VBoxContainer.
Honestly you’ll likely have an easier time setting it up in the editor than trying to type it out in a draft, cus it’s just harder to visualize in your head instead of seeing it immediately adjust itself in the engine. I actually just tried to type out what I thought could work and then gave up after a moment cus it’s hard for me to track haha
1 Like
@scribblecrumb
So far I got this , how can I Do Icon and NameoftheQuest display next to each other in this VBOXContainer ?
current progress using Margin Containers
How could I push it from above down ?
You could play around with the horizontal and vertical alignment settings for each control node to get them where you want. For example, the Icon and NameOfTheQuest displays could be vertically aligned to the bottom, this will push them down until they hit the control node below them in the larger HBoxContainer.
1 Like
I have simplified as getting alignment inside is still confusing to me 
This is holder for now , I try to make code works as well and hopefully can adapt it .
For now resolution is only one size 1920x1080 .
Is there a reason you’re using TextureRects instead of panels, buttons, ect?
Be fair no , I only found it as it had placeholder currently I have upgraded look to this
so TextureRect can create gradient instead of loading PNG into project
2 Likes
You’d probably be better off using a StyleBoxTexture for the theming of nodes like Buttons, Panels, PanelContainers, ect. to accomplish that gradient. It would give you better control over their look with less manual work, and would allow you to use built-in input signals for things like buttons instead of having to code all of that in yourself.
2 Likes
@scribblecrumb is this what you mean ?
I will replace buttons of course with actual buttons to send signal , any more tips are welcome
1 Like
