Исследование возможности создания полноценной игровой среды в рамках веб-ббраузера.
Исторический документ. Результат исследований и экспериментов в раннем 2011 году. Публиковался на Хабре.
В связи с сложившейся ситуацией с поддержкой(а точнее ее отсутствием :-)) технологии Flash на iOS, меня попросили проверить возможность реализации игр с богатой графикой на “чистых” браузерных технологиях. Честно говоря, Flash далеко не самая моя любимая платформа (так как является закрытым продуктом Adobe, а не open source), что лишь добавило мне мотивации показать, что возможны хорошие результаты и без нее...
Однако, несмотря на личные предпочтения , Flash предоставляет не только единую среду исполнения(runtime), которая одинаково осуществляется на многих платформах, но и богатую среду разработки, которую на сегодняшний день целиком заменить невозможно.
В результате обзор технологий выглядел как поиск компромиссов между возможностью поддержки конечного продукта на массе платформ и удобства разработки ПО.
Список браузерных платформ, которые мы должны поддерживать:
Также необходимо создать удобный процесс взаимодействия с дизайнером.
На сегодня, по-моему мнению, нет адекватных альтернатив дизайнерской среде Flash, которая позволяет скриптовать анимацию, содержать объектную модель (“Scene Graph”), а так же свободно интегрироваться с Adobe Illustrator и другими рабочими инструментами для дизайнеров.
Как только мы уходим с протоптанного пути коммерческого вендора, ответственность за определение методов перехода графики от дизайнера к фронтэнд программисту ложится на нас.
Изначально SVG был протестирован как графический язык высокого уровня. Он имеет следующие плюсы:
С таким списком преимуществ, можно было бы подумать, что технология просто идеальна. Однако, при тестировании проявились следующие недостатки:
В результате было решено попробовать подход на более низком уровне, используя Canvas с библиотекой абстракции Processing.JS для облегчения работы.
Реализация первой тестовой сцены в Canvas/Processing показала, что многие базовые функции SVG отсутствуют, и их пришлось дописывать руками. Например:
Можно конечно закрыть глаза на все эти недостатки, если в результате мы можем получить настоящее кросс-платформное решения для написания браузерных игр. Чтобы это проверить, было принято решение построить новое демо, более близкое к реальной игре. К сожалению, оно сразу показало что на 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
© 2023 Web GMA R&D Ltd.