Skip to content

TOUCH INTERFACE DESIGNER

Create Touch Interface quickly with an Visual Editor

Fast, easy to use and allows for real-time (in-game) changes

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.

WYSIWYG Editor

Fast and easy to use WYSIWYG editor that lets you see changes in real time and speed up touch interface creation

Preview

Preview your touch interface accurately and on different smartphones with advanced preview

Many useful features

Like Auto Move, Drag to sprint, Touch Region, Enhanced Input compatibility and many more.

In-Game Editing

You can edit your touch interface in game

Gesture Recognizer

Detect gesture like tap, double tap, swipe, zoom, rotate…

Advanced

Motion Recognizer and Shape Recognizer (Experimental)

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

State of development

In active development

Engine Compatibility

UE 5.1+

Target Platform

Windows, Mac, Linux, Android, IOS

Project Type

Entirely written in C++

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…

Read more
Back To Top