Lumberyard
User Guide (Version 1.15)

Using the UI Editor

You can use the UI Editor to create, customize, and animate various game user interface elements and components such as menus, buttons, and heads-up displays (HUDs).

The UI Editor consists of the following:

  1. Toolbar – Commonly used tools and settings

  2. Hierarchy pane – List of UI elements that you create

  3. UI canvas tab bar – Tabbed display of open canvases

  4. Viewport – Display of the UI elements on the current UI canvas

  5. Properties pane – Component properties for the selected element

  6. Animation Editor – Tool for animating UI elements

Note

You can tear away and redock the Hierarchy pane, Properties pane, Animation Editor, and sections of the toolbar to customize the UI Editor.

To open the UI Editor

  • In Lumberyard Editor, choose Tools, UI Editor.

Using the Sprite Editor

The Sprite Editor configures the following sprite configurations:

You open the Sprite Editor from the Image component's properties.

To open the Sprite Editor

  1. Open the UI Editor as explained in the preceding section.

  2. Configure the Sprite path property.

  3. To the right of the Sprite path setting, click the arrow (open-in) icon.


                To open the Sprite Editor, click the arrow button next to Sprite
                    path

The Sprite Editor has the following features:


                Sprite Editor UI
  • Sprite viewport – Displays sprite image.

  • Border manipulators – Sets border properties for sliced image types. To adjust the borders, drag the dotted lines, which are called manipulator positions. Changing these positions updates the corresponding Border Properties values.

  • Properties

    • Image resolution – Size of the image.

    • Alias – A short description of what the cell represents. Use this setting to improve the readability of sprite-sheet index values. You can use the same alias string for multiple sprite sheet cells.

    • Top, Bottom, Left, Right – Number of pixels from the respective edge of the image in which the sliced region is situated.

  • Configure Spritesheet – Available only for sprites that are not currently configured as a sprite sheet. For more information, see Configuring Sprite Sheets.

Understanding the Sliced Image Type

Lumberyard uses slice resizing to resize certain images intelligently. For example, using regular resizing to widen the following image results in distortion of the corners and edges.


                    Image with corner detail

                    Scaled without slice scaling

Slice resizing divides an image into nine sections that scale in such a way as to preserve border and corner details. This technique avoids the distortion that occurs with typical image scaling.

Each area is resized as follows:

  • The center is resized both horizontally and vertically.

  • The corners aren't resized at all.

  • The top and bottom edges are resized horizontally only.

  • The right and left edges are resized vertically only.

Slice resizing is useful for images with borders and corner details, such as buttons with rounded corners.


                    Scaling of each section in slice scaling

                    Scaled with slice scaling

Using the Sprite Editor, you can manipulate where the sections are by dragging the dotted lines on the preview image.

Tip

You can see your changes in real time, as shown in the following image. To view real-time changes as you make them, before you open the Sprite Editor, change the Image component's ImageType property to Sliced.


                    Select Sliced as your ImageType

                    Preview your sliced image

Configuring Sprite Sheets

You can configure an image as a sprite sheet.

A sprite sheet is a collection of separate images—such as icons, buttons, and other UI assets—that are stored in a single image. Although you can keep all of your images in separate files, using a sprite sheet has several benefits:

  • Faster performance – For that collection of assets, Lumberyard can load just one image from disk instead of many separate images. Loading multiple images requires many hard drive seeks and is performance-expensive.

  • Workflow improvements – When your animation contains multiple frames, for example, it's easier to manage just one image that contains all of the animation frames rather than separate files. This makes editing and other workflows easier.

    Other workflow improvements include easier management of your assets. For example, you could have one image called mainmenu_ui_assets_spritesheet.png that contains all of your buttons rather than a series of files such as mainmenu_button1.png, mainmenu_button2.png, and so on.

For example, the following image contains 12 walking images in a single row.


                    Walking images

In the following procedure, you can divide the image into 12 columns when configuring the sprite sheet. You can then select the piece of the image that you want to display for your Image component.

To configure an image as a sprite sheet

  1. In the Sprite Editor window, click Configure Spritesheet in the lower left corner.

    The Configure Spritesheet view displays two new sections, Configure Spritesheet and Select cell.

    
                            Configure Spritesheet and Select cell
  2. Enter the number of rows and columns. The foregoing walking images example has 12 columns and 1 row. These values divide the sprite into a uniform grid and assume that each cell of the sprite sheet is of the same (uniform) size.

  3. In the Select cell section, click a cell to select it and display its properties.

  4. To configure individual cells with slices scaling, drag the dotted lines to the preferred positions. The Top, Bottom, Left, and Right properties are updated automatically to reflect the current positions.

    For more information about slice scaling, see Understanding the Sliced Image Type.

  5. Click Save to save your changes and close the Sprite Editor. Or, click Cancel to revert your changes and close the Sprite Editor.

  6. To select the specific cell of the sprite sheet that you want to use, in the Image component properties, select the appropriate Index number.

    The Sprite Editor assigns index numbers in the rows and columns of the sprite sheet, from left to right and then top to bottom, starting with 0 (zero).

    If you defined an Alias in the Sprite Editor properties, that also appears next to the index numbers.

    
                            Select Index number of sprite sheet

    The cell that you selected is displayed in the UI Editor viewport.

On this page: