User:Raiguard/Tutorial:Modding tutorial/GUI

From Official Factorio Wiki
< User:Raiguard
Revision as of 02:40, 28 May 2020 by Raiguard (talk | contribs) (Initial stub page.)
(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)
Jump to navigation Jump to search

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 https://lua-api.factorio.com/latest/LuaStyle.html 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...