Топ-9 JS-движков и библиотек для игр в 2020 году

Команда Mail.ru Cloud Solutions перевела статью Фернандо Доглио о том, какие игровые библиотеки и движки можно считать лучшими для разработчика JavaScript.

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

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

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

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

Итак, поехали!

GDevelop предоставляет отличный набор инструментов для любых пользователей — от новичков до продвинутых.

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

В качестве дополнительного бонуса GDevelop дает возможность экспорта в различные платформы, такие как Android, iOS, Facebook Instant Games и другие.

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

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

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

• Создание игр в слова с использованием melonJS.
• Передвижение между экранами в игре с помощью melonJS.
• Продвинутые движения 2D вместе с melonJS.

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

ImpactJS — игровой движок JavaScript, в основном ориентированный на разработку 2D-игр, как и библиотеки выше. Но есть плагины, которые вы можете добавить в Impact для имитации 3D-среды, например как здесь:

Интересно отметить: Impact поставляется с несколькими дополнительными инструментами, такими как редактор уровней для любой 2D-игры, мощный дебаггер, а также очень интересный фреймворк для публикаций Ejecta, позволяющий размещать игры в iPhone App Store.

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

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

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

Это крутой игровой движок, созданный сообществом и готовый для всех ваших десктопных и мобильных задумок. Он поддерживает как WebGL, так и Canvas для устройств, не поддерживающих WebGL, ориентирован на разработку 2D-игр.

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

PixiJS — удивительно гибкая и мощная библиотека для 2D-визуализации. Она работает с WebGL и предназначена для создания красивых веб-интерфейсов, которые необязательно должны становиться играми. Хотя библиотека поддерживает ряд игровых элементов, такие как спрайты, текст и даже некоторые продвинутые, например шейдеры.

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

Среда для разработки игр, которая целиком находится в вебе. Это означает, что вы используете ее как платформу для написания кода, тестирования, настройки своих сцен (у них сумасшедший подробный 3D-интерфейс на WebGL) и даже для экспорта игр в один клик.

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

Интересно отметить: небольшой недостаток PlayCanvas — он не полностью бесплатный. Вы, естественно, можете использовать его на некотором бесплатном уровне и делать там публичные проекты, но забудьте о том, чтобы держать их в секрете или даже убрать их экран загрузки, пока вы не начали платить ежемесячную плату.

У некоторых из предыдущих вариантов есть совместимость с VR в качестве дополнительного функционала. А вот A-Frame был создан именно с учетом VR и AR. Это означает, что фокус всего фреймворка смещен.

Поскольку A-Frame был разработан для использования в браузере, он имеет синтаксис, похожий на синтаксис HTML-верстки. Поэтому вместо того, чтобы сильно полагаться на JavaScript, он использует некоторые пользовательские элементы разметки, как видно здесь:

Кому подходит. Этот фреймворк — отличный вариант, если вы заинтересованы в опыте с VR/AR вместо старых добрых 3D-игр. Поскольку A-Frame специально разработан для этого, он сделает вашу жизнь намного проще. Попробуйте!

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

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

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

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

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

Что еще почитать по теме:

• Поиск багов на фронтенде: 4 основных этапа.
• Когда фронтенд-разработчику стоит перейти с React на Vue, а когда это усложнит разработку.
• Наш Telegram-канал о цифровой трансформации.