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

Исследование возможности создания полноценной игровой среды в рамках веб-ббраузера.

Исторический документ. Результат исследований и экспериментов в раннем 2011 году. Публиковался на Хабре.

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

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

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

Список браузерных платформ, которые  мы должны поддерживать:

  • Explorer 9+
  • Firefox 3.6+
  • Opera
  • Chrome
  • Safari
  • iOS MobileSafari
  • Android’s WebKit browser

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

На сегодня, по-моему мнению, нет адекватных альтернатив дизайнерской среде 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.

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

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

тэги:

игры,флэш,flash,css3,svg,canvas,processing,processing.js,браузер,веб,browser,html5,javascript,webkit,mobilesafari,ios,apple


© 2021 Web GMA R&D Ltd.