Author: MastaMan
Date: April 7, 2023
Updated on: July 25, 2023
You are reading part: 1 2 3 4 5

Introduction

This is part 4 of the 5 series of tutorials on adding interactivity to the SVOYA Apartment interior.

Access to materials, such as: models in the "FBX" format, baked textures, scripts and more, you can get by subscribing to Patreon.

Patreon

View the Playcanvas project online.

View Playcanvas Project Online

Adding Joystick

playcanvas interior first person movement with joysitck
Loading...

Practice shows that on mobile devices for orientation and movement in 3D space, the most convenient and effective way is to use a virtual joystick. Don't believe? Try it yourself!

The double-tap-and-drag option is only part of the experience, doesn't deliver the full immersion effect, and doesn't convey the unique user experience that a virtual joystick can deliver.

If you want your project not to look like a regular panorama tour and you want your client to get real pleasure from interacting with your scene, then the choice is clear - use a virtual joystick! It will help you feel like a real participant in the virtual world and create an unforgettable experience.

The joystick was taken as a basis from an example lesson on the official website of Playcanvas.

Touchscreen Joypad Controls

The only difficulty was that the virtual joystick scripts were adapted for Third Person, and we needed it for First Person. Therefore, in order not to change anything in the current project, I finalized the scripts from the lesson and adapted them for such a type of project as SVOYA Apartment.

Customizing UI elements

The joystick was created using the Playcanvas UI system.
All graphic elements were taken from the Playcanvas Manual.

Touchscreen Joypad Controls

To do this, go to the scene of this lesson.

Scene - Touchscreen Joypad Controls
touchscreen joypad controls lesson
Loading...

And copy the “touch-joypad” folder into your project. If you are a Patreon subscriber and have access to the SVOYA Apartment project, I recommend copying the folder from there.

Next, create a new “Entity - 2D Screen” in “Hierarchy” in the “UI” folder.

create new ui 2d screen
Loading...

Then from "Assets" in the "touch-joypad/templates" folder drag the two joystick template elements: "Left Fixed Touch Joystick" and "Right Fixed Touch Joystick".

An example is shown in the screenshot below.

add joystick ui elements to scene
Loading...

Everything, these are all the graphic elements that needed to be added. If you now run the project (“Play”), you will see that even the Desktop version has these virtual joysticks.

Applying and configuring scripts

Add the following scripts to the "touch-joypad/scripts" folder with replacement.

Script "joystick-camera-orbit.js".



Script "joystick-player-movement.js".



Modified "touch-joystick.js".



The scripts “joystick-camera-orbit.js” and “joystick-player-movement.js” were completely written by me to adapt the virtual joystick to the current “firstPersonMovement” script for “Player”.

Apply the "joystickPlayerMovement" and "JoystickCameraOrbit" scripts to our "Player" with the following settings shown in the screenshot below.

add joystick scripts to player
Loading...
Important!
Apply scripts only to “Player”. DO NOT apply scripts to “Camera”!

Select our "Right Fixed Touch Joystick" and apply the "touchJoystick" script, with the following settings.

apply script to left joystick
Loading...

Now select the "Left Fixed Touch Joystick" and also apply the "touchJoystick" script with the following settings.

apply script to another joystick
Loading...

Ready! You can run the project (“Play”) and enjoy the virtual joystick for the mobile version of the project.

Please note that the speed of movement of the “Player” or the rotation of the camera depends on how far the joystick stick is deflected. I had to sweat a little to make such a smooth functionality, because with ready-made solutions, for example, with the slightest shift of the stick, the player immediately gained maximum speed, which was not very comfortable.

I hope you appreciate my efforts and subscribe to my Patreon.

Patreon
playcanvas interior project with joystick
Loading...

Adaptation for mobile devices

rotate your phone to horisontal
Loading...

Another important point is to show users on mobile devices that they need to flip the device horizontally to use the joystick.

Add a new "Layout Group" to "2D Screen". Name it "RotatePhone".

add group layout to 2d screen
Loading...

Then add a new UI element “Button” to “RotatePhone”, name it “Background”.

rotate phone entity
Loading...

Background button settings.

backround settings for rotate phone entity
Loading...

As a texture for "RotateImage" load and select the following image.

rotate phone
Loading...

With the following settings.

image rotate phone settings
Loading...

Select “Left Fixed Touch Joystick”, and in “touchJoystick” script, apply “RotatePhone” as “Entity” in “Rotate Phone UI Entity” setting.

apply image rotate phone in script settings
Loading...

Run the project on mobile. Now you will see a picture showing turn the phone to landscape position.

rotate your phone to horisontal
Loading...

And in a horizontal position, you can move around the stage with a joystick.

horisontal mobile joystick player
Loading...

And here is the end result.

View Playcanvas Project Online

Conclusion

In this exciting part of our tutorial, we added a joystick for mobile devices and made it so that everything was done according to the rules and at the highest level. You will be able to use the scripts and principles learned in this tutorial in your future projects and delight your customers with an amazing user experience. You will definitely be above your competitors using such techniques and knowledge!

Patreon subscribers will be able to view the SVOYA Apartment project in read mode, as well as quickly copy-paste the necessary assets and scripts into their personal project.

For everyone else, you will find everything you need on the page of this lesson.

Patreon


You are reading part: 1 2 3 4 5
{{commentsMsg}}
  

No one has posted a comment yet
{{comment.lastname}} {{comment.name}} {{comment.date}}
{{comment.text}}
Sponsored content