Хотя топ-компании из сферы разработки компьютерных игр не используют JavaScript в качестве одного из основных языков, сама идея использовать его для геймдева не такая уж безумная. В последние несколько лет браузеры и мобильные устройства стали включать в себя такие функции, как WebGL, чтобы расширить возможности графики.
Поскольку производители браузеров делают их доступными для разработчиков через API JS, мы можем создавать продвинутые игровые возможности прямо в браузере.
Перевели статью Фернандо Доглио со списком игровых библиотек для каждого разработчика JS, желающего заняться разработкой игр, пусть даже в качестве хобби.
Выбор лучшей библиотеки или движка полностью зависит от вас. Вы — единственный, кто знает, какую игру хотите создать, и какой у вас уровень понимания внутренней архитектуры игры. Выбирайте те инструменты, которые выглядят наиболее подходящими для ваших потребностей и вашего уровня. Итак, поехали!
1. GDevelop
GDevelop предоставляет отличный набор инструментов для любых пользователей — от новичков до продвинутых.
Судя по рекламным заявлениям, платформа позволяет создать игру любого типа, однако, этот игровой движок в первую очередь нацелен на создание 2D-игр, таких как платформеры, шутеры и обычные 8-битные игры.
В качестве дополнительного бонуса GDevelop дает возможность экспорта в различные платформы, такие как Android, iOS, Facebook Instant Games и другие.
Это вариант для тех, кто заинтересован в создании работающих игр, которые можно экспортировать и продвигать в различных платформах, но не хочет углубляться в вопросы геймдева, например, разбираться в низкоуровневой архитектуре игрового движка.
2. melonJS
Еще один игровой движок для 2D-игр. Подключая эту библиотеку к своему коду, вы получаете доступ ко всем фичам, таким как поддержка физики, столкновения, спрайты и другие, важные в действительно стоящих играх.
Хотя документация может быть не самой лучшей из имеющихся, вокруг продукта создано много юзер-контента, помогающего понять, что вам делать. Я, конечно, тоже внес свой вклад в это, написав такие статьи (на англ. — прим. переводчика):
- Создание игр в слова с использованием melonJS
- Передвижение между экранами в игре с помощью melonJS
- Продвинутые движения 2D вместе с melonJS
Эта библиотека очень дружелюбна к новичкам, но в то же время очень мощная. Хороший выбор, если вы думаете о создании 2D-игры и геймдев для вас в новинку.
3. ImpactJS
ImpactJS — игровой движок JavaScript, в основном ориентированный на разработку 2D-игр, как и библиотеки выше. Но есть плагины, которые вы можете добавить в Impact для имитации 3D-среды, например как здесь:
Интересно отметить: Impact поставляется с несколькими дополнительными инструментами, такими как редактор уровней для любой 2D-игры, мощный дебаггер, а также очень интересный фреймворк для публикаций Ejecta, позволяющий размещать игры в iPhone App Store.
4. BabylonJS
Невероятно мощный движок веб-рендеринга. Это не игровой движок или игровая библиотека, но вы можете создавать игры на его основе. Поскольку это движок рендеринга, а не библиотека для игр, у вас будет доступ к низкоуровневому функционалу, в частности связанному с визуализацией.
Вы сначала строите свой движок, а потом уже игру, поэтому у вас есть контроль над тем, что и как происходит. Это здорово для продвинутых создателей игр, но если вы не из них, разработка с помощью BabylonJS может быть контрпродуктивной. Посмотрите на этот пример — он выглядит изумительно. Но взгляните на счетчик линий кода слева — более 1000 строк всего лишь для демки:
Возможно, это ничего, если учесть, сколько кода содержится в топовых играх в наши дни. Если думаете, что будет желание и время писать такой код, то это прекрасный бесплатный инструмент для получения потрясающих результатов. В противном случае держитесь от него подальше.
5. PhaserJS
Это крутой игровой движок, созданный сообществом и готовый для всех ваших десктопных и мобильных задумок. Он поддерживает как WebGL, так и Canvas для устройств, не поддерживающих WebGL, ориентирован на разработку 2D-игр.
Сам фреймворк является бесплатным и поставляется со всем нужным для создания игр, кроме того, существуют плагины, которые можно добавить к нему, чтобы получить улучшенные или дополнительные функции. Однако такие плагины не бесплатны.
6. PixiJS
PixiJS — удивительно гибкая и мощная библиотека для 2D-визуализации. Она работает с WebGL и предназначена для создания красивых веб-интерфейсов, которые необязательно должны становиться играми. Хотя библиотека поддерживает ряд игровых элементов, такие как спрайты, текст и даже некоторые продвинутые, например шейдеры.
При этом вам нужно создать свой собственный физический движок, придется позаботиться об обнаружении столкновений и другой игровой механике, например — о проверке правильности построения игрового цикла.
Это хороший вариант, если вы не создаете сложную игру и вас больше беспокоят визуальные аспекты, нежели более сложные игровые механики.
7. PlayCanvas
Среда для разработки игр, которая целиком находится в вебе. Это означает, что вы используете ее как платформу для написания кода, тестирования, настройки своих сцен (у них сумасшедший подробный 3D-интерфейс на WebGL) и даже для экспорта игр в один клик.
Как и некоторые другие варианты, которые я рассматриваю в этом списке, PlayCanvas полностью совместим и готов к созданию VR-приложений, что, похоже, растущий тренд в области разработки игр.
Небольшой недостаток PlayCanvas — он не полностью бесплатный. Вы, естественно, можете использовать его на некотором бесплатном уровне и делать там публичные проекты, но забудьте о том, чтобы держать их в секрете или даже убрать их экран загрузки, пока вы не начали платить ежемесячную плату.
8. A-Frame
У некоторых из предыдущих вариантов есть совместимость с VR в качестве дополнительного функционала. А вот A-Frame был создан именно с учетом VR и AR. Это означает, что фокус всего фреймворка смещен.
Конечно, можно создавать на нем и 3D-игры, но максимальную пользу можно извлечь, если использовать WebXR-совместимые браузеры или даже экспериментальные фичи в последних версиях Chrome, обеспечивающие поддержку WebXR AR.
Поскольку A-Frame был разработан для использования в браузере, он имеет синтаксис, похожий на синтаксис HTML-верстки. Поэтому вместо того, чтобы сильно полагаться на JavaScript, он использует некоторые пользовательские элементы разметки, как видно здесь:
Этот фреймворк — отличный вариант, если вы заинтересованы в опыте с VR/AR вместо старых добрых 3D-игр. Поскольку A-Frame специально разработан для этого, он сделает вашу жизнь намного проще. Попробуйте!
9. PhysicsJS
Наконец, в качестве последнего варианта я хочу рассказать не о графически-ориентированном движке, а о чем-то другом. PhysicsJS, как видно из названия, фокусируется на физическом аспекте взаимодействия объектов. Вы можете использовать эту библиотеку для разработки игр или любого другого типа моделирования, которое вы захотите создать.
Как видно на демо-странице, эта библиотека готова к реализации некоторых интересных взаимодействий. Как написано в документации, вы можете использовать различные типы средств визуализации в зависимости от того, что вам нужно. Вы даже можете использовать PixiJS для рендеринга или создать собственный инструмент, если хотите интегрировать его с другими библиотеками из тех, о которых я говорил выше.
Эта библиотека может быть немного устаревшей, однако, законы физики совсем не поменялись, поэтому эффекты, которых можно достичь с помощью PhysicsJS, очень натуральны.
В общем — хорошее решение, если вы хотите добавить сложную физику в свою игру или пытаетесь создать собственный движок, используя различные библиотеки, например, PixiJS и другие. PhysicsJS поможет автоматически разрешать все типы взаимодействий 2D-физики, которые только понадобятся.
Оригинал статьи на VC.ru
Автор: Максим Слепов
Источник: https://mcs.mail.ru/blog/top-9-js-dvizhkov-i-bibliotek-dlya-igr-v-2020-godu
Что еще почитать по теме:
Поиск багов на фронтенде: 4 основных этапа
Когда фронтенд-разработчику стоит перейти с React на Vue, а когда это усложнит разработку
JavaScript: 10 новых фич в ES2020, о которых вам следует знать
