Игры на js примеры: Разработка игр на JavaScript: реально и безболезненно

создание одной и той же 3D-игры на обоих языках

Рассказывает автор блога Irrlicht3d 

Я написал один и тот же шутер от первого лица на JavaScript, а потом на C++. В этой статье опишу, как все это происходило.

Несколько лет назад, когда WebGL начал свое шествие по браузерам, у меня возникла идея — написать шутер от первого лица на JavaScript и HTML. Абсолютно безумная затея, но она сработала, и даже не очень лагала (попробуйте сами). В свободное время я понемногу модифицировал код, со временем игра обросла фичами и стала интересной.

JavaScript-версия: работает в браузере

Тем временем появился Electron (если кратко, инструмент, позволяющий соединить веб-приложение с браузером и запускать как нативное приложение). И я задумался: «Опа! Может, сделать настоящее нативное приложение из моей игры на WebGL? Засуну его в Electron, и дело в шляпе».

Я так и сделал. Получилось на удивление неплохо, настоящее приложение. Но результат работал не очень: хоть я и приложил много усилий, чтобы приложение работало именно как приложение, а не веб-сайт, но все равно недостатков была масса — большие задержки, отсутствие нормальной аппаратной поддержки, 3D, настроек полноэкранного режима, плохая блокировка курсора и еще куча всего.

Поэтому я решил переписать свою игру на C++. И правда — а почему нет-то? Наверное, и не слишком сложно будет — JavaScript-код моей игры основывался на 3D-движке CopperLicht (я его сам написал), у которого API почти как у 3D-движка IrrLicht (его тоже написал я), на котором и так основан мой игровой движок Framework CopperCube. Работы вроде не очень много — нужно только переписать игровую логику. Все остальное — окно, интерфейс, коллизии, шрифты, текстуры, звук, картинки, обработка файлов и другое — уже было написано, еще и API использовало очень похожее.

На портирование ушли недели, но в результате игра стала нативным Win32-приложением на C++. Можете скачать ее здесь.

Нативная версия на C++

Сравнение

Теперь у меня есть редкая возможность сравнить ход разработки одного и того же приложения на C++ и JavaScript. Разберу по пунктам.

Производительность

