Top 15: лучшие движки с открытым исходным кодом javascript

Хотя вопрос, если «Javascript медленный?» это очень субъективный вопрос, потому что он работает в браузере клиента или полностью зависит от аппаратного и программного обеспечения, на котором работает код JavaScript. Но о чем это все? современные браузеры имеют возможности, которые мы никогда бы не представили 5 или 10 лет назад. Используя JavaScript API WebGL, они могут полностью рендерить сложные 2D и 3D-графики, не полагаясь на сторонние плагины для браузера. Мы просто хотим подчеркнуть, что Javascript можно использовать для разработки веб-игр! не только 2D-игры, но и 3D-игры. Начиная с чистого JavaScript, это лучший способ получить глубокие знания о разработке веб-игр.

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

15. Магистральный игровой движок

Github

Пример игрового движка Backbone

Backbone Game Engine — это элементарный игровой движок HTML5 Canvas, созданный на основе Backbone. Специализируется на 2D-платформерах и оптимизировано для мобильных устройств. Backbone Game Engine был написан для запуска внутри CocoonJS Canvas +, поэтому вы можете превратить свою HTML5-игру в нативное приложение на iOS или Android.

  • Построен на магистрали. События, модели, коллекции, наследование и RESTful постоянство. Зачем изобретать велосипед?
  • HTML5 только холст. Нет jQuery, как можно меньше манипуляций с DOM.
  • Мобильный оптимизирован. Создан для работы на мобильных устройствах с прозрачным сенсорным экраном и поддержкой просмотра. Все оптимизировано для максимальных кадров в секунду (FPS).

14. DarlingJS

Github

Игровой движок DarlingJS

DarlingJS — это компонентный и основанный на сущностях игровой движок javascript с внедрением зависимостей и модульной архитектурой. Darling.js не стоит ни копейки. Код, лицензированный по упрощенной лицензии BSD. Вам нужно только отметить в источнике, что вы использовали Darling.js. И я буду очень рад, если вы дадите мне знать, что вы используете движок в своем проекте.

Внедрение зависимостей в Darling.js позволяет вам декларативно описать, как ваше приложение подключено. И любой компонент, который не соответствует вашим потребностям, может быть легко заменен. Разделяет функциональность и данные на отдельные системы и компоненты, которые в основном не зависят друг от друга. Таким образом, композиция используется вместо наследования. Также сгруппируйте компоненты и систему в модули, которые можно подключить к игровому приложению.

13. JawsJS

Github

JawsJS Демо-версия игрового движка

Jaws — это 2D-игра, основанная на HTML5. Сначала он занимался только холстом, но теперь также поддерживает обычные спрайты на основе DOM через тот же API.

Jaws хорошо подходит для «классических» игр с боковой / верхней прокруткой (на основе плиток или нет), где у вас есть несколько спрайтов с анимированными листами спрайтов. Jaws поставляется с базовым обнаружением столкновений rect-vs-rect / circle-vs-circle, которое хорошо работает в большинстве случаев. Если у вас есть тонны спрайтов (например, пуля, чёрт побери), вы, вероятно, захотите использовать физическую библиотеку, такую ​​как Box2D, или пространственное хеширование, например, четырехугольные деревья, чтобы ускорить процесс. Использование челюстей в Canvas делает столкновения идеальными по пикселям и относительно легкими в освоении. Если ваша игра сильно перегружена графическим интерфейсом, вы можете основывать свою игру на чистых HTML-элементах, а не на холст-спрайтах.

12. Enchant.js

Github

Enchantjs

Простой JavaScript-фреймворк для создания игр и приложений со следующими функциями:

11. Квинт

Github

Игровой движок Quintus

Quintus — это простой в освоении, увлекательный игровой движок JavaScript HTML5 для мобильных устройств, компьютеров и других приложений.

Движок Quintus — это игровой движок HTML5, разработанный для модульного и легковесного синтаксиса, дружественного к JavaScript. Вместо попытки встроить стандартную структуру движка ООП-игры в движок JavaScript HTML5, Quintus берет некоторые подсказки от jQuery и предоставляет плагины, события и синтаксис селектора. Вместо глубокой модели единственного наследования Quintus предоставляет гибкую модель компонентов в дополнение к традиционному наследованию, чтобы упростить повторное использование функциональности и обмен ею между играми и объектами.

10. Панда Двигатель

Github | Примеры

Panda Engine пример Flying Dog

Panda Engine — это бесплатный игровой движок HTML5 для мобильных и настольных систем с рендерингом Canvas и WebGL, он использует Pixi.js для рендеринга с супер быстрой скоростью.

С Panda Engine вы можете отслеживать события Google Analytics внутри вашей игры и другие интересные функции, такие как.

9. коварный

Github

Лукавый игровой движок

