Це частина 4 з 5 серії уроків з додавання інтерактивності інтер'єру SVOYA Apartment.

Доступ до матеріалів, такі як: моделі у форматі "FBX", запечені текстури, скрипти та інше, ви можете отримати підписку на Patreon.

Переглянути Playcanvas проект онлайн.

Loading...

Практика показує, що на мобільних пристроях для орієнтації та пересування у 3D просторі найзручнішим та найефективнішим способом є використання віртуального джойстика. Не вірите? Спробуйте самі!

Варіант з подвійним тапом і переміщенням несе в собі лише частину можливостей, не завдає повного ефекту занурення і не передає того унікального досвіду користувача, який може доставити віртуальний джойстик.

Якщо ви хочете, щоб ваш проект не був схожим на звичайний панорама тур і ви хочете, щоб ваш клієнт отримав справжнє задоволення від взаємодії з вашою сценою, то вибір однозначний – використовуйте віртуальний джойстик! Він допоможе почуватися справжнім учасником віртуального світу і створить незабутні враження.

За основу було взято джойстик із прикладу уроку на офіційному сайті Playcanvas.

Єдина складність була в тому, що скрипти віртуального джойстика були пристосовані для Third Person, а нам потрібно було для First Person. Тому, щоб уже нічого не змінювати в поточному проекті, я допрацював скрипти з уроку та адаптував для такого типу проектів як SVOYA Apartment.

Для створення джойстика була використана система Playcanvas UI. Всі графічні елементи були взяті з Playcanvas Manual.

Для цього перейдіть до сцени цього уроку.

Loading...

І скопіюйте у свій проект папку “touch-joypad”. Якщо ви є передплатником Patreon і маєте доступ до проекту SVOYA Apartment, рекомендую скопіювати папку звідти.

Далі створіть у “Hierarchy” у папці “UI” новий “Entity - 2D Screen”.

Loading...

Потім з “Assets” з папки “touch-joypad/templates” перенесіть два елементи шаблонів джойстика: “Left Fixed Touch Joystick” та “Right Fixed Touch Joystick”.

Приклад показаний нижче на скріншоті.

Loading...

Все це всі графічні елементи, які необхідно було додати. Якщо ви зараз запустите проект (“Play”), ви побачите, що навіть на Desktop версії є дані віртуальні джойстики.

Додайте наступні скрипти до папки “touch-joypad/scripts” із заміною.

Скрипт "joystick-camera-orbit.js".

Скрипт "joystick-player-movement.js".

Змінений “touch-joystick.js”.

Скрипти “joystick-camera-orbit.js” та “joystick-player-movement.js” були повністю написані мною, щоб адаптувати віртуальний джойстик під поточний “firstPersonMovement” скрипт для “Player”.

Застосуйте скрипти “joystickPlayerMovement” та “JoystickCameraOrbit” до нашого “Player” з наступними параметрами, показаними на скріншоті нижче.

Loading...

Важливо!
Застосовуйте скрипти лише до “Player”. НЕ застосовуйте скрипти до “Camera”!

Виділіть наш “Right Fixed Touch Joystick” та застосуйте скрипт “touchJoystick”, з наступними налаштуваннями.

Loading...

Тепер виділіть "Left Fixed Touch Joystick" і також застосуйте "touchJoystick" скрипт з наступними налаштуваннями.

Loading...

Готово! Ви можете запустити проект (“Play”) та насолоджуватися віртуальним джойстиком для мобільної версії проекту.

Прошу зауважити, що швидкість руху “Player” або обертання камери залежить від того, наскільки відхилений стик джойстика. Мені довелося трохи попітніти, щоб зробити таку плавну функціональність, тому що у готових рішень, наприклад, при найменшому зрушенні стику гравець відразу набирав максимальну швидкість, що було не дуже комфортно.

Я сподіваюся, що ви оцінили мої старання та підписалися на мій Patreon.

Loading...

Loading...

Ще один важливий момент, необхідно показати користувачам на мобільних пристроях, що необхідно перевернути пристрій горизонтальне положення для використання джойстика.

Додайте до “2D Screen” новий “Layout Group”. Назвіть його "RotatePhone".

Loading...

Потім додайте в RotatePhone новий UI елемент Button, назвіть Background.

Loading...

Налаштування кнопки “Background”.

Loading...

Як текстуру для “RotateImage” завантажте та виберіть наступну картинку.

Loading...

З наступними опціями.

Loading...

Виберіть “Left Fixed Touch Joystick”, і в скрипті “touchJoystick” застосуйте “RotatePhone” як “Entity” у налаштуванні “Rotate Phone UI Entity”.

Loading...

Запустіть проект на мобільному телефоні. Тепер ви будете бачити картинку, яка показує повернути телефон у горизонтальне положення.

Loading...

А в горизонтальному положенні ви зможете переміщатися сценою за допомогою джойстика.

Loading...

І ось кінцевий результат.

У цій захоплюючій частині нашого уроку ми додали джойстик для мобільних пристроїв і зробили так, щоб все було виконано за правилами та на найвищому рівні. Ви зможете використовувати скрипти і принципи, вивчені в цьому уроці, у своїх майбутніх проектах і радувати своїх клієнтів приголомшливим досвідом користувача. Ви точно будете вище за своїх конкурентів, використовуючи такі техніки та знання!

Для передплатників Patreon буде можливість переглядати проект SVOYA Apartment у режимі читання, а також швидке копіювання-вставка необхідних ассетів та скриптів у свій особистий проект.

Для всіх інших все необхідне знайдете на сторінці цього уроку.