UI Style Editor User Guide

Document Summary: Guide to using the UnrealUI^? Style Editor suite for working with UI Styles.

Created by Maury Mountain. Maintained by Richard Nalezynski.

Introduction

This document describes how to use the major features of the Unreal UI Style Editor.

Using styles in your UI scenes will save you a lot of time and effort when customizing your User Interfaces, and allow you to have a centralized area for the visual look of your UI. Styles function similarly to Cascading Style Sheets (CSS) in web development, by allowing you to set up predefined looks and properties that text, and images will follow throughout your UI. Similar to CSS, if you change the properties of a specific style, it will update across all widgets it is currently assigned to.

Using the Style Editor

Creating a Style

When creating a style you can create one of three types, give them Friendly Names and a Unique Tag, group it for organization and easy assignment within the UI Editor, establish which UI states the style will use, configure its properties, and be able to preview the results of the style in the Style Editor.

Style Editor Overview

Editor Layout

This is the Style Editor window.

Working with Styles

Types of Styles

Text Style

A style type that only accepts a font type. The style will find all fonts currently in packages and allow you to assign them to the style.

Image Style

Accepts image and material input, for assigning to image widgets, and image elements of widgets.

Combo Styles

The full-encompassing style; allows you to set up a font, and image style within one style. When setting up the font and image properties of the Combo Style, you can either define a previously created Text or Image Style to be used. Alternatively, you can customize it and set up the style based on your needs.

Style Naming and Grouping

Friendly Name

The friendly name field will be the name that appears in the Skin Editor^?, and what you select when assigning styles to widgets. It does accept spaces and special characters, and is there to be an easy way to identify and differentiate styles from one another.

Unique Tag

This name must be unique from all other styles. It can be the same as the friendly name, however it cannot have spaces or special characters in it. This tag is what will be referenced in code if the need arises.

Group Name

You can group your styles together into similar custom groups for organization. In the Skin Editor, navigate to the Group Tab, Right Click and create a new group with a unique name. The group names will then show up in the drop down menu within the Style Editor. As you assign styles to widgets, you will notice the contextual menu will have the group name in brackets ([groupname]), and all styles within that group in the sub menu.

Style Properties

Each of the three types of styles share similar properties. There are specific properties for images and text, and within the combo style the same properties appear there. One very important nature of the style properties is that each state has its own independent properties. If you have Active, Disabled, Enabled, Focused, and Pressed states active (checked), you will need to shift-select all states and change the properties if you mean for them to affect all states. Otherwise, you are can set up each individual state to have its own look and feel.

Text Options

Font: Select from the currently loaded fonts in your game. Fonts show up as the Package.Group.Name where they are found in the editor.

Style Color: Opens color wheel to assign a color to that state

Alpha Value: set the alpha of the state, from 0-300. If you have post process in the UI turned on, any value +100 will make the font “glow.”

Clipping Mode: Set the clipping mode for the font

Overdraw: Strings that reach the end of a widgets bounds will continue outside the bounds until the string ends.

Clipped: Will clip the end of a string based on the size of the widget.

Ellipse: Adds “…” to the end of a string if it reaches the bounds of the widget

Wrapped: Each line of text will have a line break if the string reaches the edges of the widget

Clipping Alignment: Align to the left/top, center, or right/bottom for clipping.

Alignment H/V: Set the default text alignment for the style on the horizontal and vertical axis

Scale to fit: Settings that will dynamically scale the strings if desired. Minimum scale is used to tell the style to not scale the fonts below a specific value.

Scale X/Y: enter a value between 0-1, can be scaled non-uniformly

Spacing Chars/Lines: Specify a pixel kerning and line height value for the style. Accepts sub-pixel values.

Padding H/V: Will add the input value pixels on all sides of the string. H will add to the beginning and end of the string, V will add to the top and bottom lines.

Image Options

Color/Alpha: Set the color of the image assigned to the style. Note: while using materials in Image styles, color/alpha must be applied in the material itself, not in the style.

Default Texture: assign a texture or material to this field using the green arrow.

Image Alignment: left, center, right alignment of the image inside the widget.

Adjustment Type: sets how the image will scale within the widget when drawn on the UI scene.

Clipped: will clip to the boundaries of the widget

Scaled: Will scale based on the size of the widget, the widget defines the shape and look of the image

Uniformly Scaled:

Bound:

Stretched: Will ‘stretch’ the center pixels of the texture, and maintain the top L,R and Bottom L, R corners of the image based on its original resolution.

Sample Position/Size: Allows you to apply custom UV coordinates to the texture, and or single out a specific area of the texture.

List styles

UI lists use styles, but a list itself will have 4 different styles required to make the list states function.

The UI List widget itself has 5 states, Active, Disabled, Enabled, Focused, and Pressed. Within the UI List, the cells themselves have their own styles. Each cell will need to have a Normal, Mouse Over, Selected, and active style. Within these 4 styles, the states represent what the UI List’s current state. In other words, a Focused list (one you are currently scrolling through) will use the Focused state of the Normal, Selected, Mouse Over, and Active cell styles.

When setting up List Styles, it is a good idea to create a base style, then create the cell styles using the main style as a template, so you can make sweeping changes to all the styles that doesn’t necessarily involve specific state colors.

Tips and Tricks

When creating styles, you can create them using another style as a template. This will allow you to make wide changes to a specific set of styles if the need arises. For example, if you needed to globally increase the size of your fonts, and all of those styles used a base style for that specific font, you would only need to change it once, and the property propogates across all other styles that use it as a template.

Materials and Material Instances may be used in image styles, and you can have a material per style state. Any and all animation included in the material will draw in the UI. Color and Alpha values will not function with a Material assigned to the style, these must be set up in the material / material instance itself.

You are able to override a style within the UI editor for a specific widget. These overrides will completely replace all state properties of the style, but are an easy way to align text. There is no easy way to globally change overrides however, so if you set all the scale types via overrides, you will need to adjust all widgets’ override settings.

Name you styles carefully, renaming and deleting styles while they are in use can be troublesome. Being specific with your naming will also ensure you do not create too many duplicate styles throughout the skin.