Crafty — это библиотека игр JavaScript, которая может помочь вам создавать игры в структурированном виде со следующими функциями:

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

Другие вкусности:

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

8. Stage.js

Github | Примеры

Breakout Game Stage.js

Stage.js — это 2D HTML5 библиотека JavaScript для кроссплатформенной разработки игр, она легкая, быстрая и с открытым исходным кодом.

Stage.js предоставляет DOM-подобную модель данных дерева для составления вашего приложения и внутренне управляет циклами рендеринга и рисования вашего приложения, а также обрабатывает и распределяет события мыши и касания по целевым узлам дерева.

Приложение Stage.js состоит из дерева узлов. Каждый узел прикреплен (преобразован) к своему родителю и имеет ноль, одну или несколько текстур изображения. Каждый цикл рендеринга состоит из тикающих и рисующих узлов дерева. При тикающих узлах приспосабливаются к последним обновлениям, а затем при рисовании каждый узел трансформируется в соответствии со своим закреплением и рисует свои текстуры. Рендеринг сохраняется и приостанавливается, когда нет изменений.

7. qiciengine

Github | Примеры

Dota qiciengine пример

Qiciengine — это бесплатная библиотека игрового движка JavaScript с полным набором веб-инструментов для создания игр HTML5. QICI Engine основан на бесплатном игровом фреймворке HTML5 с открытым исходным кодом Phaser, который использует Pixi.js для рендеринга WebGL и Canvas в настольных и мобильных веб-браузерах.

С QICI Engine создание HTML5-игр так же просто, как разработка веб-сайта, использование вашего любимого редактора кода, вашего любимого веб-браузера, использование языка JavaScript и всех лучших инструментов веб-разработки. QICI Engine заботится о сложности базовых технологий, поэтому вы просто сосредотачиваетесь на том, что важно, делая свою игру!

QICI Engine состоит из трех частей: QICI Core, QICI Widget и QICI Editor:

  • QICI Core: Библиотека игрового движка JavaScript, основанная на Phaser.
  • QICI Widget: Библиотека JavaScript UI для создания многофункционального приложения.
  • QICI Editor: Веб-редактор с Node.js сервер для ускорения разработки игр HTML5.

6. Kiwi.js

Github | Примеры

Киви игровой движок

Kiwi.js — это веселый и дружелюбный движок с открытым исходным кодом HTML5, некоторые люди называют его WordPress игровых движков HTML5.

Kiwi.js — самая простая в мире игровая платформа с открытым исходным кодом HTML5 для создания мобильных и настольных браузерных HTML5-игр. Их цель — невероятно быстрый рендеринг WebGL и дополнительные инструменты для создания серьезных игр профессионального качества. Они используют CocoonJS для публикации игр и создания приложений.

Ваши игры могут быть ориентированы как на canvas, так и на WebGL. Используйте canvas для старых браузеров и большинства мобильных браузеров. Используйте WebGL для новейших браузеров и совместно с Cocoon.js для создания быстрых собственных мобильных приложений. Вы можете легко и эффективно создавать игры для приложений для iOS, Android и Chrome, используя такие платформы, как CocoonJS и Chrome WebStore.

5. MelonJS

Github | пример

MelonJS Game Engine

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

  • Свежий легкий двухмерный спрайт-движок
  • Автономная библиотека (не зависит ни от чего, кроме браузера с поддержкой HTML5)
  • Совместим с большинством основных браузеров (Chrome, Safari, Firefox, Opera, IE) и мобильными устройствами
  • Движение устройства поддержка акселерометра
  • Высокий DPI автоматическое масштабирование
  • Поддержка многоканального звука HTML5 и Web Audio на поддерживаемых устройствах
  • Легкая физическая реализация для обеспечения низких требований к процессору
  • Алгоритм столкновения на основе полигона (SAT) для точного обнаружения и реакции
  • Быстрое обнаружение столкновений в широкой фазе с использованием пространственного разделения
  • Поддержка сторонних инструментов для определения физического тела (PhysicEditor, Physic Body Editor)
  • Расширенный математический API для вектора и матрицы
  • Tween Effects
  • Эффекты перехода
  • Базовый набор объектов Entity (будет расширен)
  • Объединение объектов
  • Основная система частиц
  • Основное управление анимацией
  • Поддержка стандартных таблиц и упакованных текстур (Texture Packer, ShoeBox)
  • Диспетчер состояния (для простого управления загрузкой, меню, параметрами, игровым состоянием)
  • Версия в формате мозаичной карты + интеграция 0.9.x для простого проектирования уровней
    • Загрузка несжатого простого, Base64, CSV и JSON XML-файла карты загрузки
    • Ортогональная, изометрическая и перспективная поддержка тайлакарты
    • Несколько слоев (несколько слоев фона / переднего плана, столкновения и изображения)
    • Поддержка нескольких Tileset
    • Настройки прозрачности Tileset
    • Альфа-настройки слоев
    • Поддержка объектов Rectangle, Ellipse, Polygon и Polyline
    • Кафельные объекты
    • Перевернутый повернутые плитки
    • Динамический порядок слоев и объектов / групп
    • Динамическая загрузка сущностей
    • Поддержка столкновений плиток на основе фигур
  • система растровые шрифты
  • Поддержка мыши и сенсорного устройства (с эмуляцией мыши)
  • Встроенная поддержка CocoonJS а также Ejecta
  • Поддержка асинхронных сообщений (minPubSub)
  • Основные элементы GUI включены
  • Настраиваемый погрузчик

