4.2 Touch Screen Picture

With the Touch Screen Picture Actor, it is possible to simulate touch interfaces such as smartphones or tablets, as well as touch input devices on machines. For this purpose, an initial image is always defined along with an image that appears after a press.

We will now take a closer look at how this works in detail:

Place a Touch Screen Picture into the level using the Tool Spawner.

Place and rotate the actor so that the surface is facing you.

Make sure the Touch Actor is selected and direct your focus to the Details Panel. Under "Settings – Visual", set the Picture Size to 12 and 22.

In the next step, we want to import images depicting a mobile interface into Unreal Engine. Please download the images below using "Save As," then drag and drop them into the Content Browser.

It should look as follows:

In the next step, we will create the interface.

To do this, go to the Details Panel, then under Settings, open the dropdown menu labeled Pictures, followed by Index.

Under Base Picture, always select the initial image before the interaction takes place. Under Clicked Picture, choose the image representing the state after interaction.

In our example, the imported image named "0" should be set as the Base Picture, and the image named "1" as the Clicked Picture.

In the next step, we want to adjust the Touch Size. Our goal is for the user to tap on the One Key ("0") on the touch interface in the first step (Index 0).

Set the Touch Size to 1 by 1. Once you've adjusted it, you'll see the touch area visually represented in the Viewport.

ChatGPT:

In the next step, we'll set the position of the Touch Surface. For this, we use the parameter Touch Position. Adjust this parameter so that the touch box is positioned precisely over the "One" Key on the numeric keypad.

Using the dropdown menu under "ClickSound", you can also assign a sound effect to play when the user presses the button.

In the next step, we want to create the next touch interaction. To do this, click on the plus symbol next to "Pictures" to create a new group.

Open the created "Index1" and assign the image named "1" to the "BasePicture". For the "ClickedPicture", use the image named "4".

In the next step, we want to set up the touch interaction area again.

Note: Before doing this, we need to adjust a setting.

This time, the collision box should be positioned over the "4" on the keypad.

With the Touchable Actor selected, go to the "Settings-Editor" section in the Details panel and locate the parameter "Show in Editor Index".

This parameter defines which image or index is currently displayed in the viewport.

Only when the corresponding index is selected here can the hitbox be correctly aligned for the respective step. Therefore, set the parameter to "1".

In the next step, adjust the Touch Size and Touch Position so that they are placed over the "4" on the keypad.

Using the dropdown menu under "ClickSound", you can also assign a sound effect to play when the user presses the button.

In the final step, create a new section that contains a task with the Touchable Actor you just created.