Ограничения
Материал статьи предполагает, что читатель уже имеет общее представление о следующем:
- 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 достойный кандидат. И автор будет использовать его для разработки новых игр. О результатах использования читайте в следующих статьях.
Комментарии (26)
faiwer
29.09.2015 13:11+2Интересное у вас представление обо «всех платформах». Особенно удивляет сие ввиду использования кросс-платформенного HTML5.
lavoryk
29.09.2015 21:11Когда мы говорим о конечной платформе, для которых разрабатываются игры, то для нас важными являются Web, iOS и Android. Возможно Windows Phone. И собственно egret не единственное решение Вот есть вариант от software.intel.com/en-us/intel-xdk
И должен согласится с faiwer указанные выше платформы не покрывают весь спектр en.wikipedia.org/wiki/Cross-platform. Также если есть мнение о не правильном использование того или иного термина, буду рад за соответсвующий комментарий.faiwer
30.09.2015 07:46Нет ничего криминального в том, что у вас нет решения для Linux. Бизнес есть бизнес. Но на хабрахабре повышенный процент *nix пользователей, и, соответственно, отсутствие во «всех платформах» linux-а вызывает недоумение. Можно написать, к примеру, «на всех популярных платформах». Или «на всех desktop платформах, за исключением linux». А в текущем виде глаз мгновенно за это цепляется. К тому же HTML5 располагает.
Vilyx
29.09.2015 13:17+1Рассматривали ли вы в качестве платформы для разработки такое сочетание как Dart+StageXL+Flash Dart Toolkit? Если рассматривали, то какие преимущества у Egret?
virtualtoy
29.09.2015 13:19+2Если вас смущает только
OOP На JavaScript еще то испытание. Кто пробовал классы и наследование на JavaScript после C++/C#/AS3 должны понять.
почему не использовать TypeScript с теми же движками?lavoryk
29.09.2015 21:22Согласен с virtualtoy. Именно такими были первые шаги с TypeScript.
Но опять же, есть несколько открытых вопросов:
- Отладка (Debugging), в Egret Wing+Egret Inspector дебажим TypeScript, а не JavaScript. С другой стороны, все egret core библиотеки на javascript. Здесь, скорее, каждый сам себе выбирает что ему по душе.
- Анимации и GUI. В egret это все из коробки. На мой взгляд, меньше «порог входа».
Так или иначе каждый сам делает выбор.
Frost47rus
29.09.2015 15:43+1В общем, не понятно. Из минусов флеша вы ставите только судьбу флеш-плеера в браузерах. Остальные перечисленные минусы — несущественные. У вас гораздо больше неудобных пунктов в выбранной вами технологии.
Вернёмся к этому «существенному» минусу. Среди браузеров лидером является Chrome. Который имеет свою реализацию flash-плеера и отказываться от неё не собирается. И среди которых (браузеров) есть новый от Microsoft (самой популярной операционной системы на пк). Который, в свою очередь, имеет единственный(!) предустановленный плагин из коробки — flash-плеер.
Учитывая. что никаких предпосылок к изменению «дальнейшей судьбы» flash-плеера в браузере нет, ваш выбор в статье выглядит ещё страннее.
Вы это на 5-10 лет вперёд смотрите? Или планируете настолько долгую жизнь вашему проекту? Или это время разработки? Поясните, пожалуйста.
Один из тех кто первым пострадал — это UnityPlayer
Тут дело в нежелании Unity запиливать веб-плеер на отличном от Netscape Plugin API. К флешу и другим плеерам это не имеет никакого отношения.
domix32
29.09.2015 16:47Который имеет свою реализацию flash-плеера и отказываться от неё не собирается
Неправда ваша. Это все тот же флеш от Adobe. Просто используется интегрированная версия, а не устанавливаемая пользователем
lavoryk
29.09.2015 22:38Frost47rus
Смотрите, по Flash.
По нашему мнению, много плохих новостей относительно технологии Flash.Google Ad отказались от Flash fortune.com/2015/09/01/google-chrome-flash-ads, еще один не знакомый мне сервис отказался habrahabr.ru/post/267383. За последнее время вы видели «позитивную» новость или позитивную статью о Flash? О том что все будет хорошо?
Поэтому все должны быть на чеку, и в крайний момент готовы перейти на что-то другое для Web.
Как говорится — предупрежден, значит вооружен.
По Unity.
На самом деле мне, как конечному пользователю инструментов разработки игр, все равно какие причины вынудили Unity выбрать текущий путь развития в Web.
Вот по этой ссылке, которая упомянута в статье, www.facebook.com/arthur.ostapenko/posts/10203345574239873?pnref=story вы можете ознакомится о Unity для Web
Frost47rus
29.09.2015 23:11Флешу отрезали лишнее — рекламные баннеры и дополнительные swf на странице, этот ход был очевиден уже давно, и странно, что настолько затянули. Основной flash-контент (особенно игровой) в вебе от этого только выигрывает, не вижу ничего плохого для платформы, только оздоровление.
Envato — это бизнес. На ActiveDen они продавали swf-ки c кодом чёрти знает какой давности, написанные ещё на втором action script. А ассеты — ну совсем не серьёзно, это разрослось в откровенную помойку. Конечно же, их продажи падали. Всё логично.
Единственной «опасной» новостью для флеша, по моему мнению, может стать лишь намерение facebook и других крупных социальных сетей, отказаться от этой технологии. Чего, опять же, не происходит по одной простой причине — деньги. Flash — это огромная экосистема. Тем более активно развивающаяся.
Вот по этой ссылке, которая упомянута в статье, www.facebook.com/arthur.ostapenko/posts/10203345574239873?pnref=story вы можете ознакомится о Unity для Web
Там несколько заявлений (причём, не голословных) о тяжеловесности получающихся на выходе клиентов. К слову, демо-пример в той ветке подвесил намертво мою систему.lavoryk
30.09.2015 07:40По Flash, большое спасибо, аргументы принимаются. Они еще раз подтверждают, что все не так однозначно с Flash.
TheRabbitFlash
30.09.2015 11:09Там несколько заявлений (причём, не голословных) о тяжеловесности получающихся на выходе клиентов. К слову, демо-пример в той ветке подвесил намертво мою систему.
Пару-тройку десятков мегабайт качать я не готов даже по wifi, ради не пойми чего. А вдруг не понравится?
lain8dono
29.09.2015 18:33phaser.io же (github)
Странно, что никто не вспомнил. В качестве графической подсистемы используется PIXI, а это значит, что графика будет быстрее там, где есть WebGL. Ну и шейдеры в наличии.
Физика там на любой вкус.
UI модули отдельно, но их есть в наличии.
Поддержка Spine и DragonBones присутствует. Равно как и несколько вариантов для Tiled Map Editor.
Бонусом ко всему наличие англоязычной документации. В отличии от.
Есть биндинги к TypeScript, но написано всё на ванильном js.
Biga
29.09.2015 21:33+3Я использовал Egret, получился винегрет. Почему — не понимаю. Очень я теперь regret.
lavoryk
29.09.2015 22:44-1Не переживай, не всегда все получается с первого раза.
Тем более сейчас когда Egret Engine несколько версий edn.egret.com/cn/index.php/article/index/id/631
Попробуй 2.0.5. По моему мнению, на момент комментария, он самый резонны.
TheRabbitFlash
29.09.2015 23:57А я думаю… не реклама ли часом? Меня утром в твиттере зафолов сам Эдвин Чен (основатель Egret), а уже в обед на хабре вижу статью про него же…
На счет:
Судьба FlashPlayer. Все идет к тому, что web browser перестанут его поддерживать.
6 лет назад я познакомился с девушкой. Через год она стала моей женой. Мы прошли большой путь за эти 6 лет. Обзавелись многими движимыми и недвижимыми благами… Уже тогда я слышал, что «в этом году флеш точно перестанет работать в вебе». У меня уже дочка бегает под стол и второй ребенок скоро появится. А люди до сих пор переживают стадию «В этом году флеш точно умрет». Вангую, что эту дату перенесут снова на 3-4 года. Либо что-то всё же случится (не буду раскрывать все карты) и флеш будет жить столько, сколько будет жить webgl/canvas.
Но, в большинстве случаев, игра уже написана, и обычные Flash анимации невозможно отобразить с помощью Starling
Весь прикол в том, что если сразу делать правильно — то и вопросов к анимации не будет возникать ;) Starling появился очень давно. А люди продолжаютговнокодитьзаниматься перформансом. Когда они понимают, что им нужен GPU — начинают говорить за минус легкости портирования. Да, согласен. Не легко «а бы что» с CPU конвертнуть в GPU. Но я пяток лет назад делать всё в Bitmap'aх для большей производительности. Сейчас любой мой проект конвертнуть на старлинг — дело плевое.
P.S. на работе для ряда проектов мы написали клон pixijs, но на as3. Теперь с помощью простых (относительно) манипуляций мы можем компилировать флеш в html5. Всё дико ограничено, но наши задачи покрывает.lavoryk
30.09.2015 07:30-2А я думаю… не реклама ли часом?
Это вопрос оставим конспирологам
флеш будет жить столько, сколько будет жить webgl/canvas
На этом, я думаю, и закончим холивар о том сколько осталось жить Flash.
Но я пяток лет назад делать всё в Bitmap'aх для большей производительности.
Опять же там где выигрываем в производительности, проигрываем в объеме используемой памяти или ресурсов. Для определенного типа проектов (e.g. Match3) такой подход нормальный, для CityBuilder, с большим количеством контента, сомневаюсь.
Не могли бы вы указать жанр проекта?TheRabbitFlash
30.09.2015 09:09+1На этом, я думаю, и закончим холивар о том сколько осталось жить Flash.
Конечно закончим. Только сначала я скопипастю весь контекст своего мессенджа
Либо что-то всё же случится (не буду раскрывать все карты) и флеш будет жить столько, сколько будет жить webgl/canvas.
lavoryk
30.09.2015 07:44И еще, могли бы вы в профиле хабра указать свой фейсбук или твиттер? Я бы тоже подписался. Спасибо.
TheRabbitFlash
30.09.2015 09:08twitter.com/TheRabbitFlash мой твиттер. Вообще указан. Ну знаю только отображается или нет
ZoomLS
>>Наличие IDE для всех платфор( Windows, Mac)
А GNU/Linux? Значит не для всех платформ.
zorgrhrd
lavoryk
Спасибо ZoomLS за вопрос и спасибо zorgrhrd за частичный ответ
Если говорить о Flash то для Linux есть:
Если говорить о Egret то тут все не та однозначно. Потенциально IntelliJ IDEA можно использовать для разработки. На сайте даже есть соответствующая страница edn.egret.com/en/index.php/article/index/id/490, но, к сожалению, мы не пробовали.