Выбор технологии для разработки браузерных игр

Описание задачи


В связи с сложившейся ситуацией с поддержкой (а точнее ее отсутствием) технологии Flash на iOS, меня попросили проверить возможность реализации игр с богатой графикой на “чистых” браузерных технологиях. Честно говоря, Flash далеко не самая моя любимая платформа (так как является закрытым продуктом Adobe, а не open source), что лишь добавило мне мотивации показать, что возможны хорошие результаты и без нее...

Однако, несмотря на личные предпочтения, Flash предоставляет не только единую среду исполнения(runtime), которая одинаково осуществляется на многих платформах, но и богатую среду разработки, которую на сегодняшний день целиком заменить невозможно.

В результате обзор технологий выглядел как поиск компромиссов между возможностью поддержки конечного продукта на массе платформ и удобства разработки ПО.

Список браузерных платформ, которые мы должны поддерживать:
  • Explorer 9+
  • Firefox 3.6+
  • Opera
  • Chrome
  • Safari
  • iOS MobileSafari
  • Браузер Android на WebKit


Также, необходимо создать удобный процесс взаимодействия с дизайнером.

На сегодня, по-моему мнению, нет адекватных альтернатив дизайнерской среде Flash, которая позволяет скриптовать анимацию, содержать объектную модель (“Scene Graph”), а так же свободно интегрироваться с Adobe Illustrator и другими рабочими инструментами для дизайнеров.

Как только мы уходим с протоптанного пути коммерческого вендора, ответственность за определение методов перехода графики от дизайнера к фронтэнд программисту ложится на нас.

Поиск начинается


Изначально SVG был протестирован как графический язык высокого уровня. Он имеет следующие плюсы:

  • Относительно высокий уровень абстракции — имеет свою объектную модель, которая позволяет обрабатывать события.
  • Поддерживает сложные элементы анимации, такие как движение объекта по траектории, морфинг форм, декларативная анимация
  • все приемущества векторного формата
  • объектная модель самого формата несколько заменяет потребность в объектной модели сцены — Scene Graph.
  • SVG — распостраненный формат, легко экспортируется и читается различными графическими приложениями.

С таким списком преимуществ, можно было бы подумать, что технология просто идеальна. Однако, при тестировании проявились следующие недостатки:

  • Уровень реализации и поддержки сложного стандарта сильно отличается между браузерами и платформами
  • На некоторых платформах реализация весьма медленная.
  • Объектная модель SVG (DOM) чрезмерно сложна и трудна для работы со сценами, в которых необходимо динамически добавлять и удалять объекты.

В результате было решено попробовать подход на более низком уровне, используя Canvas с библиотекой абстракции Processing.JS для облегчения работы. Преимущества:

  • Canvas является простым стандартом, и в результате универсально поддерживается на современных браузерах.
  • Processing предоставляет дополнительный уровень абстракции, что дает возможность, например, импортировать SVG.
  • Canvas дает попиксельный контроль над холстом.

Реализация первой тестовой сцены в Canvas/Processing показала, что многие базовые функции SVG отсутствуют, и их пришлось дописывать руками. Например:

  • движение объекта по траектории
  • реакция объектов на действия мыши
  • морфинг форм, будучи сложным для имплементации алгоритмически, был переведен на эквивалент спрайтовой анимации, а сама пошаговая анимация осуществленна в редакторе Inkscape.


Можно конечно закрыть глаза на все эти недостатки, если в результате мы можем получить настоящее кросс-платформное решения для написания браузерных игр. Чтобы это проверить, было принято решение построить новое демо, более близкое к реальной игре. К сожалению, оно сразу показало что на MobileSafari (iOS) Canvas просто не тянет и бежит с очень низким фрэймрейтом.

Были сделаны попытки оптимизировать демо (отменена покадровая перерисовка фона, уменьшено количество объектов на экране, отменена текстура объектов). Но результат все равно оставался неудовлетворительным.

