5 основ для создания веб-игр

Nov 7, 2024
Элементы игрового процесса в SquadBlast

Эта веб-страница была переведена с помощью машинного перевода для вашего удобства. Мы не можем гарантировать точность или надежность переведенного контента. Если у вас есть вопросы о точности переведенного контента, обращайтесь к официальной английской версии веб-страницы.

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

Недавно мы наблюдали резкий рост вовлеченности игроков на веб-платформах, особенно на мобильных, и тренд не показывает признаков замедления. В 2023 году глобальный рынок браузерных игр сгенерировал примерно 15,03 миллиарда долларов США дохода. Несмотря на растущие жанры консольных и мобильных игр, в 2028 году ожидается, что сегмент вырастет до 22,33 миллиарда долларов США в годовом доходе.

Этот комплексный электронный учебник поможет как начинающим создателям, так и опытным разработчикам углубиться в понимание пяти основ для создания производительных веб-игр с использованием Unity Web. Это включает в себя закулисный взгляд на то, как популярные названия, такие как Готовься, стартуй, готовь!, Kasama: Пробуждение, SquadBlast и Проект Призматик ожили в сети.

Это охватывает следующие идеи:

1. Приоритизируйте планирование и прототипирование

2. Создайте динамический интерфейс пользователя

3. Создайте целостный аудиовизуальный опыт

4. Оптимизировать. Оптимизировать. Оптимизировать.

5. Примите множество веб-платформ

Касама Пробуждение

1. Приоритизируйте планирование и прототипирование

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

Очерчивание видения

Установка четкого видения помогает направлять команду на протяжении всего процесса разработки. Студия Stratton хотела расширить границы того, что можно достичь в браузерной игре как с точки зрения производительности, так и визуальной достоверности. Их цель заключалась в том, чтобы предоставить игрокам опыт лучшего класса, который мог бы соперничать с традиционными платформами в веб-среде.

«Это видение было якорем, который держал нас в согласии во время прототипирования и итерации и помогал нам делать последовательные, целенаправленные выборы на протяжении всего процесса разработки», — говорит Джош Ловеридж, управляющий директор Stratton Studios.

Проект Призматик 4K Тизер

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

«Мы начали с создания тестовой сцены с большим расстоянием прорисовки, что позволило нам оценить, сможем ли мы отобразить густую листву, разнообразный рельеф и сложные детали, которые были важны для эстетики игры», — говорит Ловеридж. Используя новый графический API WebGPU, мы протестировали сцену, чтобы убедиться, что она не только выглядела так же роскошно, как мы хотели, но и хорошо работала на разных устройствах.

Трейлер игрового процесса SquadBlast

Тестирование с начала

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

Оттуда мы быстро перешли к тестированию игроков. Даже с нашей ранней бета-версией мы представили её игрокам онлайн через такие сервисы, как Antidote, и на ранних бета-версиях на мероприятиях, таких как WASD Expo в Лондоне, — говорит генеральный директор и соучредитель Анатолий Ропотовс. — Это позволило нам проверить наши основные механики и получить немедленную обратную связь о том, что работало, а что нет.

Игровые элементы в Kasama: Пробуждение

Касама Пробуждение от PIGIAMA KASAMA

Команда PIGIAMA KASAMA поддерживает идею быстрого прототипирования и раннего тестирования идей. Создание Kasama: Пробуждение началось с определения персонажа и написания нарративного плана. Они хотели, чтобы история, главный герой и игровой процесс глубоко связались. Они начали с создания простой 3D-среды в Gravity Sketch VR, а затем перенесли её в Unity, чтобы построить и протестировать свою основную механнику головоломки.

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

Мы проходим через несколько итераций во время тестирования, пока команда не почувствует уверенность в том, что взаимодействия работают. Как только мы закрепили основной игровой процесс, мы перешли к концептуальному искусству, убедившись, что оно соответствует истории игры и общему настроению," говорит соучредитель PIGIAMA KASAMA Париде Стелла.

Игровой процесс из Project Prismatic

Проект Призматик от Страттон Студиос

Адаптация к препятствиям

Как это часто бывает в разработке игр, студия Stratton Studios скорректировала свое первоначальное видение, столкнувшись с техническими ограничениями и открыв лучшие идеи в процессе прототипирования.