Сейчас вы очень удивитесь: производительность обеих реализаций не сильно различается (прим.

Даже самая ресурсоемкая часть — процедурная генерация домов и обнаружение столкновений физическим движком — не сильно лагали на JavaScript. Тормозит буквально раза в два больше, чем в C++-версии. Оптимизация выполнения JavaScript в Chrome меня очень впечатлила. К несчастью, все равно JavaScript-версия ощущается куда более медленной. Далее я объясню, почему.

Дьявол кроется в деталях

В реализации на C++ я мог контролировать любую деталь выполнения, любую мелочь. В JavaScript-версии во многих вещах я полагался на браузер — в этом и крылась проблема. На JavaScript процедурная версия едва заметно подлагивала из-за того, что некоторые вызовы WebGL имеют свойство ненадолго вешать браузер. Буквально на миллисекунды, но их очень много — поэтому игра «плыла», ощущалась очень медленной по ритму. Я написал несколько обходов для основных проблем, но с другими ничего сделать, увы, было нельзя.

Версия на JavaScript на моем компьютере выдавала тот же FPS, что и на C++ — около 120 кадров в секунду. Но ощущалась она очень, очень медленной. В зависимости от используемой ОС и железа компьютера браузер ведет себя сильно по-разному, и даже ввод иногда лагает.

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

В игровом коде есть два способа исполнения «игрового цикла»: requestAnimationFrame() и setInterval(). Одна из версий частично решает проблему скорости ввода на одних системах, другая — на других. От этого ситуация запутывается еще сильнее.

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

Скорость разработки

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

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

Итог

Если вы решите вдруг написать свой трехмерный шутер от первого лица, я настоятельно рекомендую делать это не на JavaScript/HTML/WebGL. Для встроенных в сайты мелких игрушек или прототипов они хороши, но сделать на них полноценный, да еще и нативный продукт нереально. Ну, по крайней мере, сейчас. Кто знает, вдруг через несколько лет все станет резко наоборот. Знаю много людей, которые с таким инструментарием делают двухмерные игры, и получается прекрасно.

Я решил продолжить работу над C++-версией. Надеюсь, что закончу в ближайшие месяцы. Вот тут можно понаблюдать за прогрессом: сайт игры.

Источник: блог Irrlicht3d

5 бесплатных open source движков для игр на JavaScript | GeekBrains

Выбираем простые в изучении, Facebook-совместимые и свободные движки для создания игр на JS и HTML5.

https://d2xzmw6cctk25h.cloudfront.net/post/1709/og_cover_image/d1d61d467f731daa8c6c57f9b9caf10c

Если вы только начали программировать и хотите написать мобильную и/или кроссплатформенную игру, беритесь за JS. Связка HTML+JavaScript работает везде. С фреймворками типа Electron на ней даже можно строить десктопные приложения.

Взгляните на 5 движков, с которым работа над игрой — в радость. Все они на момент написания статьи бесплатны и имеют открытый исходный код (open source). А еще — позволяют делать игры для Facebook. У каждого движка есть песочница, чтобы писать и тестировать код онлайн!

Для веб-разработчика создание HTML5-игры — повод ближе узнать Canvas и WebGL, поработать с 2D- и 3D-графикой в браузере. Это еще и урок оптимизации, ведь интерактивные красивости должны съедать как можно меньше памяти.

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

Для рендеринга PixiJS может использовать как WebGL, так и стандартный Canvas. Но первый работает заметно быстрее, особенно когда нужно одновременно анимировать сотни и даже тысячи объектов. Скорость достигается за счет того, что WebGL — инструмент низкоуровневый. А значит без дополнительных фреймворков кодить для него трудоемко: нужно прописывать каждую мелочь в управлении текстурами и шейдерами. И здесь на сцену выходит PixiJS, который берет это на себя.

Тест производительности — разработчики назвали его Bunnymark. Вы можете сотнями добавлять на сцену шустрых разноцветных кроликов и следить, как меняется кадровая частота (FPS) — то есть как быстро идет рендеринг. На слабеньком нетбуке я получила частоту 29–30 кадров в секунду даже при безостановочном насыпании 25 000 кроликов на сцену. При этом анимация уже добавленных прыгунов быстро восстанавливалась до скорости 30 кадров секунду даже при наличии 75 000 мелких кролей на экране. На хорошей машине можно получить FPS на уровне 40–60+. Показатели зависят от видеокарты и браузера.

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

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

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

Сообщество: живое и общительное — обитает в основном на форуме HTML5GameDevs, куда можно обращаться с вопросами.

Плюсы: Стабильно быстрый 2D-рендеринг даже на слабых машинах (при условии, что браузер поддерживает WebGL). Низкоуровневость — ниже только чистый JS, так что работа движка очень прозрачна. Кроссплатформенность, поддержка тачскрина. Удобная песочница, подробная документация на английском языке, понятный вводный курс для новичка. Движок хорош для создания небольших казуальных 2D-игр для мобильных устройств и ПК.

Минусы: в сравнении с движками, заточенными именно под игры, предлагает меньше инструментов «из коробки». Мало руководств на русском языке.

Игровой движок для настольной и мобильной разработки на JS и TypeScript. Работает на основе PixiJS — использует его для визуализации сцен. Следовательно, опирается на тот же шустрый WebGL с возможностью отката на Canvas в устаревших браузерах.

Сейчас параллельно существуют две версии движка: Phaser 2 и Phaser 3. «Трешка» увидела свет 13 февраля 2018 года. По заявлению разработчиков, они полностью переписали движок, чтобы придать ему модульную структуру и сделать data-ориентированным. Знакомство с новой версией пока осложняется нехваткой документации и действующих примеров. Но работа в этом направлении идет полным ходом: уже есть базовое руководство, урок «Делаем первую игру на Phaser 3» и экспериментальная лаборатория примеров. Примеры пока с дисклеймером «Извините, может не работать». Поэтому когда люди сегодня говорят о Phaser, они обычно имеют в виду Phaser 2.

Песочница отличается фантастическим числом интерактивных примеров и заготовок — на момент написания статьи их 685! Это гораздо больше, чем у PixiJS и большинства других движков. Код можно быстро скачать в виде .zip- или .tar.gz-файлов или клонировать в GitHub. Также доступны такие фишки, как мобильный предпросмотр сцены и сменные темы оформления для редактора кода.

Игровая витрина с проектами пользователей — быстрый способ оценить возможности движка и вдохновиться на что-то свое. Можно отдельно вывести игры с пометкой STAFF PICK («Выбор команды [Phaser]»).

Исходники: на GitHub.

Сообщество: большое и активное. Для общения есть каналы в Slack и Discord, а также ветки по Phaser 2 и 3 на форуме HTML5GameDevs. Новости можно узнавать в Twitter и из еженедельной рассылки. На русском языке уроков и статей хоть и не море, но больше, чем о PixiJS. Например, на хабре есть любопытные статьи «Разработка браузерной онлайн-игры» и «Обучающая игра за неделю, или попытка таймкиллера по английскому».

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

Минусы: последняя версия — Phaser 3 — еще сырая. Плагины и утилиты к движку стоят в среднем 20$ и поддерживают только Phaser 2. У второй версии движка есть неочевидные настройки, которые трудно изменить — например, скорость движения объектов автоматически подстраивается под FPS (см. статью «История участия в Game Jam» на хабре).

Вебинар GB: «Создание игр на JavaScript с помощью Phaser».

Для разработки браузерных 3D-игр этот фреймворк так же значим, как Pixi — для 2D. Работа с мешами, освещением, материалами, физикой, позиционным звуком — вот это все — продумано, задокументировано, снабжено интерактивными примерами. С Babylon можно делать игры для Android, iOS и десктопных браузеров. Наряду с JS поддерживается TypeScript.

Движок дружелюбен к новичкам, но без сюсюканья: вас не заманивают красивыми картинками. Первое, что радует глаз в разделе документации — интерактивный Get Started, который меняется в зависимости от выбора языка (JS/TS). Вы можете сходу оценить список возможностей и доступных расширений, поиграть с примерами, посмотреть видеоуроки — например, вводное занятие для начинающих (на английском с французским акцентом).

Для первого знакомства отлично подойдет пошаговый текстовый курс Babylon 101. Но это не для тех, кто хочет «мегаигру за 30 минут». Нужно быть готовым читать, вникать, экспериментировать.
У Babylon есть свой онлайн-редактор 3D-сцен, который подробно описан в разделе Resources (тег Editor). Там же вы узнаете, как подружить Babylon.js с Unity, Blender, Ionic Angular и ReactJS.

Песочница: у движка очень удобный редактор кода (Playground) с мгновенным предпросмотром и прослушиванием (если речь о звуке, в том числе позиционном). Здесь можно писать с нуля или редактировать код примеров и заготовок. Еще одна фишка песочницы — компонент Inspector для быстрой отладки кода.Также есть Sandbox — онлайн-просмотрщик 3D-сцен и моделей, куда можно перетаскивать файлы с жесткого диска.

Игровая витрина на главной странице движка содержит более 100 красочных сцен, игр и демонстраций.

Исходники: на GitHub.

Сообщество: активное — новые сообщения на форуме появляются каждый час. В Рунете по движку много уроков, статей и переводов. Пример с хабра: «Создание шейдеров на основе Babylon.js и WebGL: теория и примеры».

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

Минусы: требует времени на изучение, бывают ошибки при импорте 3D-моделей из Blender и Autodesk 3ds Max.

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

Лично мне нравится, что документация, инструкции по установке, примеры и справка по API доступны с одной страницы. Все это, включая комментарии в коде, добросовестно переведено на английский. НО! Языковой ступор настигает при запуске среды Egret Launcher — интерфейс на китайском. Спасают англоязычные руководства.

Параллельно с развитием 2D-движка готовится к релизу Egret Engine 3D. Пока оценить работу с трехмерной графикой можно только по приглашениям в режиме закрытого бета-теста. Из громких обещаний 3D-версии — плагин, конвертирующий заготовки из Unity 4 и 5 в сцены HTML5.

Песочница: простая и удобная — с ~50 примерами, предпросмотром на экране смартфона, возможностью быстро скачать свой код или сбросить изменения. Каждый пример также доступен по QR-коду.

Игровая витрина: около 20 разношерстных проектов, которые открываются по клику или QR, плюс еще десятка красочных мобильных игр — только по QR. Все на китайском, но казуалки интуитивно понятны (например, «Веселая Кухня»), чего не скажешь о карточной игре, комиксе-слайдере и сюрреалистическом непонятно-чем.

Исходники: на GitHub.

Сообщество: По сведениям разработчиков, 75% китайских игроделов, работающих с HTML5, используют Egret. Среда выполнения Egret-приложений за время существования движка была установлена более чем на 500 миллионах мобильных устройств. В Twitter и Facebook новости движка появляются минимум пару раз в месяц. На GitHub можно наблюдать жаркие дискуссии участников проекта — на китайском.

Плюсы: регулярные обновления, совместимость с инструментами Egret (визуальным редактором кода Egret Wing, анимационной платформой DragonBones, менеджером игровых ресурсов ResDepot и другими). Есть архив старых версий движка с описанием изменений на английском.

Минусы: интерфейс лаунчера и игр-примеров — на китайском. Лаунчер для Windows работает только с 64-битными системами. Заготовки в песочнице — очень простенькие, пока нет поддержки 3D. Документация или подробное описание на русском отсутствуют — единственная статья вышла на хабре в 2015 году.

Еще один перспективный китайский движок с амбициозной задумкой. Позволяет создавать 2D-, 3D-, AR- и VR-игры для Android, iOS, ПК и даже консолей! Да, приложения виртуальной реальности на JS — это неплохо придумано. Кстати, для этого движка можно еще писать на TypeScript и ActionScript.

Фишка в том, что вы пишете код один раз и можете получить результат в виде HTML5, Flash или мобильного приложения. Движок умеет работать с векторной графикой, растровыми шрифтами, скелетной анимацией, частицами, физикой. Еще он совместим с упомянутой выше системой анимации DragonBones. Есть свои средства работы со звуком — на основе OpenAL и HTML5 Audio.

LayaAir использует свой формат 3D-моделей (.lm). На сайте разработчика есть плагин для конвертации игровых объектов Unity3D в .lm-файлы. Об устройстве и настройке 3D-сцены в LayaAir читайте здесь, а о переносе сцен из Unity — тут.

У LayaAir своя IDE со встроенными редакторами кода, UI, сцен, покадровой анимации, частиц. Также в LayaAirIDE есть средства для упаковки игры во Flash или нативное приложение. Минус в том, что часть пунктов интерфейса в среде разработки не переведена. Контекстные меню, некоторые подсказки и названия закладок автоматически переводятся на русский или другой основной язык вашей системы. Сообщения и предупреждения в отладочной консоли — на английском. В итоге получаем такую картинку:

Если вы изначально пишете для мобильных устройств, скачайте набор LayaNative SDK, где есть средства тестирования и пересборки HTML5 для запуска на планшетах и смартфонах.

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

Песочница — более сотни примеров (в основном простеньких). Можно редактировать код «на лету». Интерфейс большей частью переведен на английский, а вот комментарии в коде остались на китайском.

Игровая витрина —  в Википедии пишут, что на движке сделана минимум сотня игр. На сайте представлено около 30 мобильных игр в 2D и 3D. К сожалению (для меня), все они на китайском языке и доступны после регистрации в игровой секции одного очень популярного китайского портала. Но есть и хорошие новости. Для оценки производительности в вашем браузере — смотрите демо в 2D, 3D и VR. Также можно заценить простенький шмап.

Сообщество: китайские товарищи общаются на форуме, который работает по принципу «Вопрос–ответ» и более-менее переводится Гугляндексом.

Исходники: на GitHub. Обратите внимание, что свободен только движок LayaAir, а весь фреймворк LayaBox с тонной дополнительных инструментов и примочек имеет лицензию Freeware.

Плюсы: поддержка 3D, виртуальной и дополненной реальности. Возможность создавать нативные приложения. Совместимость с Unity. Набор бесплатных дополнительных инструментов. Движок активно развивается.

Минусы: IDE на китайском (но есть англоязычная справка по настройке), сайт переведен частично и сыроват. Иногда посреди английского мануала тебя направляют в китайскую секцию сайта, хотя есть переведенная. Раздел Developers Community на момент написания статьи не работал. Материалов для новичков маловато: платные онлайн-курсы на китайском не в счет. На русском пока вообще ничего нет.

Что еще почитать/посмотреть о создании игр на JS

Вебинар «Разработка 2D-realtime игры на JavaScript» — работа на чистом JS — без фреймворков.

Вебинар «Пишем HTML5-арканоид на чистом JavaScript и Canvas» — создание игры с нуля за 2 часа.

Статья «6 интересных багов, с которыми я столкнулся, пока делал игру для „ВКонтакте”» — что бывает, когда отказался от PixiJS для рендеринга.

Вебинар «Основы работы с Immutable.js» — как JS-библиотека для работы с иммутабельными данными помогает делать игры.

Вебинар «Разработка без бюджета: что нужно знать, чтобы не потратить год жизни впустую».

Статья «Создаем игру для самых маленьких на Phaser в Intel XDK» — подробно описывает первые шаги в работе с движком, дает советы, где брать ресурсы.

Статья «Трехмерная графика в вебе» — о WebGL и библиотеках для работы с ним.

Вебинар «Как придумать популярную игру?» — не только на JS.

Статья «Многопользовательский онлайн-шутер на WebGL и asyncio» — клиентская часть на BabylonJS, серверная — на Python.

Лучшие игровые движки и библиотеки JS для геймдева

Хочешь проверить свои знания по JS?

Подпишись на наш канал с тестами по JS в Telegram!

Перевод статьи «9 Top JS Gaming Engines and Libraries for 2020».

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

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

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

1. Gdevelop

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

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

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

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

2. melonJS

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

Документация этого движка не самая лучшая, зато есть много созданного пользователями контента, на примере которого вы сможете понять, что к чему.

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

Этот движок я испытал лично, так что могу рекомендовать другим.

3. ImpactJS

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

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

4. BabylonJS

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

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

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

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

5. PhaserJS

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

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

6. PixiJS

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

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

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

7. PlayCanvas

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

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

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

8. A-Frame

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

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

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

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

9. PhysicsJS

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

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

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

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

Javascript Многопользовательская Игра-Проверка На Стороне Сервера.

Я начинаю создавать многопользовательскую игру, используя HTML 5 / Javascript.

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

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

Так что просто смотрю на что-то основное: два игрока бегают по пустой карте.

В настоящее время моя идея такова

Оба клиента (sockets.io) отправляют свои действия на сервер Node.JS, который затем отвечает координацией X/Y. Это прекрасно. Но очевидно, что оба клиента должны знать, где находится другой игрок.

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

Мой вопрос заключается в том, является ли это лучшим способом взаимодействия между двумя соединениями node.js, будет ли это достаточно быстро? Или есть Паттен дизайна для этой конкретной задачи, который мне не хватает?

спасибо

var games = {
  123019240: {
    players: {
      123: {x: 1, y: 1, name: 'Joe'},
      456: {x: 2, y: 2, name: 'Jimbob'}
    }
  }
};

// pseudocode
somegame.setBoardState(`
  x x x
  . . .
  . . .
`)

test/GameBuilder.js
import Game from '../src/Game'

class GameBuilder {
  constructor() {
    this.game = new Game()
  }

  withBoardState(state) {
    state = state
      .split('\n')
      .filter(item => !!item.trim())
      .map(item => item.trim().split(' '))

    state.forEach((item, i) => {
      item.forEach((symbol, j) => {
        if (symbol === 'x') this.game.acceptUserMove(i, j)
      })
    })
    
    // will allow us to chain methods
    return this
  }

  build() {
    return this.game
  }
}

export default GameBuilder

test/game.js
import GameBuilder from './GameBuilder'

// ...

it('Checks if user won by horizontal', () => {
  const game = new GameBuilder()
    .withBoardState(`
      x x x
      . . .
      . . .`)
    .build()

  const userWon = game.isWinner(userName)
  expect(userWon).to.equal(true)
})