Попасть в мишеньКак создавалась мини-игра "Тир удачи"

Тир удачи Pointblankпопробовать игру можно по адресу:

4ga.me/pb_shooting

Что же такого особенного в этой игре?

• Работоспособность во всех поддерживаемых браузерах (IE9+, Opera, Chrome, FF)

• Эффект DoF и Motion Blur у фона и мишеней

• Загрузка ресурсов и отображение процесса подготовки игры

• Работа со звуками: стрельба, попадание в мишень и т.д.

Пора выбрать сторону!Или на каких технологиях мы это будем

реализовывать?

Работа с изображением

Работа с изображением

• html5 + css3

• canvas

• webgl

html5 + css3✓ Простота разработки – много библиотек анимации

✓ 3D трансформации поддерживаются почти везде (caniuse.com/transforms3d)

✓ Высокая производительность при выносе отрисовки на GPU (3D трансформации)

✕ Фильтры работают лишь в webkit (caniuse.com/css-filters)

✕ Большая деградация производительности в браузерах без поддержки 3D трансформаций

✕ Отсутствие субпиксельного позиционирования без 3D трансформаций

html5 + css3

API Docs Community Features Perf

5 5 5 2 1

3 2 3 5 4+

$.transit 5 5 2 1 5

canvas✓ Простота разработки – много библиотек анимации

✓ Работает везде начиная с IE9 (caniuse.com/canvas)

✓ Поддерживает субпиксельное позиционирование

✓ Позволяет делать любые манипуляции с изображениями (фильтры и т.д.)

✕ Любые манипуляции с изображениями очень трудозатратны

✕ Не поддерживает 3D трансформации изображений

canvasAPI Docs Community Features Perf

Fabric.js 3 3 1 3 1

Raphael.js 3 4 5 2 2

KineticJS 3 2 3 3 3

EaselJS 4 4 4 5 5

pixi.js* 4 4 3 3 4

* – режим canvas рендеринга, когда webgl не поддерживается

webgl✓ Высокая производительность при работе с изображениями

✓ Поддержка производительных фильтров и трансформаций

✓ Огромный API для работы с 3D сценой, поверхностями и текстурами

✕ Не достаточная доля браузеров поддерживает работу с webgl (caniuse.com/webgl)

✕ Сложная разработка. Имеются библиотеки, но их документации оставляют желать лучшего

✕ Код, оптимизированный под webgl при деградации на canvas, в старых браузерах получается малопроизводительным

webgl

API Docs Community Features Perf

three.js* 2 5 5 4 5

pixi.js 5 4 3 2 5

* – не поддерживает работу со спрайтами

Update!14 января 2013г в EaselJS добавлена

экспериментальная высокопроизводительная поддержка webgl

Высокоуровневый API ограничен, но прирост производительности очень высок.

Разработкой webgl рендера занимаются совместно @gskinner и Mozilla

Приз зрительских симпатий был отдан

реализации на canvasИз-за малой доли поддержки webgl в браузерах на октябрь-ноябрь 2013,

а так же расширенных возможностей необходимых для поставленной задачи

После исследований выбор пал на набор библиотек под названием CreateJSИ библиотеку для работы с графикой – EaselJS

(https://github.com/CreateJS/EaselJS)

Но конечно же все оказалось не так просто...

Первая версия proof of concept

• 1 canvas – все сцены отрисовываются на нем

• Фильтры motion-blur накладываемые в реальном времени

• Изменение течения времени (эффект slow-mo) за счет изменения количества кадров

В результате рекордные 4 fps

Для улиток может и сойдет, но что-то с этим нужно делать

Что же было сделано?• Сцены разделены на несколько слоев

• Таймер заменен на requestAnimationFrame

• Сделана предгенерация motion-blur для элементов

• Режим slow-mo переделан со смены fps на менеджер анимаций

Разделение сцен на слои

• Позволяет проще контролировать отрисовку элементов на разных сценах

• Позволяет сократить цикл отрисовки финальной сцены

• Когда сцену не видно ее просчет можно совсем исключить из цикла рендеринга

Алгоритм работы motion-blur кеша

Менеджер анимаций• Все анимации переделаны на использование простой формулы S = V*t

• Менеджер предоставляет именную коллекцию t для вышеописанной формулы

• При включении режима slow-mo все записи в коллекции переумножаются на фактор замедления, что приводит к замедлению скорости элементов без изменения fps

• Позволяет делать плавный переход от одной скорости к другой для заданной записи

В результате получаем 50-60 fps

Уже не стыдно показать! Но просадки fps очень режут глаз

Продолжаем оптимизировать дальше!

• Вынесение статичных текстур в DOM

• Оптимизация цикла отрисовки мишеней

Вынесение статичных текстур в DOM

• Текстуры не имеющие никакие анимации или трансформации выносим в DOM элементы

• Применяем к этим элементам 3D трансформации для реализации плавного перемещения с субпиксельным смещением

• В браузерах, что не поддерживают 3D трансформации, деградируем до обычного смещения за счет стилей

Оптимизация цикла отрисовки

• Все элементы, что не видны пользователю помечаем, как невидимые тем самым они исключаются из цикла отрисовки

• Для отрисовки обратной стороны мишеней используем один и тот же canvas с изображением

• Удаляем невидимую сторону мишени со сцены, чтобы она никак не участвовала в цикле отрисовки

• На сценах у которых используется фон не очищаем canvas перед отрисовкой

В результате получаем стабильные 60 fps

В результате получаем• В Google Chrome и Opera Next – стабильные

60 fps)

• Firefox – 59-60 fps. Под нагрузкой на браузер имеются кратковременные просадки на 1-2 fps)

• Safari – 57-60 fps. Что выливается в неприятные кратковременные фризы анимаций

UpdateПосле анонса поддержки webgl в EaselJS ситуация

значительно изменилась

Результаты с webgl

• В Google Chrome и Opera Next – стабильные 60 fps)

• Firefox – стабильные 60 fps)

• Safari – Ситуация не изменилась. Поддержка webgl по умолчанию заблокирована

Загрузка ресурсов и отображение процесса

подготовки игры

Что должен уметь делать загрузчик?

• Загружать разные форматы файлов: изображения и звуки

• Предоставлять информацию по текущему статусу загрузки

• Позволять обрабатывать ошибки загрузки файлов

Все это умеет делать загрузчик PreloadJS

Входящий в комплект CreateJS (https://github.com/CreateJS/PreloadJS)

Так почему не что-то другое?

Чем же PreloadJS лучше?• Работа с XHR2 для отображения реального процесса загрузки с поддержкой фоллбеков

• Возможность параллельной загрузки с поддержкой очередей

• Поддержка плагинов. Есть плагин постобработки звуковых файлов для работы с библиотекой SoundJS

• Хорошая документация и открытый API

Процесс подготовки игры

Для отображения процесса создания motion-blur кеша придется доработать загрузчик

Как это было сделано• Создан класс Loader, который позволяет добавлять в очередь загрузки PreloadJS кастомные записи

• Перед созданием motion-blur кеша добавляем равное количеству элементов записи в очередь загрузки

• После создания кеша для элемента отстреливаем событие готовности, что переключает очередь загрузки будто мы загрузили файл

Готово!Таким образом, в процесс отображения 100% входит, как загрузка файлов, так и подготовка всех элементов игры

Работа со звуком

Какие требования к работе со звуком?

• Воспроизведение одного или нескольких звуков одновременно

• Кроссбраузерное воспроизведение звуков

• Минимальный контроль за воспроизведением: проигрывание, пауза

Даешь библиотеку для облегчения жизни!

А есть ли что-нибудь в наборе CreateJS для работы со звуками?

Как оказалось есть!Встречаем SoundJS!

(https://github.com/CreateJS/SoundJS)

Но всех проблем это не решило :(

• В IE 9 есть небольшая задержка перед проигрыванием звуков

• Если в Windows не настроен WMP, то звуки в IE воспроизводиться вообще не будут.

• При включении Web Audio API в Firefox 25 перестали воспроизводиться все звуки. Было исправлено обновлением SoundJS

• В Firefox 25 на всех Windows машинах mp3 файлы не загружались корректно. Было исправлено в новой версии Firefox

Что хотелось, но не получилось...

Не получилось реализовать

• Разворот мишеней с настоящей 3d перспективой. Будет возможно в webgl версии

• Правдоподобный дым от выстрелов

Выводы