Уточнение для обеспечения наилучшего возможного результата является частью творческого процесса. Например, одно значительное изменение, которое нам пришлось внести, касалось дизайна уровней, объясняет Ловеридж. Изначально мы представляли более открытые, свободные пространства, но по мере продвижения стало ясно, что этот подход не будет эффективно работать с системой отсечения окклюзий на гексагональных плитках, которую мы внедряли.

Игровой процесс из Project Prismatic

Проект Призматик от Страттон Студиос

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

Хотя хорошее планирование может уменьшить влияние проблем, возникающих в процессе разработки, важно помнить, что это не предотвратит полностью трудности на пути.

Элементы игрового процесса в Ready, Set, Cook!

Готовы, на старт, готовьте! от Coatsink

2. Создайте динамический интерфейс пользователя


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

Держим опыт игрока в центре внимания

Когда команда Coatsink начала разрабатывать Ready, Set, Cook!, они быстро поняли, что им нужно учесть много факторов для пользовательского интерфейса. С самого начала они беспокоились о том, чтобы как игроки, так и пользователи видеозвонков, не играющие в игру, могли участвовать. Им нужно было усовершенствовать существующую функциональность наблюдения, которая постоянно поддерживает игроков в сети, предлагая другим пользователям положительный опыт просмотра.

Элементы игрового процесса в Ready, Set, Cook!

Готовы, на старт, готовьте! от Coatsink

«Опыт наблюдения всегда был для нас в центре внимания при проектировании других аспектов игры», — объясняет Камиль Базидло, младший дизайнер в Coatsink. «Это не распространенная функция во всех жанрах игр на других платформах, но поскольку игроки находятся на видеозвонке, было важно подчеркнуть инклюзивное участие пользователей на протяжении всей игры.»

Они также начали обращать внимание на ориентацию экрана на раннем этапе. Поскольку игра изначально была создана для настольных ПК, она была разработана с альбомной ориентацией. Когда они перешли на мобильные устройства, им пришлось поддерживать как альбомный, так и портретный режимы. В Мессенджере игроки держат свои экраны как телефон, так как они находятся в видеозвонке, поэтому если телефон повернуть, камера наклоняется вбок, что не идеально. «Это было огромным соображением, когда мы проектировали окружения для поддержки этого», — говорит Росс Фурмидж, руководитель программирования Coatsink.

Элементы игрового процесса из SquadBlast

СквадБласт от ULTRAHORSE

Преодоление проблем с пользовательским интерфейсом

Одним из самых больших вызовов, с которыми столкнулась команда ULTRAHORSE, было создание игрового опыта, который был бы одинаково приятным как при использовании мыши и клавиатуры, так и контроллера или сенсорного экрана. Это было решающим для их видения создания поистине кроссплатформенной игры.

Сначала мы экспериментировали с различными игровыми стилями, но обнаружили, что многие традиционные форматы шутеров предпочитают один метод ввода другим. На самом деле, именно так мы пришли к формату бокового скроллера для SquadBlast," говорит Ропотов. Мы поняли, что 2D-плоскость позволяет точно нацеливаться с помощью мыши, интуитивно управлять с помощью контроллера и использовать простые, самообъясняющиеся сенсорные элементы управления на мобильных устройствах.

Элементы игрового процесса из SquadBlast

СквадБласт от ULTRAHORSE

Неожиданная проблема возникла, когда команда переходила от разработки для ПК к мобильной веб-разработке. Сначала они разработали полностью отшлифованный опыт работы с ПК, который был дополнен элементами наведения мыши в пользовательском интерфейсе. Это позволило им создать богатый, детализированный интерфейс, который использовал преимущества больших экранов и точного управления мышью. Они использовали подсказки, состояния наведения и более сложные структуры меню, чтобы передать информацию и варианты игроку.

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

Элементы игрового процесса из SquadBlast

СквадБласт от ULTRAHORSE

Настройка в зависимости от пространства экрана

Команда ULTRAHORSE также столкнулась с трудностями при проектировании с учетом сенсорных вводов. На ПК они могли предполагать точный контроль курсора, но на мобильных устройствах им приходилось учитывать менее точные нажатия пальцев и возможные ошибки клика. Это привело к тому, что они увеличили размеры элементов управления и сделали расстояние между элементами интерфейса более щедрым, что еще больше уменьшило количество информации, которую они могли отображать одновременно.

