Eagle 3D Streaming

Eagle Guide to Touch Components for Mobile Devices

Source:
https://eagle3dstreaming.com/eagle-guide-to-touch-components-for-mobile-devices/

 

Eagle has created a demo UE Project showcasing how to make your UE Project compatible for mobile while pixel streaming. Click this link to Download Eagle’s UE Project for Mobile Controls While Pixel Streaming.

Unreal Project Setup

This Guide shows how to setup project for Mobile and Desktop Devices both while using Eagle Pixel Streaming.

Creating Cursor UMG

  1. Create Widget Blurprint

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

  3. Set the image Alpha to Zero.

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

Image 1. Creating Cursor UMG: Creating Cursor
  1. Go to

Project Settings ->Engine->User Interface. Set the created Cursor Widget under Software cursors.

  1. Go to

Project Settings ->Plugins->PixelStreaming . Set Pisel Streamer Default Cursor Class Name to DefaultCursor

Image 2. Creating Cursor UMG: Set Pisel Streamer Default Cursor
  1. In Level Blueprint (or as per project), set the Show Mouse Cursor in Player Controller to TRUE.

Image 3. Creating Cursor UMG: Player Controller to TRUE

Touch Interface Setup

  1. Create TouchInterface (or Copy from the Engine).

  2. In TouchInterface, set

Actice Opacity = 0.8
Inactive Opacity = 0
This will hide the Interface while used on PC and make visible on Mobile devices.

Image 4. Touch Interface Setup: Setup
  1. Go to

ProjectSettings->Engine->Inputs. Set the created Interface under Default Touch Interface.

  1. Set Always Show Touch Interface to True (Checked).

Image 5. Touch Interface Setup: Default Touch Interface

Setting Inputs

Go to Project Settings-> Inputs, set as shown in following image.

Image 5. Touch Interface Setup: set as shown

Everything done!
Proceed to packaging and deployment on Eagle Control Panel.

 

Eagle 3D Streaming