Modding:GUIs: Difference between revisions

From Vintage Story Wiki

Modding:GUIs (view source)

Revision as of 13:02, 31 December 2023

1,668 bytes added ,  4 months ago
More accurately describe the ElementBounds fields
(Move existing examples to the end of the page)
(More accurately describe the ElementBounds fields)
Line 1: Line 1:
{{GameVersion|1.15}}
{{GameVersion|1.19.0}}


{{#css:
{{#css:
Line 61: Line 61:
<!--T:10-->
<!--T:10-->
For any other uses, inerhit from the general purpose class <code>GuiDialog</code>, from which HudElement and GuiDialogBlockEntity also inherit from. You can override <code>ToggleKeyCombinationCode</code> to something like "yourAweseomeHotkeyCode" and use <code>capi.Input.RegisterHotKey</code> + <code>capi.Input.SetHotKeyHandler</code> to have your own keyboard key mapped to opening/closing your GUI (example: [https://github.com/anegostudios/vsessentialsmod/blob/master/Systems/WorldMap/WorldMapManager.cs#L105 World Map])
For any other uses, inerhit from the general purpose class <code>GuiDialog</code>, from which HudElement and GuiDialogBlockEntity also inherit from. You can override <code>ToggleKeyCombinationCode</code> to something like "yourAweseomeHotkeyCode" and use <code>capi.Input.RegisterHotKey</code> + <code>capi.Input.SetHotKeyHandler</code> to have your own keyboard key mapped to opening/closing your GUI (example: [https://github.com/anegostudios/vsessentialsmod/blob/master/Systems/WorldMap/WorldMapManager.cs#L105 World Map])
== ElementBounds ==
An ElementBounds instance describes the several bounding boxes and offsets of a GuiElement, which are summarized in the diagram below. For fixed alignments, (fixedX, fixedY) is the vector from the top-left corner of the parent element's content box to the top-left corner of the child element's offset point. For auto alignments, (marginX, marginY) is used instead (technically (absMarginX, absMarginY)). After that comes another offset vector called (fixedOffsetX, fixedOffsetY) which points to the top left corner of the child padding box. Inside of the padding box is the content box. The inner width/height only contains the content. The outer width/height contains the content and padding.
[[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 should be set either directly or with helper methods.
<!--T:15-->
{| class="wikitable"
|-
! Fields
! Primary setters
! Purpose
|-
| fixedX/fixedY
|
* WithFixedPosition
* BelowCopy
* RightCopy
* FixedUnder
* FixedRightOf
* FixedLeftOf
* WithFixedOffset
* Fixed
| The offset of the child padding top-left corner relative to the parent content top-left corner. These are the main fields used to place GUI elements. These fields should only be set if the corresponding x/y dimension has a fixed sizing and alignment mode.
|-
| fixedWidth/fixedHeight
|
* WithFixedSize
* WithFixedWidth
* WithFixedHeight
* Fixed
| The size of the element content. These fields should only be used when the corresponding dimension is in the ElementSizing.Fixed or ElementSizing.PercentualSubstractFixed mode.
|-
| fixedPaddingX/fixedPaddingY
|
* WithFixedPadding
| The amount of empty space to put around the element
|-
| fixedMarginX/fixedMarginY
|
* WithFixedMargin
| These fields are never read by Vanilla VS. The corresponding absMarginX/absMarginY are internally calculated based on the alignment mode, but those calculations ignore fixedMarginX/fixedMarginY.
|-
| ParentBounds/ChildBounds
|
* WithChild
* ForkContainingChild
| Tracks the parent/child relation between elements
|-
| Alignment
|
* WithAlignment
* FixedPos
* Fixed
* Percentual
| The alignment of the element. If set to <code>None</code> the FixedX/Y Position is used. For any other value, the FixedX/Y values break the layout. For example when you used <code>RightTop</code> the element will always be at the right top most corner of its parent bounds. If you use <code>RightFixed</code> the element will be right aligned, but its Y-Position is determined by <code>FixedY</code>
|-
| horizontalSizing/verticalSizing
|
* WithSizing
| The sizing method to be used, can be either <code>Fixed</code> (default), <code>Percentual</code> or <code>FitToChildren</code>
|}


== GUI Basics == <!--T:11-->
== GUI Basics == <!--T:11-->
Line 72: Line 137:
=== ElementBounds=== <!--T:14-->
=== ElementBounds=== <!--T:14-->


<!--T:15-->
* <code>FixedX</code>/<code>FixedY</code>: The absolute position where the element should be placed
* <code>FixedWidth</code>/<code>FixedHeight</code>: The absolute width and height of the element
* <code>FixedPaddingX</code>/<code>FixedPaddingY</code>: The absolute inner padding of the element
* <code>FixedMarginX</code>/<code>FixedMarginY</code>: The absolute outer padding of the element
* <code>ParentBounds</code>: The parent boundaries, in which this element resides in
* <code>ChildBounds</code>: The child boundaries this element contains
* <code>Alignment</code>: The alignment of the element. If set to <code>None</code> the FixedX/Y Position is used. For any other value the FixedX/Y values are ignored. For example when you used <code>RightTop</code> the element will always be at the right top most corner of its parent bounds. If you use <code>RightFixed</code> the element will be right aligned, but its Y-Position is determined by <code>FixedY</code>
* <code>HorizontalSizing</code>/<code>VerticalSizing</code>: The sizing method to be used, can be either <code>Fixed</code> (default), <code>Percentual</code> or <code>FitToChildren</code>


===GuiComposer=== <!--T:16-->
===GuiComposer=== <!--T:16-->
Bluelightning32
Confirmedusers
261

edits

Retrieved from "https://wiki.vintagestory.at/index.php/Special:MobileDiff/153288"