Они также обнаружили важность масштабируемых и гибких компонентов пользовательского интерфейса. Учитывая разнообразие размеров мобильных устройств и соотношений сторон, им нужно было, чтобы их пользовательский интерфейс плавно адаптировался к различным конфигурациям экранов и DPI. Это привело их к разработке более надежной системы пользовательского интерфейса, которая могла автоматически настраиваться в зависимости от доступного экранного пространства. Использование этого процесса упрощения для мобильного веба помогло улучшить SquadBlast интерфейс на всех платформах.

Элементы игрового процесса из Ready, Set, Cook!

Готовы, на старт, готовьте! от Coatsink

Переосмысление управления игрой

Готовы, на старт, внимание, марш! можно играть на широком спектре устройств с различными размерами экранов и соотношениями сторон, но область просмотра игры не растягивается на весь экран, так как она выделяет место для таких элементов, как видеопоток Meta и элементы управления платформой. Эти элементы не являются частью самого игрового приложения, поэтому они не отображаются в редакторе Unity, когда разработчики работают над игрой.

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

Элементы игрового процесса из Ready, Set, Cook!

Готовы, на старт, готовьте! от Coatsink

На мобильном устройстве элементы управления, специфичные для устройства, находятся внизу экрана. Поскольку игра была разработана с учетом альбомной ориентации, команда использовала нижнюю часть экрана для отображения некоторых элементов HUD, а не для критически важных игровых вводов.

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

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

Игровой процесс из Project Prismatic

Проект Призматик от Страттон Студиос

3. Создайте целостный аудиовизуальный опыт

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

Достижение более высоких уровней графической сложности

Команда Stratton Studios стремилась создать игру с высокой визуальной достоверностью и детализированной средой. Это требовало большей графической мощности и гибкости, чем WebGL мог предоставить.

Игровой процесс из Project Prismatic

Проект Призматик от Страттон Студиос

«WebGL, хотя и способен, имеет определенные узкие места в производительности и ограничения, такие как отсутствие вычислительных шейдеров и GPU-скелетной анимации, что заставило бы нас пойти на компромисс с нашим художественным видением», — говорит Ловеридж.

Они решили перейти на WebGPU, чтобы достичь гораздо более высокого уровня графической сложности, включая более продвинутое затенение, световые эффекты и сложные текстуры с помощью вычислительных шейдеров. Это позволило им создавать плотные, роскошные окружения и поддерживать стабильную высокую частоту кадров, даже в браузере.

Улучшенная производительность WebGPU, обусловленная возможностью дальнейшего использования графической карты устройств, была необходима для предоставления богатого, погружающего опыта, который они задумали, обеспечивая игрокам возможность наслаждаться игрой с уровнем детализации и плавности, обычно присущими настольным и консольным играм.

Игровой процесс из Project Prismatic

Проект Призматик от Страттон Студиос

Управление производительностью и WebGPU

Хотя WebGPU предлагал продвинутые возможности, необходимые команде Stratton Studios, он также представлял собой уникальный набор проблем, которые им пришлось решить, чтобы сохранить их художественное видение. Одним из основных вызовов было оптимизировать производительность на широком спектре устройств. Поскольку WebGPU все еще относительно новый, обеспечение стабильной производительности и совместимости потребовало значительной настройки, и они внедрили некоторые меры предосторожности.

Еще одной задачей было управление сложностью шейдеров и технологий рендеринга, которые они использовали. «Хотя WebGPU позволяет использовать более сложные техники рендеринга, такие как GPU-скелетная анимация и вычислительные шейдеры, также существует больший потенциал для узких мест в производительности, если с этим не обращаться осторожно», — говорит Ловеридж. "Нам пришлось тщательно оптимизировать наши шейдеры и упрощать их, чтобы гарантировать, что мы сможем предоставить высококачественную графику, не вызывая падения частоты кадров или других проблем с производительностью, таких как всплески сборки мусора (GC)."

Игровой процесс из Project Prismatic

Проект Призматик от Страттон Студиос

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

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

Игровые элементы в Kasama: Пробуждение

Касама Пробуждение от PIGIAMA KASAMA

Найти свет