Решение


К этому моменту, безуспешно потратив значительное количество времени на достижение весьма ясной и определенной цели, я был вынужден подумать о другом подходе. Ведь слабым звеном в этой цепи является iOS, как впрочеми и все медленные мобильные платформы, в которых ограничен выбор браузера.

На этих устройствах быстрая графика осуществима лишь при использовании родного графического ускорения. А в MobileSafari это только объектная модель HTML (DOM).

Именно эта мысль привела к тому, что демо Блэк Джэк стола было переделано, на этот раз с использованием HTML и CSS3. Так же был добавлен звук и некоторые эффекты прозрачности… и — заработало! Сразу же после перехода, фрэймрэйт на MobileSafari улучшился.
После дополнительного чтения и специализированных оптимизаций, скорость была поднята еще выше. Оказывается, в iOS 4.x MobileSafari лишь частично ускорен, и надо осторожно выбирать методику обращения к DOM чтобы выжать все возможное из этого браузера.

Лично я был удивлен возможностью реализации браузерной игры с богатой графикой используя всего лишь CSS трансформации и HTML. Будучи охваченным поиском “серебряной пули” в форме продвинутой технологии, я чуть ли не упустил “хлеб и соль” вэб программирования, пока не опробывал и не отложил в сторону все остальные возможности.
Я не хочу всем этим сказать, что Canvas и SVG не имеют своего места. Но с вышеупомянутыми целями, SVG отпадает будучи более годным для статических сложных диаграм, а Canvas не тянет на Apple устройствах этого поколения. Остается лишь одно: CSS3.

Выбор этой технологии, диктуемый общим деноминатором платформ, заставил нас отладить свой процесс переработки и сборки графики из исходников дизайнера в цельный формат. Но об этом в другой раз..

Ссылки на исходный код


Все примеры кода в этом тексте можно скачать и посмотреть с ГитХаб аккаунта писателя:

Поделиться публикацией

Похожие публикации

