В этом руководстве мы научимся создавать приложение для планшетов для социальной VR-платформы High Fidelity. Мы рассмотрим процесс написания нашего примера приложения для планшета Gemstone Magic Maker, которое позволяет создавать красочные маленькие драгоценные камни в виртуальной реальности, чтобы поделиться ими с друзьями.

Что такое приложение для планшетов?

Приложения для планшетов - это настраиваемые программы, работающие на новейшей платформе пользовательского интерфейса планшета, представленной в High Fidelity из Beta Release 33. В то время как планшет поставляется готовым к использованию с парой системных приложений, таких как Snapshot, People и Edit, платформа пользовательского интерфейса планшета предназначена для большего. Это позволяет разработчикам и создателям контента создавать свои собственные приложения и элементы пользовательского интерфейса, которые могут легко взаимодействовать с миром VR в режиме High Fidelity.

В качестве примера для начала мы проведем вас через процесс написания этого забавного небольшого приложения под названием «Gemstone Magic Maker». Приложение предоставляет вам быстрый доступ к коллекции разноцветных драгоценных камней, сделанных из примитивов формы High Fidelity. Быстро нажав на планшет, вы можете создать эти драгоценные камни для социальной виртуальной реальности. Это похоже на волшебство!

Что вам понадобится

  • Установлен High Fidelity (доступен бесплатно в Steam store / сайте)
  • Базовый опыт веб-разработки (html / css / javascript)
  • Знакомство со сценариями в High Fidelity - это хорошо, но не обязательно.
  • ~ От 30 минут до часа в зависимости от того, насколько внимательно вы следите за инструкциями

инструкции

Шаг 1. Создайте программу JavaScript для установки / удаления вашего приложения

Создайте новый файл JavaScript в текстовом редакторе. Вы можете назвать это как-нибудь, например, gemstoneApp.js. Пример ниже содержит все функции, необходимые для создания приложения, которое устанавливается и удаляется с планшета. См. Следующие комментарии о том, как каждая из линий работает вместе:

Примечание. GemstoneApp.js будет клиентским скриптом, работающим в вашем интерфейсе High Fidelity.

Шаг 2. Начните разрабатывать пользовательский интерфейс своего приложения на HTML / CSS

Одной из величайших особенностей платформы пользовательского интерфейса планшета является то, что она позволяет создавать элементы пользовательского интерфейса, как если бы вы разрабатывали веб-приложение. Вы можете написать html / css / js, который будет интерпретироваться веб-движком, который работает так же, как браузер Chrome.

Размер экрана планшета: 480 x 720. Так что вы, вероятно, захотите разработать дизайн с учетом этого (например, размеры кнопок для маленького экрана, удобочитаемость текста и т. Д.). Чтобы помочь вам начать работу, мы собрали шаблон быстрого старта, который вы можете использовать повторно. Он содержит тот же макет, стиль и шрифт, что и экран главного меню. Он также имеет липкую панель заголовка для заголовка вашего приложения. Но, конечно, вы можете сделать свой собственный с нуля, если хотите. Высокая точность не мешает вам выполнять дальнейшую настройку.

  • Изменить из шаблона быстрого запуска: здесь я просто изменил заголовок и составил список кнопок для нашей коллекции драгоценных камней.

Советы разработчика: мне часто нравится тестировать свой пользовательский интерфейс в браузере с помощью инструмента Chrome Inspector. Это полезно, потому что вы можете предварительно просмотреть свое приложение во время внесения изменений.

Шаг 3. Загрузите веб-приложение на планшет High Fidelity

В gemstoneApp.js скопируйте и вставьте ссылку на свое веб-приложение.

// Link to your app's HTML file
var APP_URL = "https://hifi-content.s3.amazonaws.com/faye/gemstoneMagicMaker/gemstoneMagicMaker.html";

Введите следующую функцию, чтобы загружать приложение при нажатии кнопки.

// When user click the app button, we'll display our app on the tablet screen
function onClicked() {
  tablet.gotoWebScreen(APP_URL);
}
button.clicked.connect(onClicked);

Посмотрим, как мы продвигаемся ...

Шаг 4. Добавьте значок для своего приложения

Как вы могли заметить, мы никогда не указывали значок для нашего приложения, и планшет по умолчанию использует значок «карандаш и гаечный ключ», который также использовался для редактирования. Давайте сделаем что-нибудь более подходящее для нашего Мастера магии драгоценных камней.

Рекомендуемые характеристики для значков на планшете: 50 на 50 или квадрат, белый цвет на прозрачном фоне в формате файла SVG. Вы можете создать свой собственный с помощью программного обеспечения для графического дизайна или найти онлайн-ресурсы. На этот раз я зашел на The Noun Project, сайт, где дизайнеры создают иконки для всего и делятся ими под Creative Commons. Я остановился на этой иконке с драгоценным камнем от Cengiz SARI из Noun Project. Затем я изменил его так, чтобы векторные пути были белого цвета и в правильном измерении.

Затем в gemstoneApp.js мы копируем и вставляем путь к значку. И локальный путь, и URL-адрес должны работать.

// Path to the icon art for your app
var APP_ICON = "https://hifi-content.s3.amazonaws.com/faye/gemstoneMagicMaker/gemstoneAppIcon.svg";

Ссылка на значок при создании кнопки планшета.

var button = tablet.addButton({
   icon: APP_ICON,
   text: APP_NAME
});

Шаг 5. Обработка событий нажатия кнопки через EventBridge

Теперь давайте заставим кнопки с драгоценными камнями взаимодействовать с миром High Fidelity VR. Платформа пользовательского интерфейса планшета предоставляет канал связи под названием EventBridge. Он позволяет отправлять и получать события между клиентским скриптом (в нашем случае gemstoneApp.js) и JavaScript в вашем веб-приложении (в нашем случае это код под тегом скрипта gemstoneMagicMaker.html).

Следуйте приведенному ниже примеру кода, чтобы увидеть EventBridge в действии. Мы используем его для обработки нажатий кнопок:

А в gemstoneApp.js мы можем написать следующие строки, чтобы отслеживать события.

// Handle the events we're receiving from the web UI
function onWebEventReceived(event) {
   print("gemstoneApp.js received a web event: " + event);
}
tablet.webEventReceived.connect(onWebEventReceived);

Совет по отладке: используйте метод print («ваше сообщение отладки»), чтобы взглянуть на поведение вашей программы.

Шаг 6. Сделайте волшебство. Создавайте наши драгоценные камни!

Наконец, что самое интересное в этом руководстве, мы создадим драгоценные камни с помощью High Fidelity JS API. Драгоценные камни будут созданы как Сущности, Свойства которых мы можем изменять в gemstoneApp.js.

  • Рассчитайте позицию, в которой мы хотим создать объект.
  • Предоставьте дополнительные сведения о свойствах (цвет, имя, форма и т. д.) для каждого вида драгоценных камней. Объект будет создан, когда gemstoneApp.js получит события нажатия от каждой из кнопок.

Были сделаны!

Итак, мы рассмотрели все основы написания приложений для планшетов с высокой точностью воспроизведения. Для справки, полный пример проекта доступен ниже:

Приложение Gemstone Magic Maker также скоро будет доступно для загрузки на Marketplace.

Следующие шаги

Если у вас есть какие-либо вопросы по этому руководству, не стесняйтесь спрашивать. Мы всегда рады помочь! Мы рады видеть, какие приложения для планшетов вы создадите!

Некоторые идеи для вас:

  • My Quick Spawner: приложение, которое порождает ваши творения (Tilt Brush art, 3D-модели или JSON объектов), чтобы делиться ими с друзьями в социальных сетях VR.
  • VR Helipoter Remote Controller: создайте приложение для управления вертолетами (или дронами!) В VR.
  • HiFi Notepad: приложение для создания заметок на планшете в HiFi, чтобы вы могли быстро записывать важную информацию (например, электронную почту этого классного человека, с которым вы встречаетесь, личные напоминания, отчет об ошибке, список покупок, ссылка на очаровательные гифки с животными) во время тусовки в VR.
  • Или обо всем, что вам захочется. Удачи с High Fidelity Javascript API и платформой для планшетов!