Confirmedusers
637
edits
Modding:GUIs: Difference between revisions
From Vintage Story Wiki
m
Updated navbox to new code navbox.
(→GuiElementInset: describe GuiElementStaticText) |
m (Updated navbox to new code navbox.) |
||
| (7 intermediate revisions by 2 users not shown) | |||
| Line 1: | Line 1: | ||
{{GameVersion|1.19. | {{GameVersion|1.19.3}} | ||
{{#css: | {{#css: | ||
| Line 13: | Line 13: | ||
<!--T:2--> | <!--T:2--> | ||
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. | ||
__TOC__ | |||
== Dialog Outline Modes == | == Dialog Outline Modes == | ||
| Line 68: | Line 70: | ||
[[File:Gui box model.png|box model]] | [[File:Gui box model.png|box model]] | ||
The fields in ElementBounds with the 'abs' prefix should be treated as internal fields. They are written by ElementBounds.CalcWorldBounds. However, these other fields | The fields in ElementBounds with the 'abs' prefix should be treated as internal fields. They are written by ElementBounds.CalcWorldBounds. However, these other fields may be set either directly or with helper methods. | ||
<!--T:15--> | <!--T:15--> | ||
| Line 134: | Line 136: | ||
The alignment option can automatically place a child element in any of the 4 corners or 4 edges of the parent. However, the alignment algorithm does nothing to prevent two child elements from overlapping on the same edge/corner. For example, if two text boxes were added to the bottom edge of a dialog, then the two pieces of text would overlap. There are a few options to fix the conflict: | The alignment option can automatically place a child element in any of the 4 corners or 4 edges of the parent. However, the alignment algorithm does nothing to prevent two child elements from overlapping on the same edge/corner. For example, if two text boxes were added to the bottom edge of a dialog, then the two pieces of text would overlap. There are a few options to fix the conflict: | ||
# Use different edges or corners for the two pieces of text. | |||
# Use <code>.WithFixedAlignmentOffset(0, -10)</code> to move one of the children up 10 pixels (relative to the bottom alignment in this example). | |||
# Give up on automatic alignment and used fixed alignment instead, where the child coordinates must be calculated exactly relative to the top-left corner of the parent content box. | |||
Typically one uses fixed alignment to layout the dialog. The functions <code>BelowCopy</code> and <code>RightCopy</code> help calculate the bounds next to the previous bounds. | Typically one uses fixed alignment to layout the dialog. The functions <code>BelowCopy</code> and <code>RightCopy</code> help calculate the bounds next to the previous bounds. | ||
| Line 142: | Line 144: | ||
=== Sizing === | === Sizing === | ||
<code>ElementSizing.FitToChildren</code> tells a parent to automatically size itself so that it contains the bottom-right corner of the padding box for all of its children. Note that unlike the HTML flow layout, the VS layout does not prevent the children from overlapping. So the sizing algorithm is more or less sizing the parent to fit its largest child. | |||
== GUI Basics == <!--T:11--> | == GUI Basics == <!--T:11--> | ||
| Line 183: | Line 185: | ||
====Tables/Grids/Inventory==== | ====Tables/Grids/Inventory==== | ||
* <code>.AddItemSlotGrid</code>: Create a grid displaying the contents of supplied inventory (example: [https://github.com/anegostudios/vsessentialsmod/blob/master/Gui/ | * <code>.AddItemSlotGrid</code>: Create a grid displaying the contents of supplied inventory (example: [https://github.com/anegostudios/vsessentialsmod/blob/master/Gui/GuiDialogCreatureContents.cs GuiDialogCreatureContents]) | ||
* <code>.AddSkillItemGrid</code>: Create a grid of custom elements (example: [https://github.com/anegostudios/vssurvivalmod/blob/master/Gui/GuiDialogBlockEntityRecipeSelector.cs GuiDialogBlockEntityRecipeSelector]) | * <code>.AddSkillItemGrid</code>: Create a grid of custom elements (example: [https://github.com/anegostudios/vssurvivalmod/blob/master/Gui/GuiDialogBlockEntityRecipeSelector.cs GuiDialogBlockEntityRecipeSelector]) | ||
| Line 384: | Line 386: | ||
</syntaxhighlight> | </syntaxhighlight> | ||
{{Navbox/ | {{Navbox/codemodding}} | ||