Комментарии 54
    0
    Был на confog.org.ua/, та Хить из Абсолютиста очень радовался работе CSS3 в iOS. Говорит, они использует его в реальной разработке и показало себя только с лучшей стороны.

    Не понимаю, в чём проблема ускорить на телефоне Canvas?
      +5
      а я, честно говоря, тоже не понимаю. может быть напишем Стиву и спросим?
      +1
      > Список браузерных платформ, которые мы должны поддерживать:
      > Explorer 9+

      Вы видимо отпечатались? Иначе большинство пользователей Windows вас возненавидят с таким подходам к разработке браузерных игр )
        –3
        Люди качают тяжелый флеш-плеер, или, даже тяжеленные клиенты в сотни мегабайт, чтобы поиграть в игрушку. Неужели так тяжело скачать маленький Хромик или Фоксик?
          0
          Мне и вам не тяжело, но попробуйте это объяснить всем тем кто еще только вчера с IE6 на IE8 перешел или даже еще не перешел, что им надо куда-то там переходить. А ведь таких пользователей очень много. А при разработке продукта рассчитанного на широкую аудиторию о них забывать ну ни как нельзя.
            +4
            Правильно — думайте о пользователях.
            Начинайте акцию по переводу в современные реалии и насильническому осчастливливанию несчастных ИЕрастов
              0
              Причем здесь это? Я говорю о коммерческой выгоде, в данном случае вы теряете большой кусок пирога когда отказываетесь от поддержки большинства пользователей IE.
                +2
                Тогда давайте сразу закопаем css3\html5 и все что еще придумается в следующие 5 лет.
                А выбор именно такой — или СЕЙЧАС переходите на современные реалии, или еще лет 5 живете компромиссами.
                  0
                  Конечно, нет. Я говорю в контексте топика «Выбор технологии для разработки браузерных игр».
                    0
                    если мы говорим о коммерческой выгоде, то обеспечение кроссбраузерности для приложения такой специфики выйдет в куда большую копеечку, чем небольшое количество (не забываем о ЦА, и для браузерки это в основном пользователи, которые охотно пользуются IE6 только чтобы скачать другой браузер) пользователей, которые реально откажутся от игры из-за отсутствия поддержки старых IE.
                      –2
                      У автора и так 7 наименований браузеров, т.е. о кроссбраузерности он все же задумывается. )
                      Пользователей IE реально много, и они от игра не откажутся, они просто пройдут мимо, когда поймут что что-то там не поддерживает. Т.к. они могут просто не хотеть/не уметь/не иметь возможности что-то менять в своем привычном окружении.
                        0
                        ИЕ ниже 9 версии, просто не способен ни на что из того о чем писал автор.
                          –1
                          Я продолжаю удивляться. Пост, как называется? «Выбор технологии для разработки браузерных игр». Посмотрите на популярные браузерные игры, какие у них требования? А вы не задумывались почему?
                          То, что разработчики не хотят поддерживать старые версии, это понятно, они этого никогда не хотят, но условия рынка диктуют совершенно другое.
                          Представляю заказчика, который заказывает игру и говорит: «А что IE 7, 8, куча пользователей, не, у нас новые технологии, а пользователи пусть сами выкручиваются».
                          Так почти никогда не бывает.
              0
              У них нету причин переходить ;)
              +6
              У вас проблемы с определением веса :)
              Тяжелый фп — 5.5Мб
              Маленький хромик — 35.5 Мб
                –2
                Вы неправильно распарсили мой комментарий. Теперь со скобочками:
                Неужели так тяжело скачать маленький (Хромик || Фоксик)?
                  +6
                  маленький хромик — 35Мб
                  маленький фоксик — 27Мб

                  Как ни крути, а минимум в 5 раз тяжелее «тяжелого» фп
                    0
                    А вы думаете игрушка с аналогичной графикой на хтмл сожрет меньше трафика, чем флеш?
                    Как ни крути, а минимум в 5 раз тяжелее «тяжелого» фп

                    Да, я неправильно выразился. Игрушка с аналогичной графика сожрёт трафика меньше, чем флеш. Я имел ввиду маленький (Хромик || Фоксик) в сравнении со всем, что люди качают для того, чтобы поиграть. Ведь люди качают клиенты, плееры, графику, код игр, всё это они качают. Любители танков и линейки качают дофига весящий клиент, а казуальщики качают дофига игр, хоть на Flash, хоть на HTML5. На фоне этого разме Фокса и Хрома меркнет.
                  –1
                  я думаю подразумевались клиенты игрушек на флеше
                    +3
                    А вы думаете игрушка с аналогичной графикой на хтмл сожрет меньше трафика, чем флеш?
                    Вы очень сильно ошибаетесь.
                      +1
                      Начиналось вроде как со слабо \ не слабо скачать относительно мелкий браузер.
                      Уж не говоря о том что в новых браузерах, спасибо изоляциям, флеш работает малек шустрее и параллейней всему остальному браузеру.
                        +1
                        И я про то же. «Относительно мелкий» браузер — относительно чего?
                        Если относительно флеша, то будет в 10 раз больше обьем как ни крути. С клиентом игрушки/без клиента как угодно.
                  0
                  Конечно, скачать хромик, фоксик и флешик — плёвое дело.

                  А если-бы автор выбрал Silverlight, к примеру — ой какой вой поднялся-бы: качать и ставить какую-то приблуду?! Низачто-никагда!
                    0
                    Ну смотря для каких целей качать и ставить этот самый Silverlight. Если бы игру на нем сделали — я думаю, любой бы скачал без лишних вопросов. Но если автор сайта использует его только для того чтобы показывать картинки — тогда думаю вой бы поднялся…
                      0
                      Скачать-то скачаю, вот только сомневаюсь, что он заработает у меня под Linux, а Moonlight, мягко говоря, не полный аналог.
                  0
                  нет, не опечатался.
                  на винде, в отличие от iOS, имеется возможность выбора. и на той же XP можно поставить Лиса, Хром, Сафари и Оперу. а так как разработка идет на «движущуюся мишень», то есть, браузера развиваются а процент пользователей устаревших версий падает мы делаем осознаный выбор не тратить время на поддержку IE6/7/8. важнее быть на мобиле и новых платформах…
                    0
                    Ответил выше, на похожий комментарий от TheShock'a.
                    Мой поинт в том, что есть куча пользователей, которые не скоро поставят IE9 или вообще замену IE, и о них забывать нельзя т.к. это тоже весомая часть рынка.
                      0
                      На WinXP девятый IE юзер не поставит никак, а это существенная часть win-сегмента.
                      Конечно есть не-ИЕ браузеры, но не все юзеры в этом разбираются.
                        0
                        Ну тогда, похоже, только флеш не позволит оставить этих пользователей за бортом. так?
                          +1
                          По-моему, если человек не может/не хочет поставить «альтернативные» браузеры или IE9, то и с установкой флэша (особенно последних версий) у него могут быть проблемы — с большой вероятностью этот человек либо не имеет необходимых для установки привилегий, либо недостаточно компетентен для установки чего-либо, либо просто не хочет что-то устанавливать (боясь «сломать» например то, что пока работает).
                            +1
                            Взгляните в глаза фактам. Флэш стоит на что-то 98% процентах машин. «Современные браузеры» — на заметно меньшем. Если рассуждения на пальцах противоречат фаткам, значит, рассуждения — говно.
                              0
                              Уверены? Так ли велика разница?
                    +1
                    Сейчас тоже активно занимаюсь поиском фреймворка для Canvas. На данный момент лучшее, что удалось найти:
                    raphaeljs.com/
                    easeljs.com/
                    Однако, как автор правильно заметил, сильно нехватает декларативной объектной модели типа SceneGraph (после Flash и JavaFX рисование «вручную» выглядит несерьезно).
                      +2
                      Я бы при Шоке так не выражался бы :)
                      libcanvas.com/ + читайте его на хабре
                        +1
                        рафаэл работает на SVG, не канвасе.
                        из моих немалых поисков хорошего Canvas фреймворка, processing.js показался наиболее привлекательным.
                          0
                          А я так и не понял, зачем в JS втроен другой язык.
                            +1
                            Ради compatibility с processing.org, которая является состоявшейся средой на Джаве с массой библиотек и алгоритмов. Хотя можно на processing.is писать и напрямик на JS
                          +1
                          Я тоже занимаюсь таким поиском, и самый мощный фреймворк, который на данный момент нашел — это cake.js ( code.google.com/p/cakejs/ ), там даже что-то вроде SceneGraph есть, и поддержка того же svg, и движение по траектории.

                          И libcanvas упомянутый тоже крут.

                          Только у большинства canvas-фреймворков с документацией пока что довольно плохо дела обстоят. Примеры смотреть приятно, а вот как доходит дело до написания чего-то своего, ситуация резко усложняется)
                            0
                            Ну, у нас дока активно пишется + я с удовольтсвием консультирую в личке/джаббере/емейле. Людям нравится) Так что если есть желание — welcome)
                          –1
                          Win 2000, FF4, 2+Ghz Celeron, 256 Mb ram — ваша сценка повесила мою систему секунд на 15, а после двигалась еле-еле и со скрипом. При этом во флеше у меня нормально идут даже 3Д приложения. Не многовато ли нагрузки на проц для простой движущейся картинки?
                            +1
                            изначально нет спора что Флэш является, на данный момент, лучшей средой для разработки похожих игр, там где поддерживается.

                            но, в вашем системе, сомневаюсь что медленность из за CPU. ведь наша самая «low end» таргет система, iPhone 4, имеет в два раза больше оперативки чем ваша шина ;) а что быстрее пожирает память чем современные браузера…

                            ради любопытства, попробуйте с пониженым количеством объектов. влияет ли на скорость?
                              +1
                              Ок, постараюсь не забыть на основной работе попробовать. Думаю дело все же в процессоре 10-летней давности, памяти мне обычно хватает, так как стараюсь не открывать больше 3 страниц сразу.

                              Протестировал кстати на Симбиан ^3 на Нокии С6-01 в Опере 10.1 и родном браузере.
                              Опера 10.1 — картинка с горами выдает на глаз не больше 2 фпс, покерный стол сообщает об 1 фпс.
                              Родной браузер (на вебките) — картинка с горами повисла после 2 секунд, покерный стол не завелся вообще.

                              Я знаю что симбиан — «Горящая платформа», но все же, даже в нем есть Флеш лайт — менюшки и статические игры (там где не много графики и экшена) работают на ура. Даже в смартфонах от Самсунга на Бада ОС стоит такой же флеш лайт, про Андроид с полноценным плеером и говорить нечего. Получается, из всего разнообразия устройств, только iOS требует альтернативы флешу. Но зачем для iOS браузерная игра, если эта система знаменита именно своими приложениями, к разработке которых я кстати имею прямое отношение?

                              Если бы я принимал решение для бизнеса — я бы посоветовал сначала сделать версию на флеше для всех десктопных\мобильных платформ, отточил бы на ней алгоритмы и подготовил весь арт, потом специально для iOS сделал бы приложение на основе всего готового.
                                0
                                под симбиан, не проверял/оптимизировал, так что комментировать не могу.

                                насчет родной аппликации под iOS — важным фактором для типа игр заказчика являются различные ньюансы App Store (dis)approval policy.
                                  0
                                  Проверил на работе ваш облегченный вариант — да, на скорость влияет. Загрузка скачет сильно, но в среднем меньше 50%.
                            +1
                            На IE9 coin.to/casinotest/table2.html?nosound=1 не пошло — Строка: 171 Ошибка: Объект не поддерживает свойство или метод «addEventListener», в Chrome нормально.
                              +1
                              во первых, сильно удивлен что вы единственный кто действительно проверил на IE9 :)
                              после некоторого головочеса, понял несколько вещей:

                              — во первых, до сих пор table2.html везде работал на quirks-mode из за отсутствия doctype. и я этого даже не замечал.
                              — во вторых, при написании table2, тестил я под один из релиз-кандидатов IE9. а там quirks-mode работал по другому, а именно, поддерживал почти все фичи «стандартного» API типа «addEventListener». выходит что в финальной версии это отменили и quirks-mode значительно притупили, что и сломало демо под IE9.

                              переписал и пофиксил демку под standards mode и залил заново. теперь работает на всех обещаных платформах.

                              благодарен за замечание.
                              +2
                              Unity3D? Чем плох кандидат, раз уж Flash не нравится?
                                –1
                                Вы помните стоимость Юнити? А стоимость возможности экспорта под айфон и андроид?
                                  0
                                  Ну если вы хотите мелкую игру аля «змейка», то да, цена ей будет очень высока, но если у вас какая-то иновационная игра, которую все хотят, но никто не знает про неё — то думаю ответ очевиден. Да и не обязательно её сразу монетезировать.
                                0
                                Для ие<9 попробуйте code.google.com/p/explorercanvas/. Хоть и не все возможности поддерживает canvas.
                                  0
                                  Это не решение, я вам точно скажу)
                                  0
                                  Самопиар: code.google.com/p/jgen/
                                    0
                                    Effectgames делают нечто аналогичное. А так же есть gameQuery и другие…
                                      0
                                      и еще Canvas библиотека с потрясающими демо, только сегодня увидел:
                                      github.com/hyperandroid/CAAT/

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

                                    Самое читаемое