Lumberyard UI 2.0 Developer Documentation - Lumberyard User Guide

Lumberyard UI 2.0 Developer Documentation

Introduced with Amazon Lumberyard version 1.25, UI 2.0 is the user interface framework used by Lumberyard's editors and tools. It uses the C++ Qt UI library and can be extended to support your own customizations and modifications.

What is Lumberyard UI 2.0?

UI 2.0 is designed to enable easy-to-use workflows and help your game designers and developers translate their ideas into quick simulations. When developing the new LumberyardUI, we focused on these four tenets:

  • Efficiency

  • Accessibility

  • Familiarity

  • Modularity

To achieve this, we provided a complete set of Qt-based user interface building blocks so that you can create tools to fit your own needs, while still employing a coherent and standardized UI experience throughout the Lumberyard Editor.

When creating tools, developers have access to the controls that we're now using throughout Lumberyard, which includes the following elements:

  • Breadcrumbs

  • Browse edit (input field with button)

  • Button

  • Card

  • Check box / toggle switch

  • Color picker and color label

  • Combo box

  • Filtered search widget

  • Gradient slider

  • Hyperlinks

  • Line edit

  • Menu

  • Progress indicators

  • Radio buttons

  • Reflected property editor

  • Scrollbar

  • Segment control

  • Slider

  • Sliders with combo box

  • Spin-box (Line edit with drag support)

  • Vector input spin-box

  • Splitter

  • Styled dock widget

  • Tabs

  • Table view

  • Toolbar

  • Tree view

  • Typography

UI 2.0 overview

With Lumberyard 1.25 and later versions, developers can use Lumberyard’s custom Qt widget library to create their own developer tools and modify existing tools to blend into the user experience of the rest of the Lumberyard Editor. We have provided a set of styles and user interaction patterns that are applied on top of the Qt framework, which is the C++ based library Lumberyard relies on for its UI. For more information about how UI 2.0 works and UI component development, see the Amazon Lumberyard UI Extensions Guide

Review the UI 2.0 components

Before you begin, make sure that you have Lumberyard 1.25 or later installed on your machine.

To review the UI components

  1. Open File Explorer and go to your build directory. (For example, C:\{your-lumberyard-installation-path}\{version}\dev\Bin64vc141\ or Bin64vc142\.)

  2. Double-click on AmazonQtControlGallery.exe to open the UI 2.0 Qt Control Gallery app.

  3. Use the main dropdown menu to navigate through the pages. For each component, the right column shows a live example of how the widget will look and work inside the Lumberyard Editor or for your tool. The left column displays the code used to produce that result.

    Note

    The Gallery does not cover how to set up a window for your tool, or the basics of how the Qt library works. Its primary objective is to illustrate the attributes of the Lumberyard Component Gallery.