User Interface

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

The following instructions are for elements meant only to display information.

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.

Interactable Elements

WIP