User Interface

1. Introduction

Castle Game Engine features a number of user interface (2D) controls. You can build a complete user interface in the CGE editor, you can also build and modify the whole UI using our Pascal API. Our UI controls have parents, anchoring, UI scaling. If you set the anchors right, our UI will "just work" at various screen resolutions, aspect ratios and platforms, and can seamlessly adjust to any desktop or mobile screen.

As an example, take a look at this design that is used for our inspector (see the Inspector invoked by F8 movie). Coupled with the right code, this design implements a non-trivial UI with toggable panels, scrollable list box, minimal scrollable object inspector, custom-drawn profiler and more.

Inspector UI Inspector visible at runtime

2. Usage

The basic usage of UI controls inside the CGE editor is explained in the chapter Designing user interface and handling events (press, update) within the state. It shows how to use TCastleImageControl — but the workflow shown there applies to all other UI controls too. It comes down to:

  • Using "Add User Interface" menu item in the CGE editor to choose a component. It will be added to the state. It’s usually most comfortable to use "Add User Interface" by right-clicking on the parent component in the editor hierarchy.

  • After adding, you want to adjust basic component properties, like Name, position and size.

  • To access the component from code, you add to your state Start method a line like MyLabel := DesignedComponent('MyLabel') as TCastleLabel and at any other place you can modify this component, like MyLabel.Caption := 'something'.

3. Available user interface controls

In general, all the descendants of TCastleUserInterface defined in the engine are UI controls. This page lists the most important ones.

See the component_gallery demo for a showcase of our most important components. You can run that example and explore its UI designs in CGE editor.

3.1. Empty Rectangle (base TCastleUserInterface)

TCastleUserInterface is a base UI class. It is an ancestor of all other UI classes, and as such implements common features like anchors and borders. It can be used directly too — will serve as a good parent, to organize a number of children controls or surround them with a visual frame.

Empty rectangles

3.2. Color Rectangles

TCastleRectangleControl is a rectangle filled with simple RGBA color. Its most important property is TCastleRectangleControl.Color.

Color rectangles

3.3. Label

TCastleLabel is the simplest way to display text in our engine. Its most important property is TCastleLabel.Caption (or, if you want access the multi-line string list, TCastleLabel.Text).

Labels

3.4. Image

TCastleImageControl displays an image. It can be scaled, preserving the aspect ratio or ignoring the aspect ratio, if needed. Its most important property is TCastleImageControl.URL.

Images

Note
Drag-and-drop image from the "Files" panel (at the bottom) over a UI design to create a TCastleImageControl component easily.

3.5. Button

TCastleButton is a clickable UI element. The look can be incredibly customized to match the style of your game. Its most important properties are TCastleButton.Caption and (assign here your event, in code) TCastleButton.OnClick.

Buttons Buttons

3.6. Checkbox

TCastleCheckbox allows user to check/uncheck a checkbox, to make a Boolean choice. Its most important properties are TCastleCheckbox.Caption and (assign here your event, in code) TCastleCheckbox.Checked.

Checkboxes

3.7. Edit (text, integer, float)

TCastleEdit allows to edit a single-line text. Its most important property is TCastleEdit.Text.

It has simple descendants TCastleIntegerEdit and TCastleFloatEdit to edit numbers. Their most important properties are, respectively, TCastleIntegerEdit.Value and TCastleFloatEdit.Value.

Edit fields

3.8. Group (horizontal, vertical)

TCastleHorizontalGroup and TCastleVerticalGroup automatically layout their controls in a horizontal and vertical fashion.

Groups

3.9. Scroll view

TCastleScrollView allows to scroll a large (tall) area with a vertical scrollbar. Its most important property is TCastleScrollView.ScrollArea, this is where you should add children that should scroll.

Scroll View

3.10. Shape

TCastleShape displays since shapes, like circles and triangles.

Shape

3.11. Design (refer to another UI design)

TCastleDesign inserts a UI design from another xxx.castle-user-interface file. This allows to reuse the same UI design multiple times. Editing the original xxx.castle-user-interface will update all instances where this design is used.

Design (refer to another UI design)

Note
Drag-and-drop xxx.castle-user-interface from the "Files" panel (at the bottom) over a UI design to create a TCastleDesign component easily.

To improve this documentation just edit the source of this page in AsciiDoctor (simple wiki-like syntax) and create a pull request to Castle Game Engine WWW (cge-www) repository.