User Interface: Difference between revisions
NickTheNick (talk | contribs) No edit summary |
Oliveriver (talk | contribs) No edit summary |
||
Line 47: | Line 47: | ||
==== Elements Displaying Information ==== | ==== Elements Displaying Information ==== | ||
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 | First make sure there's a node in the right place in the Godot scene for what you want. If it's a label for instance, make sure it has the desired font, etc. | ||
In the | In the corresponding C# file, add the following lines near the top. You'll likely find lots of things like it there already, so just fit this in somewhere. | ||
[Export] | [Export] | ||
public NodePath | public NodePath NameOfElementGoesHerePath = null!; | ||
Underneath all the lines that already look like that, you'll likely find a bunch of private GUI elements. Add another one with the following. | |||
private TypeOfElementGoesHere nameOfElementGoesHere = null!; | |||
Note TypeOfElementGoesHere will be a Godot node type inheriting from Control, e.g. Label, Button, Container. | |||
In that file's _Ready() method, add the following line. | |||
nameOfElementGoesHere = GetNode<TypeOfElementGoesHere>(NameOfElementGoesHerePath); | |||
Finally, in the Godot editor for the corresponding Godot scene | Once you've added everything you need regarding how you want to modify or get data from the element in the C# file, build the Godot project, usually 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, 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 Name Of Element Goes Here Path. Assign that to the node you want to update, and you should be done. | |||
==== Interactable Elements ==== | ==== Interactable Elements ==== | ||
WIP | WIP |
Revision as of 20:58, 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.
Elements Displaying Information
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 node in the right place in the Godot scene for what you want. If it's a label for instance, make sure it has the desired font, etc.
In the corresponding C# file, add the following lines near the top. You'll likely find lots of things like it there already, so just fit this in somewhere.
[Export] public NodePath NameOfElementGoesHerePath = null!;
Underneath all the lines that already look like that, you'll likely find a bunch of private GUI elements. Add another one with the following.
private TypeOfElementGoesHere nameOfElementGoesHere = null!;
Note TypeOfElementGoesHere will be a Godot node type inheriting from Control, e.g. Label, Button, Container.
In that file's _Ready() method, add the following line.
nameOfElementGoesHere = GetNode<TypeOfElementGoesHere>(NameOfElementGoesHerePath);
Once you've added everything you need regarding how you want to modify or get data from the element in the C# file, build the Godot project, usually 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, 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 Name Of Element Goes Here Path. Assign that to the node you want to update, and you should be done.
Interactable Elements
WIP