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.

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.

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 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.

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)

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

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 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.

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.

Touch Interface Designer is compatible with local and online multiplayer.

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 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 allows you to get a preview of the touch interface on your game’s user interface in order to better design the interface.