«Хорошее освещение имеет огромное значение и его трудно достичь в веб-игре», — говорит Стелла, и команда PIGIAMA KASAMA хотела убедиться, что качество освещения соответствует остальной части игры.

Освещение также было ключевым элементом механики игры. Команда использовала это для создания напряжения, управления движением игроков и выделения важных областей или объектов в игре. Динамические эффекты подчеркивали ключевые моменты и переходы в истории. Мы хотели использовать запеченное освещение как можно больше. Это способ создать восприятие высококачественного освещения на платформах, которые обычно не предлагают такой степени точности," объясняет соучредитель Маттео Фанчин.

Одним из самых сложных вызовов для команды было изменение освещения в окружении без загрузки сцены и создание динамических изменений освещения при включении света. Они использовали пользовательский шейдер, который манипулировал световыми картами в реальном времени, чтобы сделать всё плоским и создать иллюзию динамического света. «Чтобы достичь этого, — говорит Стелла, — ключевым моментом является то, чтобы разработка игры и дизайн окружения рассматривались как единый процесс, а не разделялись.» Каждый элемент должен служить другому.

Снимок в редакторе команды PIGIAMA KASAMA, использующей Shader Graph для распространения черной слизи на карте

Снимок в редакторе команды PIGIAMA KASAMA, использующей Shader Graph для распространения черной слизи на карте

Они использовали Shader Graph для разработки пользовательского шейдера, который был особенно полезен во время того, что команда называет "последовательностью Ночного Мара". Он покрывает карту черной слизью, одновременно нейтрализуя освещение, делая окружающую среду черно-белой.

«Когда игрок включает свет, шейдер отменяет этот эффект, создавая иллюзию, что свет активируется и очищает черную слизь из освещенной области», — говорит Фанчин.

Из-за своих ограниченных ресурсов они также сделали некоторые художественные выборы для улучшения производительности. Они выбрали работать с темными областями, чтобы скрыть элементы, что помогло им оптимизировать количество полигонов и скиннед-решеток. «Мы добавили гораздо больше деталей в светлые области», — говорит Фанчин.

Игровые элементы в Kasama: Пробуждение

Касама Пробуждение от PIGIAMA KASAMA

Управление аудиопроизводственным процессом

В Касама: Пробуждение, аудио оказало влияние на всё, начиная от темпа игрового процесса и заканчивая дизайном окружения и взаимодействий. Это также направляет игроков, углубляя их эмоциональную связь с историей. Команда PIGIAMA KASAMA создала и произвела саундтреки, соответствующие настроению и темпу каждой серии. Они также работали с артистами озвучивания и наняли лингвиста, чтобы изобрести язык. Их целью было создать аудиовосприятие, которое усиливало бы погружающее качество игры.

Команда провела строгий трехступенчатый технический процесс для аудиопроизводства перед его реализацией.

Этап 1: Объединение и сведение/мастеринг аудиоклипов

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

Игровые элементы в Kasama: Пробуждение

Касама Пробуждение от PIGIAMA KASAMA

Этап 2: Конвертация формата в оптимизированные стандарты сжатия

На втором этапе оригинальные аудиофайлы высокого качества, обычно в форматах .AIFF и .FLAC, были преобразованы в формат .OGG. Это преобразование было выполнено с частотой дискретизации 48 кГц и глубиной битов 16 бит, в соответствии с отраслевыми стандартами для поддержания баланса между качеством звука и эффективностью работы. Кодек сжатия Vorbis был использован, что позволило значительно уменьшить размер файла без ущерба для воспринимаемого качества звука.

Этап 3: Реализация Unity и тонкая настройка

Финальный этап включал интеграцию обработанных аудиофайлов в Unity. Это включало тщательный отбор подходящих методов загрузки (например, потоковая передача для длинных треков или предварительная загрузка для критически важных звуковых эффектов) для оптимизации производительности во время игры. Настройки сжатия Vorbis были точно настроены для достижения оптимального баланса между аудиофиделити и использованием ресурсов.

Игровые элементы в Kasama: Пробуждение

Снимок в редакторе, показывающий тонкую настройку объема постобработки

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

