Confirmedusers
261
edits
Modding:GUIs: Difference between revisions
From Vintage Story Wiki
Describe the limitations of the layout algorithm
(More accurately describe the ElementBounds fields) |
(Describe the limitations of the layout algorithm) |
||
| Line 126: | Line 126: | ||
| The sizing method to be used, can be either <code>Fixed</code> (default), <code>Percentual</code> or <code>FitToChildren</code> | | The sizing method to be used, can be either <code>Fixed</code> (default), <code>Percentual</code> or <code>FitToChildren</code> | ||
|} | |} | ||
== Layout == | |||
Compared to the CSS flow layout algorithm, the GuiComposer layout algorithm is very primitive. | |||
=== Alignment === | |||
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: | |||
1. Use different edges or corners for the two pieces of text. | |||
2. Use <code>.WithFixedAlignmentOffset(0, -10)</code> to move one of the children up 10 pixels (relative to the bottom alignment in this example). | |||
3. 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. | |||
=== Sizing === | |||
`ElementSizing.FitToChildren` 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 more or less sizing the parent to fit its largest child. | |||
== GUI Basics == <!--T:11--> | == GUI Basics == <!--T:11--> | ||
