В данной статье будет рассмотрены вопросы, возникающие во время выбора Game Engine для разработки 2D игр. И, как вариант ответов на эти вопросы, будет предложено использовать Egret.
Материал статьи предполагает, что читатель уже имеет общее представление о следующем:
Команда разработчиков JoyRocks создает игры для социальных сетей, а именно, CityBuilder BirdsTown для FB, OK, VK MM и других. Используем Flash, AS3, PHP, MySql, Memcahced, Redis. Мы постоянно изучаем новые технологии, которые могут ускорить разработку игр и заменить Flash.
Многие компании, команды начинают свой путь с разработки игры для Web. Богатство выбора технологи для написания клиента многообразно — это Flash+AS3, движки поддерживающие JavaScript и все. Все? Да все. Всякого рода UnityPalyer и остальную ересь забываем, со временем обещают разобраться еще и с Flash. И пока Flash обещают убить, он живее всех живых и большинство выбирают именно Flash+AS3.
Базируясь на опыте нашей команды, позволю себе выделить основные моменты почему Flash:
Но нет ничего идеально в мире, и решение использовать Flash имеет свои недостатки:
Второй подход Flash+starling.
Плюсы:
Минусы:
Всем хорошо. Но опять же поддержка Web хромает. C одним из круглых столов, где обсуждалась проблема, можно ознакомится по ссылке https://www.facebook.com/arthur.ostapenko/posts/10203345574239873?pnref=story.
Из тех что мы пробовали, не прошли следующие кандидаты:
OOP На JavaScript еще то испытание. Кто пробовал классы и наследование на JavaScript после C++/C#/AS3 должны понять.
Имея достаточный опыт разработки CityBuilder, перепробовав разные движки, наша команда сформулировала требования, которым должен соответствовать Game Engines:
Egret Engine — бесплатный, с открытым кодом HTML5 Game Engine. С помощью Egret Engine, а также других соответствующих инструментов, разработчики могут создавать HTML5 приложения для Web и мобильных платформ. И главное, соответствует всем требованиям нашей команды разработчиков.
http://www.egret.com/en/
После Unity, это второй раз когда хотелось вскрикнуть: “ДА ….Ь, ….Ц, это то что нам нужно!!!”. Настолько позитивное, сильное было впечатление от egret. Язык программирования нормальный, отладка неплохая.
Даже при бедной, на китайском языке документации, используя отладку и доступ к исходному коду движка, можно изучить его работу. Кеширует или нет RES менеджер ресурсы загруженные с помощью RES.getResByUrl()? Запускаем отладку и смотрим. Скины GUI это еще одна фича которая позволит упростить жизнь при изменение HUD, например, на новогодний.
Английская версия: 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 достойный кандидат. И автор будет использовать его для разработки новых игр. О результатах использования читайте в следующих статьях.
Ограничения
Материал статьи предполагает, что читатель уже имеет общее представление о следующем:
- Adobe Flash, AS3
- Stage3D https://en.wikipedia.org/wiki/Stage3D
- Starling https://en.wikipedia.org/wiki/Starling_Framework
- JavaScript http://www.w3schools.com/js/default.asp
- Type Script http://www.typescriptlang.org/
- Game Engine https://en.wikipedia.org/wiki/Game_engine
- Spine http://esotericsoftware.com/
- DragonBones http://dragonbones.github.io/
- HUD https://en.wikipedia.org/wiki/HUD_(video_gaming)
- Front end https://en.wikipedia.org/wiki/Front_and_back_ends
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 Wing. 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 достойный кандидат. И автор будет использовать его для разработки новых игр. О результатах использования читайте в следующих статьях.
