Игра на близость, вдохновленная тральщиком.
Команда, которая подарила вам squoosh.app, вернулась! На этот раз мы создали веб-игру под названием PROXX ( proxx.app ). PROXX — это игра на близость, вдохновленная легендарной игрой Minesweeper. Действие игры разворачивается в космосе, и ваша задача — выяснить, где находятся черные дыры. Он работает на всех типах устройств — от настольных компьютеров до обычных телефонов. Пользователи могут играть в игру, используя мышь, клавиатуру, d-pad и даже программу чтения с экрана.
Наш базовый уровень
Прежде чем создавать эту игру, мы установили следующие цели и бюджеты для приложения:
- Один и тот же основной опыт : все устройства должны работать одинаково.
- Доступно : мышь, клавиатура, сенсорный экран, d-pad, программы чтения с экрана.
- Исполнитель :
- Менее 25 КБ исходной полезной нагрузки
- Менее 5 секунд TTI ( время взаимодействия ) при медленном 3G
- Постоянная анимация со скоростью 60 кадров в секунду
Веб-работники
Игра состоит из 4 основных объектов: основной игровой логики, службы пользовательского интерфейса, службы состояний и анимационной графики. Поскольку с самого начала мы знали, что нам придется запускать сильно анимированную графику в основном потоке, мы перенесли игровую логику и службу состояний в веб-воркер, чтобы сохранить основной поток как можно более свободным.
Предварительный рендеринг во время сборки
Наш пользовательский интерфейс создан с использованием Preact , поскольку он позволяет нам достичь нашей агрессивной цели при первоначальной полезной нагрузке менее 25 КБ. Чтобы обеспечить хорошее качество первоначальной загрузки, мы решили предварительно отрендерить наш первый вид. Мы выполняем предварительную визуализацию во время сборки, используя Puppeteer для доступа к верхней странице и позволяем preact заполнять DOM. Полученный DOM затем сериализуется в HTML и сохраняется как index.html.
Холст для анимации, (невидимый) DOM Для специальных возможностей
Мы визуализируем игровую графику на холсте с помощью WebGL . Один холст отвечает за фоновую анимацию, а другой — за игровую сетку сверху. У нас также есть HTML-таблица с кнопками из соображений доступности, которая находится поверх обоих холстов, но сделана невидимой (непрозрачность: 0). Несмотря на то, что вы видите холст-рендеринг состояния игры, игрок взаимодействует с невидимой таблицей DOM, что дает нам возможность подключать прослушиватели событий и полагаться на управление фокусом браузера.
Сохраняя элемент DOM на холсте, мы можем использовать встроенные в браузер функции специальных возможностей. Например: установив role="grid" в нашей игровой таблице, средства чтения с экрана могут объявлять строку и столбец выделенной ячейки без необходимости реализации этого.
Объединение для объединения и разделения кода
Наш общий размер приложения составляет 100 КБ в сжатом виде. Из них 20 КБ предназначены для начальной полезной нагрузки (index.html). Для этого проекта мы используем Rollup.js . У нас есть общие зависимости между основным потоком и нашим веб-воркером, и Rollup может поместить эти общие зависимости в отдельный фрагмент, который нужно загрузить только один раз. Другие упаковщики, такие как webpack, дублируют общие зависимости, что приводит к двойной загрузке.
Поддержка функциональных телефонов
Умные функциональные телефоны, такие как телефоны KaiOS, быстро набирают популярность. Это устройства с очень ограниченными ресурсами, но наш подход к использованию веб-работников, когда это возможно, позволил нам обеспечить высокую скорость реагирования и на этих телефонах. Поскольку функциональные телефоны имеют другой интерфейс ввода (крестовина и цифровые клавиши, без сенсорного экрана), мы также реализовали интерфейс на основе клавиш.
Что дальше
Мы отлично, но напряженно провели время, создавая эту игру к Google I/O 2019, поэтому мы возьмем заслуженный перерыв, чтобы отдохнуть, но планируем вернуться с более подробной документацией по каждой из этих областей игры. .
А пока посмотрите выступление Марико по этому проекту на I/O.
Вы можете просмотреть код в репозитории proxx на GitHub .
Ваше здоровье! Сурма, Джейк, Марико