Хотя игры AAA-уровня не создаются на JavaScript, этот язык—один из основных при разработке (например, для создания интерфейса). Однако идея разработки игр на чистом JavaScript не является безумной. 

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

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

Не пугайтесь, программа не только для MacOS

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

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

Совершенно иная стилистика, не находите?

MelonJS  еще один 2D-ориентированный игровой движок. Включив библиотеку в свой проект, вы получаете доступ ко всем видам функций, необходимых для любой игры, таким как поддержка физики, коллизий, спрайтов и многого другого. Хотя документация MelonJS далековата от идеала, существует множество пользовательских руководств (англоязычных), которые помогут вам понять, что и как нужно делать. Вот несколько примеров:

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

По большей части 2D

ImpactJS  игровой JavaScript-движок, ориентированный в основном на разработку 2D-игр, как и вышеперечисленные библиотеки. При этом есть плагины, которые вы можете добавить в Impact для имитации трехмерной среды. Impact поставляется с несколькими стандартными инструментами, такими как редактор уровней для любой 2D-игры, мощными инструментами отладки и очень интересной средой публикации под названием Ejecta, которая позволяет опубликоваться в AppStore.

Не игровой движок или библиотека, но рядом

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

Используя BabylonJS, вы сначала создаете свой движок, а затем саму игру. Благодаря такой последовательности вы полностью контролируете, что происходит. Отлично подходит для опытных пользователей, но если вы не один из них, переход на BabylonJS может быть контрпродуктивным. Посмотрите на этот пример, он выглядит потрясающе. А теперь взгляните на количество строк исходного кода слева: более 1 тыс. строк для демонстрации.

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

У ребят хитрая система монетизации

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

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

2D-визуализация

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

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

Здесь даже VR есть!

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

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

А здесь не только VR

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

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

Пример кода

Если вам нужен инструмент, заточенный под VR/AR, то выбирайте именно этот фреймворк.

Прекрасный инструмент для создания физики

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

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

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

C вами был Kheruk, подготовлено по материалу medium специально для TGM — Tesall Game Magazine.

11

Комментарии

Добавить комментарий

На картинке, это не я, если вдруг что)

Воу, столько библиотек и всё для JS.

Кто-нибудь из местных пробовал что-нибудь из этого?

Zerlingo, щупал возможности A-Frame (импортировал и таскал модельки, работал с материалами и просто создавал свою трёхмерную сцену для теста в VR Box). Создавать какие-то "игры" в подобном инструментарии нелегко, но склепать свою интерактивную сценку можно без особых трудностей.

лютого трэшака новость... ;)
А не забить ли гвоздь микроскопом? А не изучить ли живой организм плоскогубцами?
ничто не ново.
В начале были игры на батниках
(например: cyberforum.ru/cmd-bat/thread1031910.html)
Хотя нет. Наврядли. И до них был свой технотрэш.
да, безжалостно и беспощадно. Но на что только не извращались ради лулзов :)
Правда есть и грустные реалии современности - когда там где натыкаешься на сей лютый изврат лулзы ловить уже совсем не в тему.
-----
Zerlingo, а особый смысл? Заглянуть, впечатлится технотрэшаком - да. Использовать? Зачем? Нет смысла. JavaScript - скриптовый язык мелких вспомогательных решений. Для продемонстрированного в принципе не предназначен. Работать конечно будет, но в особых условиях и очень плохо. А так... можно и тэтрис на скриптах Скайрима наваять. И не только тэтрис.
А возвращаясь к

возможности для создания игр прямо в браузере.

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

YourBunnyWrote
администратор
27.03.2020 — 21:29

Специально для этого есть Flash и Java.

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

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

Недавно гуглил игровые библиотеки и фрейморки на js. Для меня что ли? Совпадение?
На самом деле библиотек еще больше, из того что вспоминается: matter.js - хорошая 2д физика, excalibur.js - все сразу, create.js - несколько библиотек для создания игр и не только.

Будучи Senior JavaScript Monkey-coder подборкой заинтересовался, удивлён разнообразию инструментов, хотя понятно, что все браузерные игры с флеша на HTML5 перешли

Авторизуйтесь, чтобы оставить новый комментарий. Или зарегистрируйтесь.