Skip to main content
Skip table of contents

Touch Components for Mobile Devices

Learn how to make your UE App able to receive inputs from mobile devices.

To achieve your mobile configuration will require making modifications to both your Control Panel Config and Unreal Engine (UE) Project.

Instructions

1. Modifications from the Control Panel Config

Check this document and enable this feature to receive Touch commands on Mobile devices

2. Modifications from the Unreal Engine (UE) Project

2.1. UE Project Setup

Follow these instructions to setup your Project for both Mobile and Desktop.

Step 1. Create a Cursor UMG

1. Create a Widget Blueprint

2. Add to the Canvas with a small size as a cursor (example 20×20)

3. Set the image Alpha to Zero

4. This will act as an invisible Cursor and it will be hidden behind the Browser Cursor during the Pixel Streaming

Image 1. Create a Cursor UMG

5. Set the created Cursor Widget under Software cursors

Project Settings ->Engine->User Interface

6. Set Pixel Streamer Default Cursor Class Name to ‘DefaultCursor’

Project Settings ->Plugins->Pixel Streaming

Image 2. Create a Cursor UMG : Set a Pixel Streamer Default Cursor

7. Set the Show Mouse Cursor in Player Controller to TRUE

In Level Blueprint (or as per project).

Image 3. Create a Cursor UMG : Player Controller to TRUE

2.2. Touch Interface Setup (Optional)

This allows you to enable Joystick Controls in your App for Mobile devices.

1. Create Touch Interface (or Copy from the Engine)

2. In Touch Interface, set :

Active Opacity = 0.8
Inactive Opacity = 0

This will hide the Interface used on PC and make it visible on Mobile devices.

Image 4. Touch Interface Setup

3. Set the created Interface under Default Touch Interface

Go to : Project Settings->Engine->Inputs.

4. Enable ‘Always Show Touch Interface’

image-20240308-081232.png

Image 5. Touch Interface Setup : Mobile : Enable Always Show Touch Interface

5. Set the Parameters as follow

Go to : Project Settings-> Inputs > Enter the Parameters values below.

Image 6. Set these Parameters

The next step will be to Package and Upload your App on the Control Panel.

The source code of the steps showed in this tutorial is here.


Was this article helpful? Comment Below. Let us know your feedback.

Need help? Contact Support

If you still need help, contact support to get your issue resolved quickly.

Submit a new request at E3DS support portal or send an Email at support@eagle3dstreaming.com.

Seek advice. Connect with others. Share your experiences. Join our lively Community Forum today.

JavaScript errors detected

Please note, these errors can depend on your browser setup.

If this problem persists, please contact our support.