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 [https://lua-api.factorio.com/latest/LuaGui.html LuaGui], [https://lua-api.factorio.com/latest/LuaGuiElement.html LuaGuiElement], and [https://lua-api.factorio.com/latest/LuaStyle.html LuaStyle] pages handy. === Tutorial syntax === This tutorial will adapt some methods from [https://wiki.factorio.com/Tutorial:Modding_tutorial/Gangsir Modding tutorial/Gangsir], namely: <pre style="background-color:#AAFFAA!important; color:black"> Code tinted green like this should be included into the mod this tutorial is going to create; If the reader follows along with it. The best way to do this is to copy and paste, to ensure faithful reproduction. Whenever code is added to the mod, a Lua comment with the file name will be at the beginning of the green box. Place the code in the box into that file. Eg: --control.lua </pre> <pre style="background-color:#DDA0DD!important; color:black"> Code tinted purple like this should not be included into the mod, it's just for educational/example purposes, and to boost understanding. </pre> For the purposes of the tutorial, it would be a good idea to create a fresh mod, separate from the mod you created in Gangsir's tutorial. === In-game tool: GUI border view === [[File:Modding tutorial Ctrl F5.png|500px]] 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. === In-game tool: 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. === Library: mod-gui === Add this require into your script file before you begin: <pre style="background-color:#AAFFAA!important; color:black"> -- control.lua local mod_gui = require("__core__.lualib.mod-gui") </pre> == The Root == To build a GUI, you must gain access to the GUI "root". The most common method of access is through [https://lua-api.factorio.com/latest/LuaPlayer.html#LuaPlayer.gui LuaPlayer::gui]: <pre style="background-color:#AAFFAA!important; color:black"> -- control.lua script.on_event(defines.events.on_player_created, function(event) local player = game.get_player(event.player_index) local player_gui = player.gui end) </pre> == Adding elements == '''TO BE CONTINUED...'''