Описание задачи
В связи с сложившейся ситуацией с поддержкой (а точнее ее отсутствием) технологии 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.
Выбор этой технологии, диктуемый общим деноминатором платформ, заставил нас отладить свой процесс переработки и сборки графики из исходников дизайнера в цельный формат. Но об этом в другой раз..
Ссылки на исходный код
Все примеры кода в этом тексте можно скачать и посмотреть с ГитХаб аккаунта писателя: