User Interface: Difference between revisions
NickTheNick (talk | contribs) No edit summary |
NickTheNick (talk | contribs) No edit summary |
||
| Line 34: | Line 34: | ||
https://docs.godotengine.org/en/stable/tutorials/ui/index.html | https://docs.godotengine.org/en/stable/tutorials/ui/index.html | ||
=== Creating the UI Element === | |||
First you must go inside the Scene Editor in Godot and create the new UI element. Make sure it has the correct size, placement, graphics, and everything. | |||
WIP | |||
=== Adding Functionality to the Element === | |||
Once you have created the UI element, the following instructions can help you add functionality to it. This is to either make it clickable, display text... whatever functionality you want. | |||
First make sure there's a Label node inside the button node with the font and such you want to use. | |||
In the relevant C# file (which I think in this case would be CellEditorComponent), add the following lines near the top. You'll find lots of things like it there, so just fit this in somewhere. | |||
[Export] | |||
public NodePath CostMultiplierLabelPath = null!; | |||
Underneath all the lines that already look like that, you'll find a bunch of private GUI elements. Add one with private Label costMultiplierLabel = null!. | |||
In that file's _Ready() method, add the line costMultiplierLabel = GetNode<Label>(CostMultiplierLabelPath). | |||
Now wherever in that file you want to change the value, you'll need to do costMultiplierLabel.Text = blah. | |||
Once you've added everything you need, build the Godot project. I usually do this by running it. It might crash, but it needs to have built to do the next step, which will fix that crash. | |||
Finally, in the Godot editor for the corresponding Godot scene (again, probably CellEditorComponent), select the top-level node. In the inspector on the right, you'll find a list of script variables, and if things have gone correctly, there should be one called Cost Multiplier Label Path. Assign that to the label node inside the panel that you want to update. | |||
Revision as of 20:51, 24 August 2022
Thrive will aim for a sleek, minimalistic user interface (also called user interface, UI, or GUI). It will typically differ between the stages.
Overview
Thrive will aim for a sleek, minimalistic graphical user interface.
Microbe Stage
Main Article: Microbe Stage GUI
The Microbe Stage is currently the only stage in the game and thus all user interface development focuses on its application to this stage.
Multicellular Stage
This stage is not yet in development.
Aware Stage
This stage is not yet in development.
Awakening Stage
This stage is not yet in development.
Society Stage
This stage is not yet in development.
Industrial Stage
This stage is not yet in development.
Space Stage
This stage is not yet in development.
Editing the UI
Thrive uses the Godot engine, as such there is plenty of documentation online about how to edit UI in Godot:
https://docs.godotengine.org/en/stable/tutorials/ui/index.html
Creating the UI Element
First you must go inside the Scene Editor in Godot and create the new UI element. Make sure it has the correct size, placement, graphics, and everything.
WIP
Adding Functionality to the Element
Once you have created the UI element, the following instructions can help you add functionality to it. This is to either make it clickable, display text... whatever functionality you want.
First make sure there's a Label node inside the button node with the font and such you want to use.
In the relevant C# file (which I think in this case would be CellEditorComponent), add the following lines near the top. You'll find lots of things like it there, so just fit this in somewhere.
[Export] public NodePath CostMultiplierLabelPath = null!;
Underneath all the lines that already look like that, you'll find a bunch of private GUI elements. Add one with private Label costMultiplierLabel = null!.
In that file's _Ready() method, add the line costMultiplierLabel = GetNode<Label>(CostMultiplierLabelPath).
Now wherever in that file you want to change the value, you'll need to do costMultiplierLabel.Text = blah.
Once you've added everything you need, build the Godot project. I usually do this by running it. It might crash, but it needs to have built to do the next step, which will fix that crash.
Finally, in the Godot editor for the corresponding Godot scene (again, probably CellEditorComponent), select the top-level node. In the inspector on the right, you'll find a list of script variables, and if things have gone correctly, there should be one called Cost Multiplier Label Path. Assign that to the label node inside the panel that you want to update.