Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

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

Panel
panelIconIdatlassian-info
panelIcon:info:
bgColor#F4F5F7

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

Prepare to execute instructions

Info

For this document, you should need :

  1. Access to the Control Panel. ;

  2. Enable the Pixel Streaming plugin Enable the Pixel Streaming plugin.

  3. Package your App Package your Project from Unreal Engine

  4. Upload your App Upload an App on your Control Panel

  5. Select an App from Step 1 in the Control Panel Select an App

  6. Select/Create a Config Select/Create a Config

  7. .

  8. At least one uploaded application.

  9. Select/Create an App from the Control Panel.

Instructions

1. Modifications from the Control Panel Config

Panel
panelIconIdatlassian-info
panelIcon:info:
bgColor#F4F5F7

...

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

Panel
panelIconIdatlassian-info
panelIcon:info:
bgColor#E6FCFF

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

Step 1. Create a Cursor UMG

...

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

Image Modified

5. Set the created Cursor Widget under Software cursors

Panel
panelIconIdatlassian-info
panelIcon:info:
bgColor#E6FCFF

Project Settings -

...

>Engine-

...

>User Interface

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

Panel
panelIconIdatlassian-info
panelIcon:info:
bgColor#E6FCFF

Project Settings -

...

>Plugins-

...

>Pixel Streaming

...

Image Added

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

Panel
panelIconIdatlassian-info
panelIcon:info:
bgColor#E6FCFF

In Level Blueprint (or as per project).

Image Modified

2.2. Touch Interface Setup (Optional)

Note

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

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

...

Panel
panelIconIdatlassian-info
panelIcon:info:
bgColor#F4F5F7

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

Image Modified

3. Set the created Interface under Default Touch Interface

Panel
panelIconIdatlassian-info
panelIcon:info:
bgColor#E6FCFF

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

4. Enable ‘Always Show Touch Interface’

image-20240308-081232.pngImage Modified

5. Set the Parameters as follow

Panel
panelIconIdatlassian-info
panelIcon:info:
bgColor#E6FCFF

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

Image Modified

Info

The next step will be to PackageandUploadyour Appon the Control Panel.

Info

The source code of the steps showed in this tutorial are here :
https://eagle3dstreaming.atlassian.net/l/cp/7BNEDDxT

...

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

...

.

Need help? Contact Support

...