Строгий процесс оптимизации, реализованный на заключительном этапе, привел к значительным улучшениям в хранении и производительности. Используя формат OGG и тонкую настройку параметров сжатия, аудиоресурсы были сжаты до примерно 10 МБ в общей сложности. Это означает значительное сокращение по сравнению с оценочными 500 МБ, если бы использовались не сжатые файлы AIFF, или 100 МБ для эквивалентов MP3. Эти результаты не только минимизировали общий размер игры, но и обеспечили эффективное использование памяти и плавную работу звука во время игры.

Элементы игрового процесса в Ready, Set, Cook!

Готовы, на старт, готовьте! от Coatsink

4. Оптимизировать. Оптимизировать. Оптимизировать.

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

Сокращение размера файла

Чтобы уменьшить размер файла, команда Coatsink использовала AssetBundles, архивный файл, содержащий специфичные для платформы не кодовые ресурсы. Они разместили их на внешнем сервере, а затем загрузили, когда сборка запустилась, чтобы помочь пользователям как можно быстрее попасть в лобби игры.

Они также использовали Addressable Asset System, чтобы загружать активы по запросу. Это помогло им разделить пакеты на группы, необходимые для различных частей игры, и значительно способствовало снижению времени загрузки на 25%.

Элементы игрового процесса в Ready, Set, Cook!

Готовы, на старт, готовьте! от Coatsink

«Таким образом, у нас есть минимальное количество активов для лобби, чтобы помочь игрокам войти раньше, минимальное количество для каждого уровня и несколько общих пакетов с общими активами для разных уровней», - объясняет разработчик Андрей М. Цель состоит в том, чтобы иметь как можно меньше файлов для загрузки, так как HTTP/2 не везде, и мы хотим, чтобы внутри было как можно меньше ненужных ресурсов.

Команда создала рабочий процесс, который помогал им определять, был ли пользователь на мобильном устройстве или на настольном компьютере, когда он запускал игру. В веб-шаблоне, во время загрузки, они могли определить, является ли устройство мобильным, и, если да, они изменили бы каталоги данных и ресурсов, чтобы использовать ресурсы, оптимизированные для платформы.

Мы создали свою собственную систему двойной сборки, которая произвела две версии, которые не были совершенно разными. Он ссылается на разные атласы и изменяет как тип сжатия, так и размер. Это два разных взгляда на активы, основанные на одной и той же кодовой базе," говорит Андрей М.

Игровой процесс из Project Prismatic

Проект Призматик от Страттон Студиос

Студия Страттон смогла значительно сократить как размеры файлов, так и время загрузки на протяжении всего процесса разработки. Изначально размер игры составлял примерно 400 МБ, что было слишком много для веб-опыта.

«В результате ряда оптимизаций, включая сжатие активов, разделение кода и использование системы адресуемых активов Unity, нам удалось успешно сократить начальный размер полезной нагрузки до 29 МБ», — объясняет Ловеридж.

Это резкое сокращение не только значительно сократило время загрузки, но и сделало Project Prismatic гораздо более доступным для широкой аудитории, обеспечивая более быструю начальную загрузку и более плавный общий игровой опыт.

Элементы игрового процесса из SquadBlast

СквадБласт от ULTRAHORSE

Команда ULTRAHORSE уменьшила начальный размер загрузочного пакета с 200 МБ до 133 МБ при запуске. Затем они разделили его на 21 МБ для обязательных пакетов и 112 МБ для пакетов по запросу. «Время загрузки ЦПУ более чем в три раза быстрее, чем в начале», — говорит Ропотов. Профилирование, оптимизация и отключение ненужных пакетов были большой частью этого.

Оптимизация времени загрузки

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

Они реализовали ленивую загрузку для несущественных ресурсов, что позволило игре сначала загружать критически важные компоненты, а затем по мере необходимости постепенно загружать дополнительный контент в фоновом режиме с помощью фреймворка Addressables.

Игровой процесс из Project Prismatic

Проект Призматик от Страттон Студиос

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

Фреймворк Cloud Content Delivery (CCD) Unity помог команде доставлять ресурсы с географически более близких серверов. Это снизило задержку и ускорило время загрузки для игроков повсюду, так как ресурсы загружаются в фоновом режиме.

Они обеспечили хранение активов локально на устройстве игрока после первой загрузки, что позволило значительно ускорить последующие времена загрузки. Команда также разделила код на более мелкие, более управляемые части, чтобы загружать только необходимый код для первоначального игрового процесса и чтобы дополнительные функции и модули загружались асинхронно.

