Українська 
Вступ
У цій серії уроків (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". В ній будуть зберігатися всі необхідні файли для відео.
Завантажте відео в цю папку. Важливо вимкнути опцію "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”.
Далі я назвали кнопку PlayPlay, картинку назвав PlayImage.
Налаштування для “PlayPause” кнопки.
Важливо!
Обов'язково перенесіть кнопку в шар “World”, інакше вона просвічуватиметься через стіни!
Налаштування для “PlayImage”.
Не забудьте вибрати іконку “play.png” у розділі “Texture”!
Далі дублюємо “PlayImage”, називаємо “PauseImage” і змінюємо іконку на “pause.png” у розділі “Texture”!
Переміщуємо кнопку під TV, у в'юпорт це виглядає ось так.
Використовуйте скрипт “playPauseButton” до нашого TV. Виберіть “Entity” для кнопки та відповідних картинок.
Якщо ви зробили все правильно, відео на TV ви зможете ставити на паузу або програвати і відповідно змінюється іконка кнопки.
Висновок
У цій частині уроку ми уможливили програвання відео-контенту, а також можливість його програвати та ставити на паузу.
Для передплатників Patreon буде можливість переглядати проект SVOYA Apartment у режимі читання, а також швидке копіювання-вставка необхідних ассетів та скриптів у свій особистий проект.
Для всіх інших все необхідне знайдете на сторінці цього уроку.
Patreon
{{comment.text}}