[Из песочницы] Egret. Free open source HTML5 game engine29.09.2015 12:33

В данной статье будет рассмотрены вопросы, возникающие во время выбора Game Engine для разработки 2D игр. И, как вариант ответов на эти вопросы, будет предложено использовать Egret.

Материал статьи предполагает, что читатель уже имеет общее представление о следующем:

About

Команда разработчиков JoyRocks создает игры для социальных сетей, а именно, CityBuilder BirdsTown для FB, OK, VK MM и других. Используем Flash, AS3, PHP, MySql, Memcahced, Redis. Мы постоянно изучаем новые технологии, которые могут ускорить разработку игр и заменить Flash.

Проблемы с выбором технологии front end

Многие компании, команды начинают свой путь с разработки игры для Web. Богатство выбора технологи для написания клиента многообразно — это Flash+AS3, движки поддерживающие JavaScript и все. Все? Да все. Всякого рода UnityPalyer и остальную ересь забываем, со временем обещают разобраться еще и с Flash. И пока Flash обещают убить, он живее всех живых и большинство выбирают именно Flash+AS3.Flash

Базируясь на опыте нашей команды, позволю себе выделить основные моменты почему Flash:
Animation engine
Наличие прекрасного WYSIWYG 2D редактора анимации.
Язык программирования AS3
Наличие IDE для всех платфор( Windows, Mac) и Debugging Tools. (Мы используем IntelliJ IDEA)

Но нет ничего идеально в мире, и решение использовать Flash имеет свои недостатки:

Нет GUI из коробки. Он есть, но немного не то, что нам нужно. Не вдаваясь в детали, GUI делаем самостоятельно, на основе Flash анимации.
Есть проблемы с портированием на iOS, Android и другие платформы. Уважаемы читатель, возразит — а как же Starling, Adobe AIR? И будет прав. Есть инструментарий, который позволяет создавать приложения iOS, Android с помощью Adobe технологий. Но, в большинстве случаев, игра уже написана, и обычные Flash анимации невозможно отобразить с помощью Starling, который оборачивает Stage3D. Всю анимацию нужно изначально делать с помощью, например, Spine или DragonBones.

Flash+starling
Второй подход Flash+starling.

Плюсы:

Spine или DragonBones animation engines
Наличие WYSIWYG 2D редакторов для анимации Spine или DragonBones.
Язык программирования AS3
Наличие IDE и Debugging Tools.
Портирование на iOS, Android

Минусы:

Судьба FlashPlayer. Все идет к тому, что web browser перестанут его поддерживать. Один из тех кто первым пострадал — это UnityPlayer.

Unity3D
Всем хорошо. Но опять же поддержка Web хромает. C одним из круглых столов, где обсуждалась проблема, можно ознакомится по ссылке https://www.facebook.com/arthur.ostapenko/posts/10203345574239873?pnref=story.Что же еще пролетает?
Из тех что мы пробовали, не прошли следующие кандидаты:

pixijs + spine
phaser + spine

OOP На JavaScript еще то испытание. Кто пробовал классы и наследование на JavaScript после C++/C#/AS3 должны понять.

Требования к Game Engine команды JoyRocks

Имея достаточный опыт разработки CityBuilder, перепробовав разные движки, наша команда сформулировала требования, которым должен соответствовать Game Engines:

2D Animation (e.g. Spine, Flash, Unity, DragonBones)
GUI — кнопочки, лейбл, диалоги, HUD и т.д.
WYSIWYG редактора для 2D Animation и GUI
DLC (Не проблема в подавляющем большинстве движков, но мы его специально выделяем как важный)
Debugging tools
Пригоден для создания игр Quiz, Match3, CityBuilder, Platformer.
Cross-platform: Web, IOS, Android and etc

Egret Engine

Egret Engine — бесплатный, с открытым кодом HTML5 Game Engine. С помощью Egret Engine, а также других соответствующих инструментов, разработчики могут создавать HTML5 приложения для Web и мобильных платформ. И главное, соответствует всем требованиям нашей команды разработчиков.

http://www.egret.com/en/

Впечатления

После Unity, это второй раз когда хотелось вскрикнуть: “ДА ….Ь, ….Ц, это то что нам нужно!!!”. Настолько позитивное, сильное было впечатление от egret. Язык программирования нормальный, отладка неплохая.

