COMPONENT OPERATIONS #
Add Component
You can add a component by right clicking on root component at the very top of component tree or on empty space in component tree. For the moment, you can choose between two types of component.
- Layout Component : This is the basic component. Allows the user to interact with the touch interface.
- Layout Group Component : Allows components to be grouped together to form a group. Opens up new possibilities for interaction and interface behavior.
Then, I strongly recommend that you rename your component for better organization and if you want to modify your component later in the game. Indeed, the functions require the name of the component in order to be able to identify and modify it. The name must not contain spaces and must be unique. Keep it simple, using names like Jump, Camera, Look, Grenade, Reload, SwitchWeapon, etc.
Reorder Component & Grouping
You can rearrange your components by holding a component and dragging it up or down. A blue line appears between the components, making it easy to drop the component where you want it. You can drop a component into a group component to add it to the group. Alternatively, you can remove a component from a group by dropping it into the component tree.
Copy (CTRL+C), Cut (CTRL+X), Duplicate (CTRL+D), Paste (CTRL+V)
Rename (F2)
You can rename a component by selecting it and right clicking on its name in the component tree. A context menu appears and select rename. You can also use F2 key.
Delete (Suppr)
You can delete a component by selecting it or right clicking on its name in the component tree and select delete in context menu. A dialog box appears to obtain confirmation that you want to delete the selected components. Be careful, this operation is not reversible. Also, if you delete a group with children, all the children are deleted!
ANCHORING #
Touch Interface Designer uses a component positioning system similar to that of the UMG, but simplified. The touch interface uses a preset system that allows for quick component placement. For example, top left, bottom right, right half, etc. The anchor position has a direct influence on the placement of the component depending on the screen size. If you regularly use UMG, this behavior will be familiar to you.
APPEARANCE #
To define the appearance of a layout component, you need to add decorators that will add images, text, progress bar and other effects to the component.
Right-click on the component in the component tree and select a decorator. There are several types of decorators. The basic decorator allows you to add an image or material to the layout component. For more information on the available decorators and their effects, go to the Layout Component Decorator category.
INPUT & LOGIC #
To define the component’s behavior, you must specify the Layout Component Logic class that will be used to process the inputs. Several classes are integrated into the plugin that cover the vast majority of use cases, but you can also create your own. For more information, see the Layout Component Logic category.
Select a layout component and, in the details panel, go to the Input category. There is a property named Logic where you can select the class you want to use. For example, for a simple button, select Button Logic. Since this class is auto-instantiated, the details panel displays the class details. You can therefore easily and quickly configure the behavior of your layout component.
