Setup Touch Interface for mobile can be a slow and annoying process because Touch Interface Asset is data only (Data Asset). Touch Interface Designer is a plugin that lets you create Touch Interface Asset in your project with an visual editor. With the WYSIWYG user interface, Touch Interface Designer speeds up the process of adjusting the virtual controls for mobile.
Main Features
RUNTIME FUNCTIONS
Touch Interface Subsystem contains all the functions needed to add and modify your Touch Interface in real time (in game)
- Contain all EPIC Touch Interface features.
- Show / Hide Interface
- Show / Hide individual virtual input
- Add / Remove virtual input
- Change visual of virtual input
- Change position of virtual input
- Enable / Disable input
- Choose between three scaling mode
- Virtual Input Modifier
- Virtual Input Event
WYSIWIG VISUAL EDITOR
A custom WYSIWIG (What you see is what you get) editor allows you to easily modify the data contained in the Virtual Control Setup asset. This editor contains features that will allow you to :
- Add virtual controls and configure them
- Preview your touch interface on different devices (screen ratio)
- Manage portrait / landscape mode
- Preview the scaling of your touch interface
- and many other things…
The real-time preview is accurate and you will get the same on your smartphone.
ACCURATE AND ADVANCED PREVIEW
The editor gives you a precise, real-time preview of your touch interface. You can select the device on which to preview your touch interface and the algorithm that will scale it. Touch Interface Designer offers you three scaling algorithms:
- Design Size: the touch interface is scaled based to the design size you set.
- DPI Curve: the touch interface is scaled using the Unreal Engine DPI integrated system.
- Custom: you define how the touch interface should be scaled.
PRESET
To get started quickly, you can select one of the presets provided with Touch Interface Designer. You can also save a preset for later use.
TOUCH REGION
Touch Region is a new type of virtual control that has been added in version 3.0 of Touch Interface Designer. It allows to move the camera or the character using a part of the screen without displaying a visual. Touch Region is customizable:
- Classic mode: You can move the camera only when the user moves the finger for example
- Joystick mode: You can move a character in the same way as with a joystick for example
Other types of virtual controls will be added in future updates.
VISUAL LAYER SYSTEM
This system allows you to customize the appearance of the virtual controls as you wish. It supports :
- Any type of texture.
- User interface shaders.
- Real time modifications (in game)
VIRTUAL CONTROL EVENT
The Virtual Control Event class is a good way to extend the basic functionality of a virtual control. With a VCE applied to a virtual control, you can get :
- The name of the virtual control
- The player’s index
- The layers of the visual
- Modify the layers of the visual
- Override the following events:
- OnTouchBegin
- OnTouchMoved
- OnTouchEnded
INTERACTION SHAPE
To detect if the user is interacting with a virtual control, a calculation is performed based on the position of the user’s finger. You can define the shape used for this calculation:
- A square
- A circle
AUTO MOVE & DRAG TO SPRINT
Auto Move is a feature that allows the user to trigger the automatic movement of the character or something else, it’s up to you!
Drag to Sprint is a feature that allows the user to trigger the character to sprint based on the movement of the joystick.
These two features can work together and have many parameters to best suit your needs.
BUILT-IN SAVE SYSTEM
The built-in save system allows you to save changes you make to your in-game touch interface. Added a virtual control? You have modified the appearance or the position of a virtual control? These changes will be saved if you wish and can be loaded the next time you launch your game or application.
MULTIPLAYER READY
Touch Interface Designer is compatible with local and online multiplayer.
GESTURE RECOGNIZER
Gesture Recogizer is the system that recognizes the gestures that the user makes on the screen of a smartphone. It can recognize the following gestures:
- Tap
- Double Tap
- Long Press
- Drag
- Swipe
- Zoom
- Rotate
Future improvements will allow to detect gestures made with several fingers (Two finger swipe for example) or to detect the gestures of each finger (Individual mode)
SHAPE RECOGNIZER
Experimental
this feature is in an experimental state and may be removed temporarily or permanently
Shape recognizer is a system that recognizes shapes drawn by the user. You define the shapes with the virtual shape designer, set the filters and shape recognizer tries to recognize the shapes drawn on the screen.
UMG HELPER
UMG Helper allows you to get a preview of the touch interface on your game’s user interface in order to better design the interface.
OTHER FEATURES
Gallery
Current state
What's next ?
Touch Interface Designer is still in development and new features will be added with each update. See all the features we plan to implement on Touch Interface Designer!
Any ideas? We’d love to hear and discuss it!
News
Touch Interface Designer v2024.1 is now available for download!
Update 2024.1 is now available for download on the marketplace! It includes many new features…