Презентация на тему анализа, выбора и оптимизации кода при создании мини-игры на canvas.

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

2. Тир удачи Pointblank
попробовать игру можно по адресу:
4ga.me/pb_shooting

3. Что же такого особенного в
этой игре?
•
Работоспособность во всех поддерживаемых
браузерах (IE9+, Opera, Chrome, FF)
•
Эффект DoF и Motion Blur у фона и мишеней
•
Загрузка ресурсов и отображение процесса
подготовки игры
•
Работа со звуками: стрельба, попадание в
мишень и т.д.

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

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

6. Работа с изображением
•
html5 + css3
•
canvas
•
webgl

7. html5 + css3
✓
Простота разработки – много библиотек анимации
✓
3D трансформации поддерживаются почти везде (caniuse.com/
transforms3d)
✓
Высокая производительность при выносе отрисовки на GPU (3D
трансформации)
✕
Фильтры работают лишь в webkit (caniuse.com/css-filters)
✕
Большая деградация производительности в браузерах без
поддержки 3D трансформаций
✕
Отсутствие субпиксельного позиционирования без 3D
трансформаций

8. html5 + css3
API
Community
Features
Perf
5
5
5
2
1
3
$.transit
Docs
2
3
5
4+
5
5
2
1
5

9. canvas
✓
Простота разработки – много библиотек анимации
✓
Работает везде начиная с IE9 (caniuse.com/canvas)
✓
Поддерживает субпиксельное позиционирование
✓
Позволяет делать любые манипуляции с
изображениями (фильтры и т.д.)
✕
Любые манипуляции с изображениями очень
трудозатратны
✕
Не поддерживает 3D трансформации изображений

10. canvas
API
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 не поддерживается

11. webgl
✓
Высокая производительность при работе с изображениями
✓
Поддержка производительных фильтров и трансформаций
✓
Огромный API для работы с 3D сценой, поверхностями и
текстурами
✕
Не достаточная доля браузеров поддерживает работу с webgl
(caniuse.com/webgl)
✕
Сложная разработка. Имеются библиотеки, но их документации
оставляют желать лучшего
✕
Код, оптимизированный под webgl при деградации на canvas, в
старых браузерах получается малопроизводительным

12. webgl
API
Docs
Community
Features
Perf
three.js*
2
5
5
4
5
pixi.js
5
4
3
2
5
* – не поддерживает работу со спрайтами

13. Update!
14 января 2013г в EaselJS добавлена
экспериментальная высокопроизводительная
поддержка webgl
Высокоуровневый API ограничен, но прирост
производительности очень высок.
Разработкой webgl рендера занимаются
совместно @gskinner и Mozilla

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

15. После исследований выбор
пал на набор библиотек
под названием CreateJS
И библиотеку для работы с графикой – EaselJS
(https://github.com/CreateJS/EaselJS)

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

17. Первая версия
proof of concept
•
1 canvas – все сцены отрисовываются на нем
•
Фильтры motion-blur накладываемые в
реальном времени
•
Изменение течения времени (эффект slow-mo)
за счет изменения количества кадров

18. В результате
рекордные 4 fps
Для улиток может и сойдет, но что-то с этим нужно
делать

19. Что же было сделано?
•
Сцены разделены на несколько слоев
•
Таймер заменен на requestAnimationFrame
•
Сделана предгенерация motion-blur для
элементов
•
Режим slow-mo переделан со смены fps на
менеджер анимаций

20. Разделение сцен на слои
•
Позволяет проще
контролировать отрисовку
элементов на разных сценах
•
Позволяет сократить цикл
отрисовки финальной сцены
•
Когда сцену не видно ее
просчет можно совсем
исключить из цикла
рендеринга

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

22. Менеджер анимаций
•
Все анимации переделаны на использование простой
формулы S = V*t
•
Менеджер предоставляет именную коллекцию t для
вышеописанной формулы
•
При включении режима slow-mo все записи в коллекции
переумножаются на фактор замедления, что приводит к
замедлению скорости элементов без изменения fps
•
Позволяет делать плавный переход от одной скорости к
другой для заданной записи

23. В результате
получаем 50-60 fps
Уже не стыдно показать!
Но просадки fps очень режут глаз

24. Продолжаем
оптимизировать дальше!
•
Вынесение статичных текстур в DOM
•
Оптимизация цикла отрисовки мишеней

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

26. Оптимизация цикла
отрисовки
•
Все элементы, что не видны пользователю
помечаем, как невидимые тем самым они
исключаются из цикла отрисовки
•
Для отрисовки обратной стороны мишеней
используем один и тот же canvas с изображением
•
Удаляем невидимую сторону мишени со сцены,
чтобы она никак не участвовала в цикле отрисовки
•
На сценах у которых используется фон не очищаем
canvas перед отрисовкой

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

28. В результате получаем
•
В Google Chrome и Opera Next – стабильные
60 fps)
•
Firefox – 59-60 fps. Под нагрузкой на браузер
имеются кратковременные просадки на 1-2
fps)
•
Safari – 57-60 fps. Что выливается в
неприятные кратковременные фризы
анимаций

29. Update
После анонса поддержки webgl в EaselJS ситуация
значительно изменилась

30. Результаты с webgl
•
В Google Chrome и Opera Next – стабильные
60 fps)
•
Firefox – стабильные 60 fps)
•
Safari – Ситуация не изменилась. Поддержка
webgl по умолчанию заблокирована

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

32. Что должен уметь делать
загрузчик?
•
Загружать разные форматы файлов:
изображения и звуки
•
Предоставлять информацию по текущему
статусу загрузки
•
Позволять обрабатывать ошибки загрузки
файлов

33. Все это умеет делать
загрузчик PreloadJS
Входящий в комплект CreateJS
(https://github.com/CreateJS/PreloadJS)

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

35. Чем же PreloadJS лучше?
•
Работа с XHR2 для отображения реального
процесса загрузки с поддержкой фоллбеков
•
Возможность параллельной загрузки с
поддержкой очередей
•
Поддержка плагинов. Есть плагин
постобработки звуковых файлов для работы с
библиотекой SoundJS
•
Хорошая документация и открытый API

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

37. Как это было сделано
•
Создан класс Loader, который позволяет
добавлять в очередь загрузки PreloadJS
кастомные записи
•
Перед созданием motion-blur кеша добавляем
равное количеству элементов записи в очередь
загрузки
•
После создания кеша для элемента отстреливаем
событие готовности, что переключает очередь
загрузки будто мы загрузили файл

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

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

40. Какие требования к работе
со звуком?
•
Воспроизведение одного или нескольких
звуков одновременно
•
Кроссбраузерное воспроизведение звуков
•
Минимальный контроль за воспроизведением:
проигрывание, пауза

41. Даешь библиотеку для
облегчения жизни!
А есть ли что-нибудь в наборе CreateJS для работы со
звуками?

42. Как оказалось есть!
Встречаем SoundJS!
(https://github.com/CreateJS/SoundJS)

43. Но всех проблем это не
решило :(
•
В IE 9 есть небольшая задержка перед проигрыванием
звуков
•
Если в Windows не настроен WMP, то звуки в IE
воспроизводиться вообще не будут.
•
При включении Web Audio API в Firefox 25 перестали
воспроизводиться все звуки. Было исправлено
обновлением SoundJS
•
В Firefox 25 на всех Windows машинах mp3 файлы не
загружались корректно. Было исправлено в новой
версии Firefox

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

45. Не получилось реализовать
•
Разворот мишеней с настоящей 3d
перспективой. Будет возможно в webgl
версии
•
Правдоподобный дым от выстрелов

46. Выводы