Создайте многопользовательскую браузерную игру VR с A-Frame, PubNub и WebVR

1656551416 sozdajte mnogopolzovatelskuyu brauzernuyu igru vr s a frame pubnub i webvr

Намратха Субраманья

1*Iu7_DRv1Pr_9dHfkr22ZVw

Развитие технологий сделало виртуальную реальность (VR) более увлекательной и доступной, чем когда-либо. Эта увлекательная среда может походить на реальный мир. Или это может быть фантастически, создавая опыт, невозможный в обычной реальности.

А еще лучше, качественные устройства виртуальной действительности сейчас доступны по низким ценам. Благодаря ряду гарнитур виртуальной реальности, совместимых со смартфонами, такими как Google Cardboard, Samsung Gear VR, Oculus Rift и HTC Vive, VR становится следующим большим делом.

В этом учебнике мы воспользуемся этим и создадим многопользовательскую игру VR в режиме реального времени с помощью A-Frame, PubNub, Glitch и WebVR.

Полный репозиторий кода GitHub можно найти здесь.

WebVR

WebVR – это открытая спецификация, позволяющая использовать VR в вашем браузере. Это API браузера JavaScript, который работает как интерфейс для оборудования VR. WebVR является кроссплатформенным и может использоваться для разработки, просмотра и обмена содержимым VR в любом браузере, поддерживаемом VR. С помощью WebVR можно открыть браузер и получить доступ к виртуальной реальности, просто нажав ссылку. Непосредственная работа с WebVR требует знания JavaScript и WebGL.

А-рамка

A-Frame – это фреймворк виртуальной реальности, построенный на основе API WebVR. Он использует WebVR API для доступа к данным датчиков VR-гарнитур (положения, ориентации), чтобы трансформировать камеру и отображать содержимое непосредственно на гарнитуре VR. A-Frame — это проект открытого сообщества, использующий API WebVR вместе с HTML, CSS, JavaScript и Three.js. A-Frame стремится к чрезвычайно увлекательному и интерактивному VR-контенту с производительностью, похожей на родной. В то же время A-Frame хочет, чтобы каждый мог участвовать в создании VR-контента. A-Frame поддерживает все главные гарнитуры с их контроллерами.

Глюк

Glitch предоставляет онлайн-редактор кода с мгновенным развертыванием и размещением веб-сайтов. Редактор поддерживает как внешний, так и внутренний код, а также несколько файлов и каталогов. Glitch позволяет делать ремикс (т.е. копировать) существующие проекты и делать их своими собственными, а также мгновенно размещать и развертывать изменения для всех. Firefox Nightly позволяет настраивать содержимое VR с помощью консоли отладки.

Игровая среда

Система физики A-Frame

aframe-physics-system является промежуточным программным обеспечением, которое инициализирует физический механизм и открывает компоненты A-Frame для нас, чтобы применить их к существу. Когда мы используем его static-body или dynamic-body компоненты, aframe-physics-system создает а Cannon.Body экземпляр и присоединяет его к нашим сущностям A-Frame, поэтому на каждом кадре он корректирует положение объекта, вращение и т.д.

Мяч

<a-sphere>примитив создает сферическую форму. Вы можете определить его цвет радиуса и положения. Because of aframe-physics-системы, шар может быть превращен в динамическое тело с определенной массой.

Боулинг

<a-box> создает такие формы, как коробки, кубы или стены. Вы можете создать прямоугольную коробку и сделать из нее дорожку для боулинга, поместив на нее кегли и мяч.

Заколки

<a-cylinder> примитив используется для создания труб и криволинейных поверхностей. Эти цилиндры можно использовать в качестве кегли для боулинга в игре. Обязательно определите радиус, высоту, положение и массу цилиндра.

Дорожки

Мяч не может катиться в одном направлении всякий раз, когда вы его бросаете. Вы можете определить любое количество дорожек для катения мяча, и эта дорожка может определять направление. В этой игре 5 дорожек и перемещением мяча по этим дорожкам управляют 5 треугольников или, скажем, указатели на дорожке для боулинга.

Окрестности

Сцена представлена <a-scene> элемент. Сцена является глобальным корневым объектом и все сущности содержатся в сцене. Трение, восстановление и итерация объектов установлены на значения 0,001, 0,3 и 30 соответственно.

A-Frame имеет систему управления активами, которая позволяет нам размещать наши активы в одном месте, а также предварительно загружать и кэшировать активы для лучшей производительности. Мы размещаем такие активы внутри <a-assets>.

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

На подобных линиях коробку можно превратить в кнопку, прикрепленную к стене, используя компонент масштаба. <a-text> может добавлять текст в виртуальную среду.

