GUI Editor (BETA)

Starting from S2Engine HD 1.4.6 there is a new tool for editing GUI, now in BETA version.
To open GUI editor click on Tools->GUIEditor on the main menu as showed into the following image:

GUI Object

GUI is created by a special type of object called GUI, also GUIObject.

Note

Before working on your GUI you must first create a GUIObject.

GUIObject is an object containing a MainFrame (also known as HUD) widget.
It has the following parameters:

• name Name of the object
• guiScript Filename of the script resource the GUI uses
• showCursor True if GUI must show the mouse cursor
• fsm The Game Machine resource applied to the GUI object
• cursorTexture Filename of the texture resource to apply to GUI cursor
• cursorWidth Width of GUI cursor
• cursorHeight Height of GUI cursor
• texname Filename of the GUI background texture resource

See also

HUD for more info about how to script a GUIObject.

Note

In theory you could be able to create only the GUIObject and than link it a script that creates all the GUI and its logic without using GUI editor or GameMachine at all.

To Create a GUIObject:

1. Open the class tool
2. Press Create button
3. Choose GUI class in the class list of the Create object box
4. Drag And Drop the Gui list item into the scene as showed into the following image
   

Widget Objects

Once you have created the GuiObject you can edit your GUI. Open the GUI Viewport (see viewports). In the Widgets panel click on Add Widget button to add a new widget:

The widget will be void but selected. Selected widgets have an orange border that point out them.

You can set widgets parameters in the Params Class box as showed in the up image.
Widget parameters you can set in the class params box are following:

• name Name of the widget
• widgetScript Script for widget logic
• widgetClass Class widget must belong to (default is button)
• text text of the widget. For example label text
• X X coordinate of the widget in screen space
• Y Y coordinate of the widget in screen space
• width width of the widget
• height height of the widget
• font Font resource filename this widget must use
• texname Filename of Texture resource used for widget background
• litTexname Filename of Texture resource used when mouse over
• grayedTexname Filename of Texture resource used when widget is grayed
• textAlign Text align: -1 left, 0 - center, 1 - right
• verticalAlign Vertical alignment of the widget respect to the parent widget. -1 top, 0 - center, 1 - bottom, 2 - none
• horizontalAlign Horizontal alignment of the widget respect to the parent widget. -1 left, 0 - center, 1 - right, 2 - none
• textColor Color of the widget text
• litTextColor Color of the widget text when mouse over
• grayedTextColor Color of the widget text when grayed
• parent Parent widget reference. If none the parent is assumed to be the main GUI widget.
• TextSizeX Horizontal size of widget text characters
• TextSizeY Vertical size of widget text characters
• TextSpace Space, in pixels, between characters of widget text
• borderColor Color of widget border if exists
• border True if widget has border, false otherwise
• textureColor Color to be multiplied by the widget background texture
• Opacity Opacity of the widget
• fadeSpeed Speed widget must fade in when created
• clickTexname Filename of the texture resource widget shows when clicked (works if widget is button like)
• clickTextColor Color to be multiplied by the texture widget shows when clicked (works if widget is button like)
• startHided True if widget must start hided

Warning

the widgetClass parameter is very important if you want your widget to be different from button. When you must choose the class S2Engine make you see all the classes available for all types of object, you are able to choose only those valid for widgets.
Allowed classes are the following:

• button
• slider
• frame
• inputbox
• combobox
• label
• checkbutton
• colorbox
• image
• listbox
• groupbox
• tabbox
• rangeinputbox

See also

GUI Core Classes for more info about these GUI classes

Warning

when changing a widget parameter sometimes it haven't effect on the GUI in the GUI editor, when this happens you cam click on Apply button or UPDATE button, as showed into the following image:

Widget objects can also be scripted, you can assign them a script in the widgetScript parameter.
You can create a widget using the GUI Editor and then link to it a script that creates other child widgets.

Note

In theory you could be able to create only the GUIObject and than link it a script that creates all the GUI and its logic without using GUI editor or GameMachine at all.

To know how to script a widget you can see Widgets.

Using GameMachine with GUI