Русский 
Вступление
В этой серии уроков (5 частей) мы добавим интерактивность в уже существующий проект SVOYA Apartment на Playcanvas.
Даже если вы не читали предыдущие части, все приемы, описанные в данном уроке, можно применить к любому проекту вашего интерьера на Playcanvas.
Предыдущие частиВ данном уроке мы затронем следующие важные темы:
- Создание видеотекстуры для материала TV, а также возможность управлять Play/Pause при помощи UI-кнопки;
- Смена цветов шкафов по нажатию UI-кнопки;
- Создание материалов для дивана, имитирующего Falloff, смена материалов дивана по нажатию UI-кнопки;
- Адаптация под мобильные устройства, добавление Joystick;
- Улучшение loading.js для адаптации под мобильные устройства.
Проект приобретет окончательный вид с конфигуратором цветов и материалов, а также полноценной поддержкой мобильных устройств и планшетов. Практически все скрипты, которые показаны в этом уроке, прошли адаптацию и улучшения или переписаны.
Было потрачено много времени на поиск рабочих вариантов скриптов для возможности использования в такого типа проектов. Поэтому я очень надеюсь на вашу поддержку на Patreon.
PatreonПосмотреть Playcanvas проект онлайн.
View Playcanvas Project OnlineСоздание видеотекстуры для материала TV
К сожалению в Playcanvas нету поддержки видеотекстур, так как это реализовано например в Unreal Engine. Тем не менее это возможно с использованием специальных скриптов.
В Интернете нету идеального готового решения, поэтому я адаптировал скрипты для этого проекта и нашел рабочие варианты, чтобы добавить правильной интерактивности и улучшить пользовательский опыт.
Ограничения
Вот несколько ограничений, о которых нужно знать сразу:
- Не рекомендуется использовать видео разрешением выше 720p. Я использовал видео с шириной 640 пикселей. Чем выше разрешение, тем сильнее тормозит просмотр на экране пользователя. Даже если все работает без проблем на ПК, на мобильных устройствах это может создавать неприятные впечатления.
- Формат видео должен быть MP4. Его можно загрузить как часть проекта или указать ссылку на другой веб-ресурс. Но нужно помнить, что некоторые хостинги и сайты запрещают запуск видео, и вы можете столкнуться с ошибкой "Cross-Origin-Access". Поэтому я рекомендую загружать видео в сам проект.
- Размер видео должен быть как можно меньше. Моё видео длится 30 секунд и имеет размер 3 Мб.
- Не стоит загружать слишком длинные видео, так как пользователь не будет смотреть их целиком. Если размер проекта уже составляет 40 Мб, то добавление видео весом 100 Мб не очень логично. Я рекомендую не превышать размер видео 5 Мб.
- Используйте видео без звука, так как музыкальное сопровождение не всегда нужно, а без него размер видео будет меньше.
- Если в проекте много видео, то не обязательно включать все. Всегда нужно думать об оптимизации.
Видеотекстура
Чтобы работать с видео, зайдите в папку "scripts" на панели "Assets" и создайте в ней папку "video". В ней будут храниться все необходимые файлы для видео.Также создайте простой материал с названием "VideoScreen" без каких-либо настроек (название может быть любым).
Загрузите ваше видео в эту же папку. Важно отключить опцию "Preload" для видео, чтобы оно не загружалось вместе со всем проектом, а загружалось потоково после запуска проекта.
Добавьте в папку "scripts" два скрипта: "video-texture.js" и "tv-screen.js". Код этих скриптов будет приведен ниже. Чтобы скачать скрипт, прокрутите страницу до текста "view raw" справа, нажмите правую кнопку мыши, затем выберите "Save link as...".
Скрипт "video-texture.js".
Скрипт "tv-screen.js".
Выделите наш TV во вьюпорте. Примените материал для экрана, новый созданный “VideoScreen”. Также добавьте компонент “Script” и добавьте два скрипта “videoTexture” и “tvScreen”.
Параметр “Play Event” должен быть одинаковый для обоих скриптов. По-умолчанию значение “tv:play”. Если у вас в сцене несколько TV, тогда необходимо переименовывать эти Events, например на “tv2:play”.
Итак для “videoTexture” укажите ранее загруженное видео в формате MP4 в параметре “Video Asset”. А для “tvScreen” необходимо выбрать материал “VideoScreen” в параметре “Video Asset”.
Примечание!
Вы можете указать ссылку на ваше видео в параметре “Video Url”, но учтите, что ваш хостинг-провайдер может не разрешать проигрывание видео и вызывать ошибку “Cross-Origin-Access”!
В моем случае, к сожалению UVW развертка экрана TV была неправильная, я немного подкорректировал позицию и размер текстуры в “Texture Transform” материала “VideoScreen”.
Результат проделанной работы.
Добавьте две картинки Play и Pause в папку “scripts/video”.
А также добавьте следующий скрипт.
Скрипт "play-pause-button.js".
Отлично. Давайте создадим кнопку Play/Pause. Для этого создайте папку “UI” в “Hierarchy”, затем добавьте новый “Entity” с названием “Button” из категории “User Interface”.
Выделите объект “Text” и измените его тип на “Image”.
Далее я назвали кнопку “PlayPause”, картинку назвал “PlayImage”.
Настройки для “PlayPause” кнопки.
Важно!
Обязательно перенесите кнопку в слой “World”, иначе она будет просвечиваться через стены!
Настройки для “PlayImage”.
Не забудьте выбрать иконку “play.png” в разделе “Texture”!
Далее дублируем “PlayImage”, называем “PauseImage” и меняем иконку на “pause.png” в разделе “Texture”!
Перемещаем кнопку под TV, во вьюпорте это выглядит вот так.
Примените скрипт “playPauseButton” к нашему TV. Выберите необходимые “Entity” для кнопки и соответствующих картинок.
Если вы сделали все правильно, то видео на TV вы сможете ставить на паузу или проигрывать и соответственно меняется иконка кнопки.
Заключение
В этой части урока мы сделали возможным проигрывание видео-контента, а также возможность его проигрывать и ставить на паузу.
Для подписчиков Patreon будет возможность просматривать проект SVOYA Apartment в режиме чтения, а также быстрое копирование-вставка необходимых ассетов и скриптов в свой личный проект.
Для всех остальных все необходимое найдете на странице этого урока.
Patreon
{{comment.text}}