Layout Component

SUMMARY #

The Layout Component class is the base class for all components that can be added to the Touch Interface Layout. This class is used to manipulate the slate widget, which cannot be manipulated in blueprint. For example, you can easily modify the widget’s position or size using functions exposed in blueprint.

One of the unique features of Touch Interface Designer is the ability to modify all the component of the touch interface at runtime as desired. You can change position, size, visibility, decorator, behavior of the layout component simply by using the corresponding node.

POSITION & SIZE #

Position

You can change the component’s position simply by using Set Component Location. Note that you may sometimes need to use Set Component Local Location for components that are in a group. You can also use Set Anchor Offset, which allows you to change the position and size of a non-stretched anchor and the offsets of a stretched anchor.

Size

You can change the size of the component as well as its position. Use the Set Size or Set Anchor Offset function.

VISIBILITY #

To show or hide the component, simply use Set Component Visibility.

LAYOUT MODIFIER #

Touch Interface Designer includes a UMG (Layout Modifier) ​​widget, allowing the end user to modify the position and size of touch interface components. This widget requires information such as the maximum offset for the component’s position and the minimum and maximum possible sizes.

INTERACTION #

Recenter

Because a smartphone screen is perfectly flat, there’s no texture or surface the user’s hand can grip to ensure their thumb is correctly positioned, unlike on a gamepad joystick, for example. To improve the user experience and the handling of the touch interface, it may be necessary to recenter the component the user intends to touch. That’s what the component recentering function is for.

Because a smartphone screen is perfectly flat, there’s no tactile feedback for the user’s hand to grip to ensure their thumb is correctly positioned, unlike on a gamepad joystick, for example. To improve the user experience and the usability of the touch interface, it may be necessary to recenter the component the user intends to touch. This is the purpose of the component recentering function. When the user touches a component’s hitbox, it is recentered to the position of the user’s finger. Recentering can be reset either manually or by the touch interface itself. See the article on Touch Interface Layout.

Interaction Shape & Size

You can choose between several hitbox styles. This allows you to best adapt the hitbox to the appearance of your component. You can also adjust the size of the hitbox.

Consume Input & Priority

The touch interface intercepts inputs and forwards them to the components. There is a priority and input consumption system. If components have overlapping hitboxes, the inputs can be sent to multiple components or only to the one with the highest priority. If one component consumes the input, then no other component will receive it. This allows for complex interactions, such as kicking while simultaneously moving the camera.

Enable or disable input

You can enable or disable inputs using the Enable Input or Disable Input functions.

LOGIC #

To define the component’s behavior in response to user interaction, you must specify which UComponentLogic class to use. There’s a variable called Logic in the layout component. This is where you can select the logic class to use.

UComponentLogic is instantiated automatically, so you can configure the instance in the layout component’s details panel without leaving the editor. Touch Interface Designer includes several logic classes that will cover most use cases.

The basic classes are relatively simple to configure. For most of them, you will have to specify the Input Action to use and possibly select the Decorator that will be modified (the joystick thumb for example).

For more information on this class, click here.

DECORATOR OPERATIONS #

To customize the visual appearance of the component, you will need to use decorators. These are UObject classes that allow you to manipulate slate widgets such as Retainer, Blur, Image, Flipbook, Progress Bar, etc.

The Layout Component contains all the necessary functions to modify its appearance. You can retrieve a decorator, modify it, delete it, or add a new one.

Get Decorator

You can retrieve decorations in several ways: by name, index, or class type. If necessary, you will need to cast to the correct type. There are functions that allow you to automatically cast to the type you want. In all cases, you must ensure that the pointer is valid before using it, or you risk a crash.

Add Decorator

To add a decorator, you have two available functions:

• Add Decorator By Class, which creates a decorator and adds it to the layout component.
• Add Decorator, which adds an existing decorator to the layout component. This decorator must be created using a function available in the Touch Interface Library.

Remove Decorator

To remove a decorator, use the Remove Decorator by Name or Remove Decorator At function.