Touch Interface Layout

WHAT IS IT? #

A Touch Interface Layout (UObject) is a class used to define the layout of your touch interface. What is its active and inactive opacity? What components make up the touch interface? What type of component? How does the user interact with these components?

In editor, this class is edited by the Touch Interface Layout Editor. At runtime, it is used by the STouchInterfaceRuntime slate widget. The Touch Interface Layout class also contains all the functions needed to access components, add or delete components, show or hide components, etc.

To modify this asset in the editor, I invite you to visit the category dedicated to the editor.

OPACITY FADE #

The touch interface (STouchInterfaceRuntime) has a feature that gradually dims components when there is no further user interaction. This indicates to the user that the touch interface is inactive. Sufficient dimming can save battery power, especially if your touch interface includes very bright or colorful elements.

To enable the fade, simply activate the Fade option in the Touch Interface Layout details panel when editing this asset in the editor. You can specify the opacity level for the active (Active Opacity) and inactive states (Inactive Opacity) and adjust the transition speed between the active and inactive states (Inactive Lerp Rate).

RESET, RECENTER & DELAY #

Time Until Deactivated

Related to the Fade feature, you can specify the delay before the touch interface begins to dim (Time Until Deactivated).

Time Until Reset

The touch interface has a feature that recenters components whose position has been changed following user interaction. To activate this feature, you must specify a delay before recentering (Time Until Reset). If the value is 0, this feature is disabled, and the components retain their last modified position.

Activation Delay

When the touch interface is added to the player’s screen, you can specify a delay before the touch interface intercepts inputs. This can be useful if you have animations on launch on your touch interface.

Startup Delay

The launch delay is primarily used for technical reasons. When the touch interface is created, you can set the delay before the components are drawn. By default, the value is set to 0.016, this allows low-power devices to build the touch interface geometry before using that geometry to draw the components.

EFFECT & OPTIMIZATION #

The touch interface encapsulates the canvas in a retainer widget. This widget allows for optimization of the rendering and, at the same time, effects using a material.

To add an effect to the touch interface, you must use a material with the User Interface domain type and choose the blend mode. Except in very specific cases, you will need a blend mode that supports transparency, such as Masking, Translucent, Additive, etc. Then you will need to add a texture sample with the name defined in your touch interface settings.

Technically, what happens? The touch interface is rendered in a render target, which is then used and modified by the material. This material is then rendered.

The optimization comes from how the retainer widget works. You can define when the touch interface should be rendered. Every frame, every two frames, when an invalidation has been requested, etc.

For more information, I encourage you to check out the Retainer Decorator, which works in the same way.

VISIBILITY #

You might need to display a menu and hide the touch interface to avoid user confusion and unwanted movements or actions. You can show or hide the touch interface using the Show Layout or Hide Layout nodes. You can check if the interface is visible using Is Visible. Also, from the Touch Interface Subsystem, you can register a function for the On Visibility State Changed event.

COMPONENT OPERATION #

One of the unique features of Touch Interface Designer is the ability to modify the touch interface at runtime as desired. You can add, modify, or delete layout components of the touch interface simply by using the corresponding node.

Get Component

To access a touch interface component, you must use a node like Get Component By Name. Important! Do not try to retrieve a component from the Touch Interface Layout asset (the one in the content browser), but rather from the instance returned by the Add Touch Interface node. Why? Because the asset is duplicated when you add a touch interface so that you can apply changes without affecting the Touch Interface Layout asset in the content browser, which you modify with the editor.

Add New Component

To add a component to the touch interface, use the Add Touch Input node (renamed Add Layout Component in a future update). Define the name, position, size, and logic class that will determine the component’s behavior.

Be careful! if the name isn’t specified, the engine will generate one, but this can cause problems. Also, if the name already exists in the layout, it can cause a malfunction or a crash. Security features will be added in a future update.

Once the component is added, you can add decorators to it or modify the logic via the instances that are returned by this function.

Remove Component

Removing a component from the touch interface is very simple. Use the Remove Component node.

Show or Hide Component

To show or hide a component, use the Show Component or Hide Component node and specify the name of the component to show or hide. Hiding a component disables user interactions on that component.