Как стать автором
Обновить

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

Разработка веб-сайтов *
Из песочницы

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


В связи с сложившейся ситуацией с поддержкой (а точнее ее отсутствием) технологии 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.

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

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


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

Теги:
Хабы:
Всего голосов 61: ↑57 и ↓4 +53
Просмотры 11K
Комментарии Комментарии 54