Игровой процесс из Project Prismatic

Проект Призматик от Страттон Студиос

Тестирование и отладка инструментов

Чтобы решить проблемы с производительностью, с которыми они столкнулись при использовании WebGPU, команда Stratton Studios использовала Отладчик кадров, чтобы определить наиболее ресурсоемкие элементы, такие как текстуры высокого разрешения, сложные шейдеры и большие расстояния отрисовки. Оттуда они реализовали ряд оптимизаций, направленных на снижение нагрузки без значительной жертвы визуальному качеству.

«Мы использовали текстурные атласы, чтобы минимизировать количество загрузок текстур, уменьшили количество полигонов в менее критичных областях и использовали матовые картины для удаленных топологий, чтобы сэкономить на затратах на рендеринг», — говорит Ловеридж. Мы также применили техники уровня детализации (LOD), чтобы более эффективно управлять рендерингом удаленных объектов.

Игровой процесс из Project Prismatic

Проект Призматик от Страттон Студиос

Основной задачей было найти баланс между производительностью и визуальным качеством. «Сосредоточив внимание на оптимизации самых требовательных аспектов игры и разумно используя инструменты, доступные в Unity, мы смогли предоставить визуально насыщенный опыт, который хорошо работал на широком спектре устройств», — говорит Ловеридж. Этот подход позволил нам достичь наших художественных целей, обеспечивая при этом доступность и удовольствие от игры для всех игроков, независимо от их оборудования.

Чтобы отладить Проект Призматик, команда также полагалась на Unity Profiler, чтобы отслеживать свои показатели производительности, включая использование ЦП и ГП, распределение памяти и частоту кадров. Это помогло им определить узкие места в производительности и оптимизировать производительность игры, особенно в ресурсозатратных областях.

Наконец, Unity Cloud Diagnostics помог им собирать отчеты о сбоях и исключениях от пользователей на местах. Это дало им ценную информацию о проблемах, которые могли быть не замечены в процессе разработки.

Игровые элементы Kasama: Пробуждение

Касама Пробуждение от PIGIAMA KASAMA

5. Примите множество веб-платформ

Один совет, который мы слышим от экспертов студии снова и снова, это "встречать игроков там, где они есть." Разработка для веба дает вам возможность предложить игрокам легкий, быстрый и доступный игровой опыт. С большим количеством аппаратных опций, более быстрыми скоростями подключения и мощными устройствами в руках большего числа геймеров, чем когда-либо прежде, важно рассмотреть все ваши варианты развертывания на различных веб-платформах.

Тонкая настройка на разных платформах

В сотрудничестве с Spatial по многоплатформенному веб-релизу команда PIGIAMA KASAMA приняла Universal Render Pipeline (URP), предпочитаемую платформу. Гибкость и эффективность рендерингового конвейера были особенно важны для команды при развертывании на веб-платформах, поскольку кроссплатформенная совместимость и настраиваемость помогли им легко масштабироваться.

Игровые элементы Kasama: Пробуждение

Касама Пробуждение от PIGIAMA KASAMA

Производительность можно оптимизировать для каждой платформы, даже на устройствах начального уровня, и разработчики могут использовать свои собственные шейдеры. Он создан для того, чтобы хорошо справляться в будущем. С точки зрения платформы Spatial, по мере того как мы начинаем поддерживать будущие версии Unity, мы ожидаем, что URP также будет поддерживаться там, - объясняет глава отдела по связям с разработчиками Spatial, Джейк Штейнерман.

Серверы Spatial создали индивидуальные сборки для каждой платформы. У них были разные целевые качества для определенных платформ. «Глубина резкости работает довольно хорошо на WebGL, но мы обнаружили, что она менее производительна на некоторых мобильных устройствах», — говорит Фанчин. С другой стороны, аудио на Android и iOS работает гораздо лучше. Мы могли бы лучше использовать фильтры и эквалайзер, аудиоинструмент, который позволяет разработчикам регулировать уровень громкости определенных частот в аудиоджереле, на Android, но это не сработало бы на WebGL.

Они настроили определенные элементы так, чтобы они соответствовали каждой платформе, в то время как другие были адаптированы специально для этой платформы. «Для WebGL мы использовали текстуру более высокого разрешения, так как экран обычно больше, и использовали текстуры более низкого разрешения на меньших мобильных экранах», — говорит Стелла. В целом, мультиплатформенный релиз прошел довольно гладко.

