User:Raiguard/Tutorial:Modding tutorial/GUI
THIS PAGE IS A WORK-IN-PROGRESS.
While you cannot edit base game GUIs, the Lua API includes the ability to create your own, completely custom GUIs. This tutorial will get you up to speed with creating such GUIs.
Before you Begin
Be sure you have the LuaGui, LuaGuiElement, and LuaStyle pages handy.
There are two in-game tools that are absolutely essential for creating GUIs:
GUI border view
File:Modding tutorial Ctrl F5.png
Hitting Control + F5 on your keyboard will bring up the "GUI border view". This surrounds all GUI elements with red borders, and can help you visualize how things are laid out.
GUI style inspector
File:Modding tutorial Ctrl F6.png
Hitting Control + F6 on your keyboard will allow you to use the "GUI style inspector". This allows you to view an element's style inheritances when you hover over it. Combined with the GUI border view, you can inspect normally hidden GUI elements.
The Root
Every GUI must start in one of the five GUI "roots", listed in LuaGui:
- top: Aligns the GUI at the top of the screen. Multiple elements will be flowed next to each other so they don't overlap.
- left: Aligns the GUI at the left of the screen. Multiple elements will be flowed next to each other so they don't overlap.
- center: Centers the GUI on the player's screen. Multiple elements will be flowed next to each other so they don't overlap.
- goal: Where the objective GUI sits. It is recommended not to use this root unless creating a scenario. Multiple elements will be flowed next to each other so they don't overlap.
- screen: An empty element that allows you to position your GUI anywhere on the player's screen. Because of this, multiple elements may overlap. Elements are placed in the top-left corner by default.
You will want to place your GUI in screen, unless you have a specific reason not to.
Adding elements
TO BE CONTINUED...