Содержание
Хотя вопрос, если «Javascript медленный?» это очень субъективный вопрос, потому что он работает в браузере клиента или полностью зависит от аппаратного и программного обеспечения, на котором работает код JavaScript. Но о чем это все? современные браузеры имеют возможности, которые мы никогда бы не представили 5 или 10 лет назад. Используя JavaScript API WebGL, они могут полностью рендерить сложные 2D и 3D-графики, не полагаясь на сторонние плагины для браузера. Мы просто хотим подчеркнуть, что Javascript можно использовать для разработки веб-игр! не только 2D-игры, но и 3D-игры. Начиная с чистого JavaScript, это лучший способ получить глубокие знания о разработке веб-игр.
Но зачем воссоздавать колесо, чтобы построить нашу игру с нуля (разработка элементов управления, манипулирование активами, забота об оптимизации и множество бесконечных проблем, решение которых может занять много времени самостоятельно), если мы можем ускорить этот процесс используя игровой движок, написанный на Javascript? В этой статье мы расскажем, по нашему мнению, о лучших игровых движках Javascript для разработки веб-игр.
15. Магистральный игровой движок
Backbone Game Engine — это элементарный игровой движок HTML5 Canvas, созданный на основе Backbone. Специализируется на 2D-платформерах и оптимизировано для мобильных устройств. Backbone Game Engine был написан для запуска внутри CocoonJS Canvas +, поэтому вы можете превратить свою HTML5-игру в нативное приложение на iOS или Android.
- Построен на магистрали. События, модели, коллекции, наследование и RESTful постоянство. Зачем изобретать велосипед?
- HTML5 только холст. Нет jQuery, как можно меньше манипуляций с DOM.
- Мобильный оптимизирован. Создан для работы на мобильных устройствах с прозрачным сенсорным экраном и поддержкой просмотра. Все оптимизировано для максимальных кадров в секунду (FPS).
14. DarlingJS
DarlingJS — это компонентный и основанный на сущностях игровой движок javascript с внедрением зависимостей и модульной архитектурой. Darling.js не стоит ни копейки. Код, лицензированный по упрощенной лицензии BSD. Вам нужно только отметить в источнике, что вы использовали Darling.js. И я буду очень рад, если вы дадите мне знать, что вы используете движок в своем проекте.
Внедрение зависимостей в Darling.js позволяет вам декларативно описать, как ваше приложение подключено. И любой компонент, который не соответствует вашим потребностям, может быть легко заменен. Разделяет функциональность и данные на отдельные системы и компоненты, которые в основном не зависят друг от друга. Таким образом, композиция используется вместо наследования. Также сгруппируйте компоненты и систему в модули, которые можно подключить к игровому приложению.
13. JawsJS
Jaws — это 2D-игра, основанная на HTML5. Сначала он занимался только холстом, но теперь также поддерживает обычные спрайты на основе DOM через тот же API.
Jaws хорошо подходит для «классических» игр с боковой / верхней прокруткой (на основе плиток или нет), где у вас есть несколько спрайтов с анимированными листами спрайтов. Jaws поставляется с базовым обнаружением столкновений rect-vs-rect / circle-vs-circle, которое хорошо работает в большинстве случаев. Если у вас есть тонны спрайтов (например, пуля, чёрт побери), вы, вероятно, захотите использовать физическую библиотеку, такую как Box2D, или пространственное хеширование, например, четырехугольные деревья, чтобы ускорить процесс. Использование челюстей в Canvas делает столкновения идеальными по пикселям и относительно легкими в освоении. Если ваша игра сильно перегружена графическим интерфейсом, вы можете основывать свою игру на чистых HTML-элементах, а не на холст-спрайтах.
12. Enchant.js
Простой JavaScript-фреймворк для создания игр и приложений со следующими функциями:
- это фреймворк для разработки простых игр и приложений на HTML5 + JavaScript
- был выпущен в 2011 году, но уже имел более 1000 игр и приложений опубликованный
- является с открытым исходным кодом (лицензия MIT), и, следовательно, свободно использовать
- имеет обширные подтверждающие документы: Документация по API·Публикации·Учебный сайт
- может быть дополнен различными плагины для увеличения функциональности
- постоянно разрабатывается и поддерживается членами исследовательского центра Акихабара в UEI
11. Квинт
Quintus — это простой в освоении, увлекательный игровой движок JavaScript HTML5 для мобильных устройств, компьютеров и других приложений.
Движок Quintus — это игровой движок HTML5, разработанный для модульного и легковесного синтаксиса, дружественного к JavaScript. Вместо попытки встроить стандартную структуру движка ООП-игры в движок JavaScript HTML5, Quintus берет некоторые подсказки от jQuery и предоставляет плагины, события и синтаксис селектора. Вместо глубокой модели единственного наследования Quintus предоставляет гибкую модель компонентов в дополнение к традиционному наследованию, чтобы упростить повторное использование функциональности и обмен ею между играми и объектами.
10. Панда Двигатель
Panda Engine — это бесплатный игровой движок HTML5 для мобильных и настольных систем с рендерингом Canvas и WebGL, он использует Pixi.js для рендеринга с супер быстрой скоростью.
С Panda Engine вы можете отслеживать события Google Analytics внутри вашей игры и другие интересные функции, такие как.
9. коварный
Crafty — это библиотека игр JavaScript, которая может помочь вам создавать игры в структурированном виде со следующими функциями:
- юридические лица Компоненты — чистый и несвязанный способ организации игровых элементов. Нет наследства необходимо!
- Привязка к событиям — система событий для пользовательских событий, которые можно запускать в любое время, в любом месте и связывать так же легко.
- Никаких манипуляций с домом или пользовательских процедур рисования не требуется.
Другие вкусности:
- Процветающее сообщество — Помощь доступна на форуме.
- Модули сообщества — растущая коллекция пользовательского кода, который вы можете использовать.
- Чистый JavaScript — никакой магии. Работает во всех основных браузерах и может сочетаться с вашей любимой библиотекой js.
8. Stage.js
Stage.js — это 2D HTML5 библиотека JavaScript для кроссплатформенной разработки игр, она легкая, быстрая и с открытым исходным кодом.
Stage.js предоставляет DOM-подобную модель данных дерева для составления вашего приложения и внутренне управляет циклами рендеринга и рисования вашего приложения, а также обрабатывает и распределяет события мыши и касания по целевым узлам дерева.
Приложение Stage.js состоит из дерева узлов. Каждый узел прикреплен (преобразован) к своему родителю и имеет ноль, одну или несколько текстур изображения. Каждый цикл рендеринга состоит из тикающих и рисующих узлов дерева. При тикающих узлах приспосабливаются к последним обновлениям, а затем при рисовании каждый узел трансформируется в соответствии со своим закреплением и рисует свои текстуры. Рендеринг сохраняется и приостанавливается, когда нет изменений.
7. 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
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
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
Pixi.js — это сверхбыстрый движок рендеринга HTML 5 2D, который использует webGL с откатом холста. Цель этого проекта — предоставить быструю облегченную 2D-библиотеку, которая работает на всех устройствах. Рендерер Pixi позволяет каждому насладиться мощью аппаратного ускорения без предварительного знания WebGL. Кроме того, это быстро. Действительно быстро.
Pixi.js имеет полный WebGL поддержка и легко возвращается к HTML5 холст если нужно. В качестве основы Pixi.js является фантастическим инструментом для создания интерактивного контента, особенно с учетом ухода от Adobe Flash в последние годы. Используйте его для графики, интерактивных веб-сайтов, приложений и игр HTML5. Кросс-платформенная совместимость и постепенная деградация означают, что у вас меньше работы и больше удовольствия! Если вы хотите сравнительно быстро создавать отточенные и улучшенные впечатления, не углубляясь в плотный низкоуровневый код, избегая головных болей несогласованности браузеров, то добавьте в свой следующий проект волшебство Pixi.js.
3. PlayCanvas WebGL игровой движок
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
Babylon.js — это JavaScript-фреймворк с открытым исходным кодом, с помощью которого вы можете создавать и рендерить 3D-игры в браузере с помощью WebGL, HTML5 и Web Audio. Рисуя простой трехмерный объект в сыром виде WebGL требует от вас работы с огромным количеством кода JavaScript, Babylon.js позволяет вам делать то же самое с минимальным количеством кода и очень низким уровнем сложности.
Babylon.js можно назвать «еще одним Three.js» благодаря его мощным функциям, которые дают вам возможность создавать практически все, начиная от полностью интерактивных 3D-игр и заканчивая анимированными логотипами, в вашем браузере. Хотя этот JavaScript-фреймворк в настоящее время находится на ранней стадии, но даже он предлагает разработчикам прочную основу для создания многофункциональных созданий WebGL, которые можно использовать практически везде.
1. Phaser.js
Но подожди минутку, Phaser.js лучше, чем Babylon.js, это шутка? Вы знаете, что говорят люди, мясо одного человека — яд другого человека. Возможно, вам не понравится начинать разработку веб-игр с использованием передовых технологий, таких как WebGL, потому что вы скоро будете разочарованы, так как создание игр не так просто, как вы думаете. И именно здесь Phaser.js, вероятно, станет вашим первым вариантом для начала разработки игр, поскольку он очень прост в использовании, он предоставляет множество примеров и не требует большого количества кода для создания вашей первой игры.
Phaser — это веселая, бесплатная и быстрая 2D-инфраструктура для создания HTML5-игр для настольных и мобильных веб-браузеров, поддерживающая рендеринг Canvas и WebGL. Phaser использует оба рендерера Canvas и WebGL и может автоматически переключаться между ними на основе поддержки браузера. Это обеспечивает молниеносный рендеринг на рабочем столе и на мобильном устройстве. Phaser использует и вносит свой вклад в создание превосходной библиотеки Pixi.js для рендеринга.
Phaser был использован для создания сотен игр, получая миллионы игр в месяц. А версия 2 — самая стабильная и без ошибок. Проблемы быстро решаются, и мы остаемся в курсе меняющейся ситуации в браузере.