Confirmedusers
261
edits
Modding:GUIs: Difference between revisions
From Vintage Story Wiki
→Dialog Outline Modes: Add mode 2 screenshot and show both pixelated
(→Mode 1: Element and Composer Outlines: add screenshot) |
(→Dialog Outline Modes: Add mode 2 screenshot and show both pixelated) |
||
| Line 8: | Line 8: | ||
== Dialog Outline Modes == | == Dialog Outline Modes == | ||
{{#css: | |||
img.pixelated { | |||
image-rendering: pixelated; | |||
} | |||
}} | |||
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. | 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. | ||
| Line 16: | Line 22: | ||
In addition to the mode 2 rectangles around GuiElements (explained below), bold white rectangles are drawn around GuiComposers. | In addition to the mode 2 rectangles around GuiElements (explained below), bold white rectangles are drawn around GuiComposers. | ||
[[File:Settings-controls tab-mode 1.png| | [[File:Settings-controls tab-mode 1.png|class=pixelated|Controls dialog in outline mode 1<br>The outer, bold white rectangle is from a GuiComposer.]] | ||
=== Mode 2: Element Outlines === | === 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]. | 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]. | ||
[[File:Settings-controls tab-mode 2.png|class=pixelated|Controls dialog in outline mode 2]] | |||
{| class="wikitable" | {| class="wikitable" | ||
