User Interface: Difference between revisions

From Thrive Developer Wiki
Jump to navigation Jump to search
No edit summary
No edit summary
 
Line 60: Line 60:
     private TypeOfElementGoesHere nameOfElementGoesHere = null!;
     private TypeOfElementGoesHere nameOfElementGoesHere = null!;


Note TypeOfElementGoesHere will be a Godot node type inheriting from Control, e.g. Label, Button, Container.
Note TypeOfElementGoesHere will be a Godot node type inheriting from Control, e.g. Label, Button, Container, TextureButton, TextureRect, Texture, etc.


In that file's _Ready() method, add the following line.
In that file's _Ready() method, add the following line.

Latest revision as of 22:01, 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, TextureButton, TextureRect, Texture, etc.

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