Roll It — это эксперимент Chrome , который переосмысливает классическую игру про набережную, используя только браузер на вашем телефоне и компьютере. Браузер на вашем телефоне позволяет вам прицеливаться и катить мяч одним движением запястья, а браузер на вашем компьютере отображает графику переулка Roll It в реальном времени с помощью WebGL и Canvas. Два устройства взаимодействуют через веб-сокеты. Никаких приложений. Никаких загрузок. Никаких жетонов. Все, что вам нужно, это современный браузер.
Под руководством Google Creative Lab компания Legwork разработала пользовательский интерфейс, интерфейсы и игровую среду, а затем объединилась с партнером по разработке Mode Set для создания Roll It. За время реализации проекта возник ряд уникальных задач. В этой статье рассматриваются некоторые методы, которые мы использовали, приемы, которые мы обнаружили, и уроки, которые мы извлекли, воплощая Roll It в жизнь.
3D-процесс
Поначалу одной из проблем было найти лучший способ перевести 3D-модели из нашего программного обеспечения в формат файлов, готовый для Интернета. После создания ресурсов в Cinema 4D модели были упрощены и преобразованы в низкополигональные сетки. Каждой сетке были присвоены определенные теги выбора полигонов, чтобы различать части объекта для окраски и текстурирования. Затем мы смогли экспортировать файл Collada 1.5 (.dae) и импортировать в Blender , 3D-программу с открытым исходным кодом, чтобы создать совместимые файлы для Three.js. Убедившись, что наши модели импортированы правильно, мы экспортировали сетку в виде файла JSON, а освещение было применено с помощью кода. Вот более подробный обзор шагов, которые мы предприняли:
Написание кода
Roll It был разработан с использованием библиотек с открытым исходным кодом и изначально работает в современных браузерах. Благодаря таким технологиям, как WebGL и WebSockets, Интернет приближается к игровым и мультимедийным возможностям консольного качества. Легкость и комфорт, с которыми разработчики могут создавать эти возможности, значительно возросли по мере того, как для разработки HTML стали доступны более современные инструменты.
Среда разработки
Большая часть исходного кода Roll It была написана на CoffeeScript — чистом и лаконичном языке, который транскомпилируется в хорошо сформированный код JavaScript. CoffeeScript отлично подходит для ООП-разработки благодаря своей великолепной модели наследования и более четкому управлению областью действия. CSS был написан с использованием инфраструктуры SASS , которая предоставляет разработчику ряд отличных инструментов для улучшения таблиц стилей проекта и управления ими. Добавление этих систем в процесс сборки требует некоторого времени для настройки, но результат определенно того стоит, особенно для более крупного проекта, такого как Roll It. Мы настроили сервер Ruby on Rails для автоматической компиляции наших ресурсов во время разработки, поэтому все этапы компиляции стали прозрачными.
Помимо создания оптимизированной и удобной среды кодирования, мы вручную оптимизировали ресурсы, чтобы минимизировать количество запросов и ускорить загрузку сайта. Мы прогнали каждое изображение через пару программ сжатия — ImageOptim и ImageAlpha . Каждая программа оптимизирует изображения по-своему — без потерь и с потерями соответственно. При правильном сочетании настроек они могут значительно сократить размер файла изображения. Это не только экономит пропускную способность при загрузке внешних изображений, но и после оптимизации ваши изображения будут преобразованы в гораздо меньшие по размеру строки в кодировке Base64 для встроенного встраивания в HTML, CSS и JavaScript. Говоря о кодировке base64, мы также встроили файлы шрифтов Open Sans WOFF и SVG непосредственно в CSS, используя эту технику, что привело к еще меньшему общему количеству запросов.
3D-сцена с поддержкой физики
THREE.js — это вездесущая библиотека 3D JavaScript для Интернета. Он включает в себя низкоуровневые 3D-математические вычисления и аппаратную оптимизацию WebGL, которые позволяют простым смертным легко создавать хорошо освещенные и красивые интерактивные 3D-сцены без необходимости писать собственные шейдеры или выполнять матричные преобразования вручную. Physijs — это оболочка, специфичная для THREE.js, для популярной физической библиотеки C++, переведенной на JavaScript. Мы воспользовались этой библиотекой для симуляции катания, прыжков и отскока мяча к месту назначения в 3D.
С самого начала мы стремились не только сделать физический опыт катания мяча реалистичным, но и сделать так, чтобы объекты в игре казались реальными. Это потребовало многих итераций настройки общей гравитации сцены Physijs, скорости мяча, когда он катится от броска игрока, наклона прыжка по дорожке, а также свойств трения и восстановления (подпрыгивания) мяча и материалов дорожек. Сочетание большей гравитации и большей скорости привело к более реалистичному игровому процессу.
Сглаживание этого
Большинство современных комбинаций браузера и видеокарты должны использовать преимущества встроенного аппаратного сглаживания в среде WebGL, но некоторые из них не будут работать хорошо. В случае, если сглаживание не работает изначально, любые резкие и контрастные края в сцене THREE.js будут неровными и некрасивыми (по крайней мере, на наш проницательный взгляд).
К счастью, есть решение: с помощью фрагмента кода мы можем определить, будет ли платформа поддерживать сглаживание изначально. Если это так, то мы готовы идти. Если нет, то в комплекте THREE.js имеется ряд шейдеров постобработки, которые могут нам помочь. А именно, фильтр сглаживания FXAA. Перерисовывая визуализированную сцену в каждом кадре с помощью этого шейдера, мы, как правило, получаем гораздо более гладкий вид наших линий и краев. Посмотрите демо ниже:
// Check for native platform antialias support via the THREE renderer
// from: http://codeflow.org/entries/2013/feb/22/how-to-write-portable-webgl/#antialiasing
var nativeAntialiasSupport = (renderer.context.getParameter(renderer.context.SAMPLES) == 0) ? false : true;
Управление игрой на основе акселерометра
Большая часть волшебства Roll It's исходит из жеста катания мяча, который игрок выполняет с помощью телефона. Мобильные устройства уже давно имеют доступ к акселерометру в браузере, но мы, как отрасль, только начинаем изучать распознавание жестов на основе движения в Интернете. Мы несколько ограничены данными, которые предоставляет акселерометр телефона, но, проявив немного творчества, мы можем придумать несколько замечательных новых впечатлений.
Обнаружение крена. Основной жест «прокрутки» начинается с отслеживания 10 последних обновлений акселерометра, которые происходят в результате события deviceorientation в окне. Вычитая предыдущее значение наклона из текущего значения наклона, мы сохраняем разницу угла между событиями. Затем, постоянно суммируя последние десять угловых дельт, мы можем обнаружить непрерывное вращение при движении телефона в пространстве. Когда телефон проходит порог изменения угла поворота, мы запускаем крен. Затем, найдя наибольшую дельту одиночного наклона в этом проходе, мы можем оценить скорость мяча. В Roll It эта скорость нормализуется с помощью временных меток, которые мы прикрепляем к каждому обновлению акселерометра. Это помогает сгладить переменную скорость передачи обновлений акселерометра в браузер на разных устройствах.
Связь через веб-сокеты
Как только игрок катает мяч на своем телефоне, с телефона на ноутбук отправляется сообщение с просьбой запустить мяч. Это «прокатное» сообщение отправляется через объект данных JSON через соединение WebSocket между двумя компьютерами. Данные JSON небольшие и в основном состоят из типа сообщения, скорости броска и направления прицеливания.
{
"type": "device:ball-thrown",
"speed": 0.5,
"aim": 0.1
}
Вся связь между ноутбуком и телефоном происходит посредством таких небольших сообщений JSON. Каждый раз, когда игра обновляет свое состояние на рабочем столе или пользователь наклоняет или нажимает кнопку на телефоне, между компьютерами передается сообщение WebSocket. Чтобы сделать эту связь простой и удобной в управлении, сообщения WebSockets передаются с использованием единой точки выхода из любого браузера. И наоборот, в принимающем браузере имеется одна точка входа, при этом один объект WebSocket обрабатывает все входящие и исходящие сообщения на обоих концах. При получении сообщения WebSocket данные JSON ретранслируются в приложении JavaScript с помощью метода trigger() jQuery. На этом этапе входящие данные ведут себя так же, как любое другое пользовательское событие DOM, и могут быть получены и обработаны любым другим объектом в приложении.
var websocket = new WebSocket(serverIPAddress);
// rebroadcast incoming WebSocket messages with a global event via jQuery
websocket.onmessage = function(e) {
if (e.data) {
var obj = JSON.parse(e.data);
$(document).trigger(data.type, obj);
}
};
// broadcast outgoing WebSocket messages by passing in a native .js object
var broadcast = function(obj) {
websocket.send(JSON.stringify(obj));
};
Серверы Roll It WebSocket создаются «на лету», когда два устройства синхронизируются с игровым кодом. Бэкэнд для Roll It был построен на платформе Google Compute Engine и App Engine с использованием Go .
Наклоняемые экраны меню
Помимо сообщений WebSocket, управляемых событиями, используемых во время игры, меню в Roll It управляются наклоном телефона и нажатием кнопки для подтверждения выбора. Для этого требуется более последовательный поток данных о наклоне, передаваемый с телефона на ноутбук. Чтобы уменьшить пропускную способность и избежать отправки ненужных обновлений, эти сообщения отправляются только в том случае, если наклон устройства изменился более чем на пару градусов. Нет смысла отправлять поток данных о наклоне, если телефон лежит на столе плашмя! Скорость передачи также ограничена — в Roll It отправляется не более 15 сообщений WebSockets в секунду, даже если устройство активно наклоняется.
После того как значения наклона получены на компьютере, они интерполируются с течением времени с помощью requestAnimationFrame , чтобы сохранить ощущение плавности. Конечным результатом является вращающееся меню и вращающийся шарик, указывающий на выбор пользователя. Когда телефон отправляет данные о наклоне, эти элементы DOM обновляются в реальном времени путем пересчета преобразования CSS внутри цикла requestAnimationFrame . Контейнер меню просто вращается, но шарик словно катится по полу. Чтобы добиться этого эффекта, мы реализуем базовую тригонометрию, чтобы связать координату x шара с его вращением. Простое уравнение: вращения = x / (диаметр * π).
Заворачивать
Ролл Это примета времени. Благодаря проектам с открытым исходным кодом, которые способствовали его развитию, вычислительной мощности устройств на наших столах и в наших карманах, а также состоянию Интернета как платформы, это действительно захватывающее и преобразующее время для общения в открытой сети. Всего несколько лет назад большая часть этих технологий существовала только в проприетарных системах, недоступных для свободного использования и распространения. Сегодня сложные впечатления можно реализовать с меньшими усилиями и большим воображением, поскольку мы каждый день создаем и делимся новыми кусочками головоломки. И так, чего же ты ждешь? Создайте что-то великое и поделитесь этим со всем миром!
