Modding:GUIs: Difference between revisions
(Created page with "Creating good graphical user interfaces is a challenging task - sometimes even the largest of companies mess it up. In Vintage Story you currently need to formulate your GUIs...") |
No edit summary |
||
Line 43: | Line 43: | ||
Some explanations: | Some explanations: | ||
* <code>ElementStdBounds</code>: Contains a bunch of often used element bounds configurations. See also [[ | * <code>ElementStdBounds</code>: Contains a bunch of often used element bounds configurations. See also [[https://github.com/anegostudios/vsapi/blob/master/Client/UI/ElementStdBounds.cs|ElementStdBounds]] on github. | ||
* <code>ElementBounds.Fixed(0, 0, 300, 300)</code>: Create a new bounds instance with fixedX/Y at 0/0 and a fixed widt/height of 300/300 pixels. | * <code>ElementBounds.Fixed(0, 0, 300, 300)</code>: Create a new bounds instance with fixedX/Y at 0/0 and a fixed widt/height of 300/300 pixels. | ||
* <code>CairoFont.WhiteDetailText()</code>: Create a new font configuration based on a often used size and color, in this case white with font size 14 | * <code>CairoFont.WhiteDetailText()</code>: Create a new font configuration based on a often used size and color, in this case white with font size 14 | ||
* <code>SingleComposer</code>: This property is defined in the <code>GuiDialog</code> class. Its a getter/setter to the <code>Composers</code> dictionary. It contains all the "windows" of this dialog which are then rendered / handled by this GuiDialog instance | * <code>SingleComposer</code>: This property is defined in the <code>GuiDialog</code> class. Its a getter/setter to the <code>Composers</code> dictionary. It contains all the "windows" of this dialog which are then rendered / handled by this GuiDialog instance |
Revision as of 16:10, 12 April 2019
Creating good graphical user interfaces is a challenging task - sometimes even the largest of companies mess it up.
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.
You should encapsulate every GUI Dialog into its own class, albeit a dialog may consist of multiple windows - the vanilla character dialog for example has two - one of player gear and one for the player stats. There's a couple of helper classes to make your live a bit easier:
- To create a GUI that's bound to a block entity, inherit from
GuiDialogBlockEntity
- To create a HUD element which is not interactable, inherit from
HudElement
- For any other uses, inerhit from the general purpose class
GuiDialog
GUI Basics
In general, you can pretty much build your own GUI system if you want to, by just overriding OnRenderGUI
and render whatever you like. There's a multitude of overridable methods to handle mouse and keyboard inputs as well, see also the GuiDialog class on Github
If you want to use the vanilla GUI system, it's concept is merely a flat or hierarchical list of GUI elements placed at certain positions. The position is determined by an instance of ElementBounds
. Let's have a closer look at it's properties:
ElementBounds
FixedX
/FixedY
: The absolute position where the element should be placedFixedWidth
/FixedHeight
: The absolute width and height of the elementFixedPaddingX
/FixedPaddingY
: The absolute inner padding of the elementFixedMarginX
/FixedMarginY
: The absolute outer padding of the elementParentBounds
: The parent boundaries, in which this element resides inChildBounds
: The child boundaries this element containsAlignment
: The alignment of the element. If set toNone
the FixedX/Y Position is used. For any other value the FixedX/Y values are ignored. For example when you usedRightTop
the element will always be at the right top most corner of its parent bounds. If you useRightFixed
the element will be right aligned, but its Y-Position is determined byFixedY
GuiComposer
This is the component that builds and manages your GUI elements for you. You can create a composer via the client api: capi.Gui.CreateCompo(dialogName, bounds)
. You have to supply it with a unique identifier and the overall dialog bounds. Once you have a GUIComposer instance you can chain-add elements. Here's a small example:
// Auto-sized dialog at the center of the screen
ElementBounds dialogBounds = ElementStdBounds.AutosizedMainDialog.WithAlignment(EnumDialogArea.CenterMiddle);
// Just a simple 300x300 pixel box
ElementBounds textBounds = ElementBounds.Fixed(0,0,300,300)
SingleComposer = capi.Gui.CreateCompo("myAwesomeDialog", dialogBounds)
.AddStaticText("This is a piece of text at the center of your screen - Enjoy!", CairoFont.WhiteDetailText(), dialogBounds)
.Compose()
;
Some explanations:
ElementStdBounds
: Contains a bunch of often used element bounds configurations. See also [[1]] on github.ElementBounds.Fixed(0, 0, 300, 300)
: Create a new bounds instance with fixedX/Y at 0/0 and a fixed widt/height of 300/300 pixels.CairoFont.WhiteDetailText()
: Create a new font configuration based on a often used size and color, in this case white with font size 14SingleComposer
: This property is defined in theGuiDialog
class. Its a getter/setter to theComposers
dictionary. It contains all the "windows" of this dialog which are then rendered / handled by this GuiDialog instance