Даже при бедной, на китайском языке документации, используя отладку и доступ к исходному коду движка, можно изучить его работу. Кеширует или нет RES менеджер ресурсы загруженные с помощью RES.getResByUrl()? Запускаем отладку и смотрим. Скины GUI это еще одна фича которая позволит упростить жизнь при изменение HUD, например, на новогодний.

Компоненты Egret

Egret Wind. IDE в которой можно редактировать и дебажить код игры на TypeScript, WYSIWYG редактор GUI. До уровня студии от майкрософт не дотягивает, но проблем с работой в данном инструменте не было.
Egret Inspector. Плагин для chome который позволяет дебажить приложение в Egret Wind. Есть старая версия плагина в chrome store. Я устанавливал последнюю, скачивая с помощью manager Egret Engine.
DragonBones. WYSIWYG редактор анимации. Детали по ссылке http://dragonbones.github.io/
Res Depot. Инструмент с GUI для создания репозитория ресурсов. К сожалению еще не локализирована на английский, вся на китайском языке.
Texture Merge. Упаковка спрайтов в текстуры. Бесплатный аналог TexturePacker https://www.codeandweb.com/texturepacker. Также локализация китайская.
Egret Android Support. Поддержка Android. Проверял тех демо — работает.
Egret IOS Support. Поддержка IOS. Тех демо не пробовал.
Egret Conversion. Конвертация Flash игры в HTML5. Пока локализация китайская.
Egret Feather. Редактор партиклов.
Lakeshore. Инструмент создания игры без программирования. Пока локализация китайская.

Документация Egret

Английская версия: http://edn.egret.com/en/. Документация по API есть, но больше информации, конечно, на китайском языке http://edn.egret.com/cn/. Думаю нет надобности объяснять как в chrome переводить страницу с одного языка на другой https://support.google.com/chrome/answer/173424?hl=en? Очень рекомендую переводить на английский, а не на русский. Проблемы с английским? Тогда тебе сюда https://www.google.com.ua/webhp?sourceid=chrome-instant&ion=1&espv=2&ie=UTF-8#q=%D0%BA%D1%83%D1%80%D1%81%D1%8B%20%D0%B0%D0%BD%D0%B3%D0%BB%D0%B8%D0%B9%D1%81%D0%BA%D0%BE%D0%B3%D0%BE%20%D1%8F%D0%B7%D1%8B%D0%BA%D0%B0.

Что за движок такой? Где о нем пишут?

В этом мире есть много чего о чем мы слышали, в свое время многие сомневались в iPhone, когда львиная доля рынка принадлежала Nokia. Первое упоминание о egret мы обнаружили на http://dragonbones.github.io/.

“DragonBones support Egret Framework”. Второе на сайте Tiled Map Editor http://www.mapeditor.org/в разделе sponsors.

Куда писать на что подписаться?

Страница проекта на Facebook: https://www.facebook.com/egrettechnologyinc. CEO Egret Technology Inc: https://www.facebook.com/cnedwin.

Заключение

Как уже было сказано, Egret это один з игровых движков которые можно использовать для создания 2D игр. Богатство доступных инструментов “из коробки” достаточно для старта разработки команды с минимальным опытом. Если чего то не хватает, всегда можно дописать или использовать альтернативные инструменты. Например, вместо стандартного инструмента Texture Merge для упаковки спрайтов анимации DragonBones, мы использовали TexturePacker. И, соответсвенно, нам пришлось написать свою версию TextureAtlas для работы с атласом который выгружает TexturePacker. Детали реализации в следующих статьях.

По мнению автора, на практике смело можно делать игры типа Quiz, Match3. Функционал hitTestPoint также присутствует, так что для Hidden Object также должен подойти. Прототипы игр жанра Quiz, Match3 будут рассмотрены в следующих статьях.

Открытым остался вопрос о возможности применении в CityBuilder (например, https://apps.facebook.com/birdstowngame/). Контента много и функционал непростой. Техническое демо с тайловой картой и объектами (анимированные деревья, камни) показало себя не плохо — все загрузилось, Draw Call так как мы и ожидали 2, адекватно находили объекты с помощью hitTestPoint.

Быть или не быть вот в чем вопрос. Как всегда, только время покажет. Мое личное мнение, если вы ищите HTML 5 Game Engine — Egret достойный кандидат. И автор будет использовать его для разработки новых игр. О результатах использования читайте в следующих статьях.