<a-bтакже можно использовать для построения границ рядом с дорожкой для боулинга.

Игра

Катание мяча

Как обсуждалось ранее, мяч может перекатиться по 5 воображаемым дорожкам на дорожке для боулинга. Этого можно добиться с помощью <a-animatiна>. Анимации можно прикрепить в A-Frame through <a-animation>, сделав его дочерним для сущности для анимации.

Теперь вы можете связать эти анимации мяча с помощью 5 указателей, чтобы анимация начиналась при каждом нажатии одного из треугольников. Этого можно добиться путём написания компонента. Мы можем зарегистрировать компонент JavaScript и использовать его декларативно с DOM. Компоненты можно настроить, повторно использовать и использовать.

Падение шипов

Когда динамическое тело массой 17,5 катится к 10 динамическим телам массой 1,25, некоторые из них имеют тенденцию падать. После каждого нокдауна можно подсчитать количество упавших кеглей. Мы можем проверить положение шипов в конце анимации. Если любой из оборотов шпильки имеет значение x, не равное 0 или -0, это означает, что штифт не стоит вертикально. Подсчитав количество лежащих кеглей, можно подсчитать счет игрока.

В приведенной выше строке отображается значение x атрибута вращения шпильки. Таким образом, вы можете получить значение x атрибута вращения всех контактов и сохранить его в массиве. Теперь вы можете прокрутить массив и проверить каждое значение и увеличить значение strike счетчик.

Новая игра

Игрок может начать новую игру в любой момент времени, нажав кнопку Новая игра на стене. Он автоматически обновляет игру.

Подвижная камера

Вы можете переместить камеру в любое время во время игры. Здесь я решил перемещать камеру каждый раз, когда игрок бросает мяч, чтобы лучше видеть падающие кеглы.

1*kZFpH7Qepl0i1OtR7jwmrg

PubNub

С задержкой менее 1/4 секунд PubNub может плавно публиковать и подписываться на сообщения между несколькими устройствами VR. Давайте превратим эту игру для одного игрока в игру для двоих.

Теперь вам предстоит инициализировать ключи PubNub. Зарегистрируйте аккаунт PubNub и создайте проект на панели управления администратора.

Решение поворотов

Каждый игрок получает два хода. Переключатель игрока возвращается через два выстрела. После каждые два кадра PubNub может известить другого пользователя, что он может взять контроль. В этой игре каждый раз, когда игрок получает свой ход, на дорожке боулинга появляются 5 треугольных указателей. А когда не наступает их очередь, указатели 5 треугольников скрыты.

Спрячь указатели, если не ваша очередь. Здесь вместо того, чтобы прятаться, я устанавливаю позицию на 0.

Поверните поверхность указателя на дорожку боулинга, когда настанет ваша очередь. Сделав это, вы снова получите контроль над треками.

Воспроизведение состояния кеглей после нокдауна

После каждого нокдауна вы можете зафиксировать положение опущенных кеглей и отправить их другому пользователю с помощью PubNub. Таким образом вы можете копировать экран одного игрока на экраны других игроков. В нижеприведенном коде вы можете увидеть, что значения положения и вращения контакта 1 передаются другим игрокам с помощью PubNub. В подобных строках можно передавать значения вращения и положения всех контактов через PubNub.

Переключение между статическим и динамическим телами

Раньше мы использовали aframe-physics-system для превращения объектов A-Frame в динамические тела. Когда игрок не катит мяч и просто копирует экран другого игрока, мяч не должен быть динамичным телом, чтобы избежать падения лишних кеглей.

Когда наступает черед текущего игрока, для динамики установлено значение true, а dynamic-body свойства прилагаются.

Когда не наступает черед игрока, динамика устанавливается на false, а dynamic-body свойства удаляются.

Игрок 2

После того, как вы закончите публиковать данные через PubNub на экране Player 1, вы можете прочесть данные, подписавшись на канал PubNub.

Когда PubNub получает данные, связанные с положением и вращением упавших кеглов, вы можете установить атрибут кегл на экране игрока 2 на те же значения, что и игрок 1, и, следовательно, сделать два экрана идентичными.

Вывод

Поздравляю! Каждый раз, когда вы бросаете мяч на экране игрока 1, вы видите, что экран игрока 2 повторяет все движения. Теперь вы можете вернуть это, опубликовав данные игрока 2 назад в игрока 1 и превратив свою игру в полнофункциональную игру для двух игроков. Его также можно превратить в многопользовательскую игру. Счастливые игры VR!

Полный репозиторий кода GitHub можно найти здесь.

Первоначально опубликовано на www.pubnub.com.

Добавить комментарий

Ваш адрес email не будет опубликован.