Skip to content

User Interface

Elizabeth Sherrock edited this page Jun 17, 2019 · 13 revisions

For the user interface there's a JSON file: data/resources/data/UILayout.json

Each object represents a group of UI elements. A group consists of JSON objects that represent UI elements and can have one group for optional settings, which must be placed at the beginning.

UI Elements

The attributes:

Type = std::string

The type of the UI element that should be defined here. See list below.

Action = std::string

The action which the button should perform. see list below.

Position_x = int
Position_y = int

Position, where the element should be placed

TooltipText = std::string

Tooltip that should be shown when hovering over this UI element.

ToggleButton = bool

Make this button a toggle button. Default = false

Layout = std::string

Not implemented yet! Where the element should be placed. See list below

ParentOfGroup = std::string

If this attribute is set, the button toggles the visibility of the group defined here. Use the name of the JSON Group.

Specific elements for following UI elements ImageButton

SpriteID = int

Sprite ID for the UI Element to draw. "TooltipText": "Construction", "Type": "ImageButton"

Specific, mandatory elements for following UI elements TextButton

Height = int
Width = int

Size of the UI element

Specific, mandatory elements for following UI elements TextButton, Text

Text = std::string Text that should be displayed for this UI element

List of available UI Elements

Button

A button with an image.

Example: { "Action": "RaiseTerrain", "GroupID": 0, "Layout": "BottomMenu", "ParentOfGroup": 1, "Position_x": 400, "Position_y": 520, "SpriteID": 0, "TooltipText": "Construction", "Type": "ImageButton" }

TextButton

A Button with text. A rectangular button shape is drawn for that element automatically.

Example: { "Action": "QuitGame", "GroupID": 2, "Height": 40, "ParentOfGroup": 0, "Position_x": 300, "Position_y": 300, "Text": "Quit Game", "Type": "TextButton", "Width": 200 }

Text

Simple Textfield

{ "GroupID": 0, "Position_x": 20, "Position_y": 20, "Text": "Awesome Text", "Type": "Text" },

Frame

A Frame that can be used as a background for a menu

Example: { "GroupID": 2, "Height": 400, "Position_x": 250, "Position_y": 100, "Type": "Frame", "Width": 300 },

Example: { "GroupID": 0, "Position_x": 20, "Position_y": 20, "Text": "Awesome Text", "Type": "Text" }

List of available Actions

Action (std::string) Description
QuitGame Quits the Game
LowerTerrain Toggle Terrain Edit Mode (lower terrain)
RaiseTerrain Toggle Terrain Edit Mode (raise terrain)

List of available Layout modes (not yet implemented!)

BottomMenuExpansionGroup - Expandable object of the bottom bar

List of available UI Elements

  • ImageButton
  • TextButton
  • Text