English 
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.
PatreonView the Playcanvas project online.
View Playcanvas Project OnlineAdding Joystick
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 ControlsThe 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.
To do this, go to the scene of this lesson.
Scene - Touchscreen Joypad Controls
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.
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.
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.
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.
Now select the "Left Fixed Touch Joystick" and also apply the "touchJoystick" script with the following settings.
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
Adaptation for mobile devices
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".
Then add a new UI element “Button” to “RotatePhone”, name it “Background”.
Background button settings.
As a texture for "RotateImage" load and select the following image.
With the following settings.
Select “Left Fixed Touch Joystick”, and in “touchJoystick” script, apply “RotatePhone” as “Entity” in “Rotate Phone UI Entity” setting.
Run the project on mobile. Now you will see a picture showing turn the phone to landscape position.
And in a horizontal position, you can move around the stage with a joystick.
And here is the end result.
View Playcanvas Project OnlineConclusion
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
{{comment.text}}