Game developer
0,0
рейтинг
29 сентября 2015 в 11:34

Разработка → Egret. Free open source HTML5 game engine из песочницы

В данной статье будет рассмотрены вопросы, возникающие во время выбора 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 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 достойный кандидат. И автор будет использовать его для разработки новых игр. О результатах использования читайте в следующих статьях.
Ivan Lavoryk @lavoryk
карма
5,0
рейтинг 0,0
Game developer
Реклама помогает поддерживать и развивать наши сервисы

Подробнее
Спецпроект

Самое читаемое Разработка

Комментарии (26)

  • +5
    >>Наличие IDE для всех платфор( Windows, Mac)

    А GNU/Linux? Значит не для всех платформ.
  • +2
    Интересное у вас представление обо «всех платформах». Особенно удивляет сие ввиду использования кросс-платформенного HTML5.
    • 0
      Когда мы говорим о конечной платформе, для которых разрабатываются игры, то для нас важными являются Web, iOS и Android. Возможно Windows Phone. И собственно egret не единственное решение Вот есть вариант от software.intel.com/en-us/intel-xdk
      И должен согласится с faiwer указанные выше платформы не покрывают весь спектр en.wikipedia.org/wiki/Cross-platform. Также если есть мнение о не правильном использование того или иного термина, буду рад за соответсвующий комментарий.
      • 0
        Нет ничего криминального в том, что у вас нет решения для Linux. Бизнес есть бизнес. Но на хабрахабре повышенный процент *nix пользователей, и, соответственно, отсутствие во «всех платформах» linux-а вызывает недоумение. Можно написать, к примеру, «на всех популярных платформах». Или «на всех desktop платформах, за исключением linux». А в текущем виде глаз мгновенно за это цепляется. К тому же HTML5 располагает.
  • +1
    Рассматривали ли вы в качестве платформы для разработки такое сочетание как Dart+StageXL+Flash Dart Toolkit? Если рассматривали, то какие преимущества у Egret?
    • 0
      Vilyx
      К сожалению, эту комбинацию не рассматривали.
      Постараюсь выделить время и попробовать. Если что отпишусь здесь.
      Спасибо за ваш вариант решения проблем разработчиков игр.
  • +2
    Если вас смущает только
    OOP На JavaScript еще то испытание. Кто пробовал классы и наследование на JavaScript после C++/C#/AS3 должны понять.
    почему не использовать TypeScript с теми же движками?
    • +1
      а ведь есть еще babel с синтаксическим сахаром под классы.
    • 0
      Согласен с virtualtoy. Именно такими были первые шаги с TypeScript.
      Но опять же, есть несколько открытых вопросов:
      • Отладка (Debugging), в Egret Wing+Egret Inspector дебажим TypeScript, а не JavaScript. С другой стороны, все egret core библиотеки на javascript. Здесь, скорее, каждый сам себе выбирает что ему по душе.
      • Анимации и GUI. В egret это все из коробки. На мой взгляд, меньше «порог входа».

      Так или иначе каждый сам делает выбор.
  • +1
    В общем, не понятно. Из минусов флеша вы ставите только судьбу флеш-плеера в браузерах. Остальные перечисленные минусы — несущественные. У вас гораздо больше неудобных пунктов в выбранной вами технологии.
    Вернёмся к этому «существенному» минусу. Среди браузеров лидером является Chrome. Который имеет свою реализацию flash-плеера и отказываться от неё не собирается. И среди которых (браузеров) есть новый от Microsoft (самой популярной операционной системы на пк). Который, в свою очередь, имеет единственный(!) предустановленный плагин из коробки — flash-плеер.
    Учитывая. что никаких предпосылок к изменению «дальнейшей судьбы» flash-плеера в браузере нет, ваш выбор в статье выглядит ещё страннее.
    Вы это на 5-10 лет вперёд смотрите? Или планируете настолько долгую жизнь вашему проекту? Или это время разработки? Поясните, пожалуйста.

    Один из тех кто первым пострадал — это UnityPlayer

    Тут дело в нежелании Unity запиливать веб-плеер на отличном от Netscape Plugin API. К флешу и другим плеерам это не имеет никакого отношения.
    • 0
      Который имеет свою реализацию flash-плеера и отказываться от неё не собирается

      Неправда ваша. Это все тот же флеш от Adobe. Просто используется интегрированная версия, а не устанавливаемая пользователем
    • 0
      Frost47rus
      Смотрите, по 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

      • 0
        Флешу отрезали лишнее — рекламные баннеры и дополнительные swf на странице, этот ход был очевиден уже давно, и странно, что настолько затянули. Основной flash-контент (особенно игровой) в вебе от этого только выигрывает, не вижу ничего плохого для платформы, только оздоровление.
        Envato — это бизнес. На ActiveDen они продавали swf-ки c кодом чёрти знает какой давности, написанные ещё на втором action script. А ассеты — ну совсем не серьёзно, это разрослось в откровенную помойку. Конечно же, их продажи падали. Всё логично.

        Единственной «опасной» новостью для флеша, по моему мнению, может стать лишь намерение facebook и других крупных социальных сетей, отказаться от этой технологии. Чего, опять же, не происходит по одной простой причине — деньги. Flash — это огромная экосистема. Тем более активно развивающаяся.

        Вот по этой ссылке, которая упомянута в статье, www.facebook.com/arthur.ostapenko/posts/10203345574239873?pnref=story вы можете ознакомится о Unity для Web

        Там несколько заявлений (причём, не голословных) о тяжеловесности получающихся на выходе клиентов. К слову, демо-пример в той ветке подвесил намертво мою систему.
        • 0
          По Flash, большое спасибо, аргументы принимаются. Они еще раз подтверждают, что все не так однозначно с Flash.
        • 0
          Там несколько заявлений (причём, не голословных) о тяжеловесности получающихся на выходе клиентов. К слову, демо-пример в той ветке подвесил намертво мою систему.

          Пару-тройку десятков мегабайт качать я не готов даже по wifi, ради не пойми чего. А вдруг не понравится?
  • 0
    phaser.io же (github)

    Странно, что никто не вспомнил. В качестве графической подсистемы используется PIXI, а это значит, что графика будет быстрее там, где есть WebGL. Ну и шейдеры в наличии.

    Физика там на любой вкус.
    UI модули отдельно, но их есть в наличии.
    Поддержка Spine и DragonBones присутствует. Равно как и несколько вариантов для Tiled Map Editor.

    Бонусом ко всему наличие англоязычной документации. В отличии от.
    Есть биндинги к TypeScript, но написано всё на ванильном js.
    • 0
      странно, что не все читают статью перед написанием комментария
  • +3
    Я использовал Egret, получился винегрет. Почему — не понимаю. Очень я теперь regret.
    • –1
      Не переживай, не всегда все получается с первого раза.
      Тем более сейчас когда Egret Engine несколько версий edn.egret.com/cn/index.php/article/index/id/631
      Попробуй 2.0.5. По моему мнению, на момент комментария, он самый резонны.
  • 0
    А я думаю… не реклама ли часом? Меня утром в твиттере зафолов сам Эдвин Чен (основатель Egret), а уже в обед на хабре вижу статью про него же…

    На счет:
    Судьба FlashPlayer. Все идет к тому, что web browser перестанут его поддерживать.

    6 лет назад я познакомился с девушкой. Через год она стала моей женой. Мы прошли большой путь за эти 6 лет. Обзавелись многими движимыми и недвижимыми благами… Уже тогда я слышал, что «в этом году флеш точно перестанет работать в вебе». У меня уже дочка бегает под стол и второй ребенок скоро появится. А люди до сих пор переживают стадию «В этом году флеш точно умрет». Вангую, что эту дату перенесут снова на 3-4 года. Либо что-то всё же случится (не буду раскрывать все карты) и флеш будет жить столько, сколько будет жить webgl/canvas.

    Но, в большинстве случаев, игра уже написана, и обычные Flash анимации невозможно отобразить с помощью Starling

    Весь прикол в том, что если сразу делать правильно — то и вопросов к анимации не будет возникать ;) Starling появился очень давно. А люди продолжают говнокодить заниматься перформансом. Когда они понимают, что им нужен GPU — начинают говорить за минус легкости портирования. Да, согласен. Не легко «а бы что» с CPU конвертнуть в GPU. Но я пяток лет назад делать всё в Bitmap'aх для большей производительности. Сейчас любой мой проект конвертнуть на старлинг — дело плевое.

    P.S. на работе для ряда проектов мы написали клон pixijs, но на as3. Теперь с помощью простых (относительно) манипуляций мы можем компилировать флеш в html5. Всё дико ограничено, но наши задачи покрывает.
    • –2
      А я думаю… не реклама ли часом?

      Это вопрос оставим конспирологам

      флеш будет жить столько, сколько будет жить webgl/canvas

      На этом, я думаю, и закончим холивар о том сколько осталось жить Flash.

      Но я пяток лет назад делать всё в Bitmap'aх для большей производительности.

      Опять же там где выигрываем в производительности, проигрываем в объеме используемой памяти или ресурсов. Для определенного типа проектов (e.g. Match3) такой подход нормальный, для CityBuilder, с большим количеством контента, сомневаюсь.
      Не могли бы вы указать жанр проекта?
      • +1
        На этом, я думаю, и закончим холивар о том сколько осталось жить Flash.

        Конечно закончим. Только сначала я скопипастю весь контекст своего мессенджа
        Либо что-то всё же случится (не буду раскрывать все карты) и флеш будет жить столько, сколько будет жить webgl/canvas.

    • 0
      И еще, могли бы вы в профиле хабра указать свой фейсбук или твиттер? Я бы тоже подписался. Спасибо.

Только зарегистрированные пользователи могут оставлять комментарии. Войдите, пожалуйста.