Добавление интерактивности интерьеру SVOYA (Playcanvas/WebGL). Часть 4
Вступление
Это часть 4 из 5 серии уроков по добавлению интерактивности интерьеру SVOYA Apartment.
Доступ к материалам, такие как: модели в формате "FBX", запеченные текстуры, скрипты и другое, вы можете получить оформив подписку на Patreon.
PatreonПосмотреть Playcanvas проект онлайн.
View Playcanvas Project OnlineДобавление Joystick
Практика показывает, что на мобильных устройствах для ориентации и передвижения в 3D пространстве самым удобным и эффективным способом является использование виртуального джойстика. Не верите? Попробуйте сами!
Вариант с двойным тапом и перемещением несет в себе лишь часть возможностей, не доставляет полного эффекта погружения и не передает того уникального пользовательского опыта, который может доставить виртуальный джойстик.
Если вы хотите чтобы ваш проект не был похож на обычный панорама тур и вы хотите, чтобы ваш клиент получил настоящее удовольствие от взаимодействия с вашей сценой, то выбор однозначен - используйте виртуальный джойстик! Он поможет чувствовать себя настоящим участником виртуального мира и создаст незабываемые впечатления.
За основу был взят джойстик из примера урока на официальном сайте Playcanvas.
Touchscreen Joypad ControlsЕдинственная сложность была в том, что скрипты виртуального джойстика были адаптированы для Third Person, а нам необходимо было для First Person. Поэтому чтобы уже ничего не менять в текущем проекте, я доработал скрипты из урока и адаптировал для такого типа проектов как SVOYA Apartment.
Настройка UI элементов
Для создания джойстика был использована система Playcanvas UI.
Все графические элементы были взяты из Playcanvas Manual.
Для этого перейдите в сцену этого урока.
Scene - Touchscreen Joypad Controls
И скопируйте в свой проект папку “touch-joypad”. Если вы являетесь подписчиком Patreon и у вас есть доступ к проекту SVOYA Apartment, рекомендую скопировать папку оттуда.
Далее создайте в “Hierarchy” в папке “UI” новый “Entity - 2D Screen”.
Затем из “Assets” из папки “touch-joypad/templates” перенесите два элемента шаблонов джойстика: “Left Fixed Touch Joystick” и “Right Fixed Touch Joystick”.
Пример показан ниже на скриншоте.
Все, это все графические элементы, которые необходимо было добавить. Если вы сейчас запустите проект (“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” со следующими настройками, показанных на скриншоте ниже.
Важно!
Применяйте скрипты только к “Player”. НЕ применяйте скрипты к “Camera”!
Выделите наш “Right Fixed Touch Joystick” и примените скрипт “touchJoystick”, со следующими настройками.
Теперь выделите “Left Fixed Touch Joystick” и также примените “touchJoystick” скрипт со следующими настройками.
Готово! Вы можете запустить проект (“Play”) и наслаждаться виртуальным джойстиком для мобильной версии проекта.
Прошу заметить, что скорость движения “Player” или вращение камеры зависит от того насколько отклонен стик джойстика. Мне пришлось немного попотеть, чтобы сделать такую плавную функциональность, потому что у готовых решений например при малейшем сдвиге стика игрок сразу набирал максимальную скорость, что было не очень комфортно.
Я надеюсь, что вы оценили мои старания и подписались на мой Patreon.
Patreon
Адаптация под мобильные устройства
Еще один важный момент, необходимо показать пользователям на мобильных устройствах, что необходимо перевернуть устройство в горизонтальное положение для использования джойстика.
Добавьте в “2D Screen” новый “Layout Group”. Назовите его “RotatePhone”.
Затем добавьте в “RotatePhone” новый UI элемент “Button”, назовите “Background”.
Настройки кнопки “Background”.
В качестве текстуры для “RotateImage” загрузите и выберите следующую картинку.
Со следующими настройками.
Выберите “Left Fixed Touch Joystick”, и в скрипте “touchJoystick” примените “RotatePhone” в качестве “Entity” в настройке “Rotate Phone UI Entity”.
Запустите проект на мобильном телефоне. Теперь вы будете видеть картинку показывающую повернуть телефон в горизонтальное положение.
А в горизонтальном положении вы сможете перемещаться по сцене при помощи джойстика.
И вот, конечный результат.
View Playcanvas Project OnlineЗаключение
В этой увлекательной части нашего урока мы добавили джойстик для мобильных устройств и сделали это так, чтобы все было выполнено по правилам и на высшем уровне. Вы сможете использовать скрипты и принципы, изученные в этом уроке, в своих будущих проектах и радовать своих клиентов потрясающим пользовательским опытом. Вы точно будете выше своих конкурентов, используя такие техники и знания!
Для подписчиков Patreon будет возможность просматривать проект SVOYA Apartment в режиме чтения, а также быстрое копирование-вставка необходимых ассетов и скриптов в свой личный проект.
Для всех остальных все необходимое найдете на странице этого урока.
PatreonFAQ
1. О чём эта статья?
2. Что рассматривается в Part 4?
3. Нужно ли проходить предыдущие части перед Part 4?
4. Почему интерактивность важна для архитектурной визуализации?
5. Можно ли использовать эти решения в других PlayCanvas-проектах?
6. Сосредоточена ли Part 4 на улучшении пользовательского опыта?
7. Можно ли добавлять собственные элементы интерфейса?
8. Можно ли расширять функциональность проекта со временем?
9. Могут ли пользователи взаимодействовать с объектами в реальном времени?
10. Насколько важна оптимизация на этом этапе?
11. Можно ли сохранить совместимость с мобильными устройствами?
12. Подходит ли PlayCanvas для коммерческих презентаций?
13. Требуются ли знания программирования для создания сложных функций?
14. Можно ли обновлять проект после его публикации?
15. Какие преимущества дают интерактивные WebGL-презентации?
16. Для кого будет полезна эта статья?
Последние статьи
{{comment.text}}