Modding:GUIs: Difference between revisions

From Vintage Story Wiki
(update section title)
(Expand the documentation for Cycle Dialog Outline Modes)
Line 7: Line 7:
In Vintage Story you currently need to formulate your GUIs in code, which requires acute spacial thinking. Hopefully someday we'll have a point&click GUI designer that takes off a lot of work. Until then, here are some of the essentials.
In Vintage Story you currently need to formulate your GUIs in code, which requires acute spacial thinking. Hopefully someday we'll have a point&click GUI designer that takes off a lot of work. Until then, here are some of the essentials.


<!--T:3-->
== Dialog Outline Modes ==
'''Protip:'''
The [[Controls#Debug and macros|Cycle Dialog Outline Modes keybinding]] can be used to add outlines around GUI elements, making it much easier to understand how your code is translated into the visual GUI. Pressing the key cycles between the 3 modes. By default the key is bound to {{Keypress|Alt}} + {{Keypress|F10}}, but on some Linux distros it may need to be rebound.
Use the debug keybind to "Cycle Dialog Outline Modes" when building a GUI. It will draw outlines around your GUI element bounds, making it much easier to understand how your code is translated into the visual GUI.
 
=== Mode 0: No Outlines ===
This is the default mode when the game is started. The GUI elements are shown, but no outline rectangles are drawn.
 
=== Mode 1: Element and Composer Outlines ===
In addition to the mode 2 rectangles around GuiElements (explained below), bold white rectangles are drawn around GuiComposers.
 
=== Mode 2: Element Outlines ===
The bounding boxes of GuiElements are drawn as rectangles. The rectangle color is determined by the possibly overridden implementation of [https://apidocs.vintagestory.at/api/Vintagestory.API.Client.GuiElement.html#Vintagestory_API_Client_GuiElement_OutlineColor GuiElement.OutlineColor], which returns a color in [https://github.com/anegostudios/vsapi/blob/9bf26b71970ff2168d6f8534cf6ee4a914087511/Math/ColorUtil.cs#L505 0xAARRGGBB format].
 
{| class="wikitable"
|-
! Class
! Color
|-
| GuiElementHoverText || yellow - 0x80FFFF00
|-
| GuiElementItemSlotGridBase || bold green - 0xFF00FF00
|-
| GuiElementClip || bold red - 0xFFFF0000
|-
| GuiElement || white - 0x80FFFFFF
|}


== GUI Base Classes == <!--T:4-->
== GUI Base Classes == <!--T:4-->