4. Pixi.js

Github | Примеры

Игровой движок Pixi.js

Pixi.js — это сверхбыстрый движок рендеринга HTML 5 2D, который использует webGL с откатом холста. Цель этого проекта — предоставить быструю облегченную 2D-библиотеку, которая работает на всех устройствах. Рендерер Pixi позволяет каждому насладиться мощью аппаратного ускорения без предварительного знания WebGL. Кроме того, это быстро. Действительно быстро.

Pixi.js имеет полный WebGL поддержка и легко возвращается к HTML5 холст если нужно. В качестве основы Pixi.js является фантастическим инструментом для создания интерактивного контента, особенно с учетом ухода от Adobe Flash в последние годы. Используйте его для графики, интерактивных веб-сайтов, приложений и игр HTML5. Кросс-платформенная совместимость и постепенная деградация означают, что у вас меньше работы и больше удовольствия! Если вы хотите сравнительно быстро создавать отточенные и улучшенные впечатления, не углубляясь в плотный низкоуровневый код, избегая головных болей несогласованности браузеров, то добавьте в свой следующий проект волшебство Pixi.js.

3. PlayCanvas WebGL игровой движок

Github | Примеры

Play Canvas auto game

PlayCanvas — игровой движок с открытым исходным кодом. Он использует HTML5 и WebGL для запуска игр и другого интерактивного 3D-контента во всех современных браузерах без необходимости в плагине.

  • Графика
    • 3D рендеринг на основе WebGL
    • Физически обоснованный рендеринг (PBR)
    • Направленные, точечные и точечные источники света (все из которых могут отбрасывать тени)
    • Runtime Lightmap для выпечки
    • Статические и очищенные сетки
    • GPU Particle Engine с редактором
    • Библиотека PostFX: цветение, обнаружение краев, FXAA, виньетка и т. Д.
    • Полная поддержка материалов по умолчанию от Maya, 3DS Max, Blender и т. Д.
    • Полный модельный экспортный трубопровод из Maya, 3DS Max, Blender и т. Д. Через Активы Руководство пользователя
  • коллизия физика
    • Полная интеграция с трехмерным физическим движком твердого тела ammo.js
  • аудио
    • 3D позиционное аудио через Web Audio API
  • Загрузка ресурса
    • Простая и мощная загрузка ресурсов
    • Поток отдельных активов
    • Варианты активов — загрузка сжатых текстур (DXT, PVR, ETC1) на основе поддержки платформы
  • Entity / Component System
    • Встроенные компоненты: модель, звук, анимация, камера, столкновение, свет, твердое тело, скрипт, система частиц
  • Скриптовая система
    • Напишите поведение игры, добавив JavaScript к игровым объектам
    • Горячая замена оперативного кода обеспечивает быструю итерацию
  • вход
    • Мышь, клавиатура, сенсорный, поддержка геймпада, VR

2. Babylon.js

Github | Учебники

Babylon.js assasins creed demo

Babylon.js — это JavaScript-фреймворк с открытым исходным кодом, с помощью которого вы можете создавать и рендерить 3D-игры в браузере с помощью WebGL, HTML5 и Web Audio. Рисуя простой трехмерный объект в сыром виде WebGL требует от вас работы с огромным количеством кода JavaScript, Babylon.js позволяет вам делать то же самое с минимальным количеством кода и очень низким уровнем сложности.

Babylon.js можно назвать «еще одним Three.js» благодаря его мощным функциям, которые дают вам возможность создавать практически все, начиная от полностью интерактивных 3D-игр и заканчивая анимированными логотипами, в вашем браузере. Хотя этот JavaScript-фреймворк в настоящее время находится на ранней стадии, но даже он предлагает разработчикам прочную основу для создания многофункциональных созданий WebGL, которые можно использовать практически везде.

1. Phaser.js

Github | Примеры

Пример Phaser.js

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

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

Phaser был использован для создания сотен игр, получая миллионы игр в месяц. А версия 2 — самая стабильная и без ошибок. Проблемы быстро решаются, и мы остаемся в курсе меняющейся ситуации в браузере.

Ссылка на основную публикацию
Adblock
detector