Игровой процесс из Project Prismatic

Проект Призматик от Страттон Студиос

Легкая отрисовка

Студия Страттон также использовала URP, чтобы найти баланс между производительностью и расширяемостью. Ключевой особенностью была способность URP легко создавать пользовательские проходы рендеринга. Эта гибкость позволила команде точно настроить процесс рендеринга в соответствии с их конкретными потребностями, оптимизировать определенные визуальные эффекты и реализовать пользовательские шейдеры, которые улучшили общий вид и ощущение игры, не жертвуя производительностью.

Я особенно оценил модульность URP, которая позволила нам включать или отключать определенные функции в зависимости от возможностей целевой платформы. Это упростило оптимизацию игры для различных устройств, сохраняя при этом единый визуальный опыт, - говорит Ловеридж.

Элементы игрового процесса из SquadBlast

СквадБласт от ULTRAHORSE

Получая выгоду от многоплатформенного релиза

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

«Имея SquadBlast доступным на вебе и других платформах, мы можем достичь гораздо более широкой аудитории. Игроки могут легко начать игру, не загружая и не устанавливая ничего, что значительно снижает барьер для входа," говорит Ропотов.

Распределение также является важным фактором для команды ULTRAHORSE, и наличие веб-версии открывает целый новый мир каналов, к которым команда иначе не имела бы доступа.

Элементы игрового процесса из SquadBlast

СквадБласт от ULTRAHORSE

Изначально они запустили SquadBlast на своем веб-портале на SquadBlast.com. Это дало им отличную площадку для быстрого итерационного процесса, получения немедленной обратной связи от игроков и внесения быстрых улучшений. Оттуда они расширились на более крупные порталы веб-игр, такие как CrazyGames, что стало революционным для команды.

Эти сайты имеют огромный охват – речь идет о десятках миллионов активных пользователей в месяц. Размещая SquadBlast на этих порталах, мы смогли представить нашу игру огромной аудитории, которую мы, возможно, никогда не достигли бы через другие каналы распространения," объясняет Ропотов.

Команда также видит возможности с другими платформами, которые встраивают веб-игры, такими как мессенджеры и социальные медиа. Как говорит Ропотов, "потенциальный охват здесь потрясающий, и значительно улучшенные оптимизации для мобильной веб-технологии с Unity 6 откроют целое новое поколение платформ для внедрения игр."

Игровой процесс из Project Prismatic

Проект Призматик от Страттон Студиос

Заключение

В этой электронной книге мы рассмотрели пять основ для создания успешных веб-игр. Мы спросили наших экспертов об их главном совете при разработке для веба.

“«Используйте аудиторию платформы. Наблюдательский опыт был ключевым для нас на протяжении всего дизайна. Это не распространенная функция, но поскольку игроки находятся на видеозвонке, было важно подчеркнуть инклюзивное участие пользователей на протяжении всей игры. ”

Kamil Bazydlo
Kamil Bazydlo - Coatsink
Junior Designer

“Чтобы создать захватывающую игру, определите увлекательную концепцию и вовлеките игровые механики. Примите простоту и сопротивляйтесь убеждению, что увеличенная сложность означает лучшую игру. Максимизируйте потенциал того, что у вас есть.”

Matteo Fanchin
Matteo Fanchin - PIGIAMA KASAMA
Cofounder

“Работайте с сообществом и следите за последними обновлениями WebGPU и лучшими практиками. Это обеспечит максимальное использование технологий. Оставайтесь адаптивными и сосредоточьтесь на оптимизации.”

Josh Loveridge
Josh Loveridge - Stratton Studios
Managing Director

“Совет для тех, кто только начинает: не переусердствуйте и не ограничивайте свою игру только одним соотношением сторон на всех устройствах. ”

Anatolijs Ropotovs
Anatolijs Ropotovs - ULTRAHORSE
CEO and Cofounder

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

Расширенные возможности с Unity 6

Главная цель Unity 6 — предоставить возможность быстрой и простой разработки игр непосредственно вам, где бы ни находились ваши игроки. Скачайте Unity 6 в Unity Hub.

Изучите электронную книгу

Заполните эту форму, чтобы получить доступ к последней электронной книге