Попасть в мишень
DESCRIPTION
Презентация на тему анализа, выбора и оптимизации кода при создании мини-игры на canvas.TRANSCRIPT
![Page 1: Попасть в мишень](https://reader038.vdocuments.site/reader038/viewer/2022103000/556fd3f7d8b42af8088b4752/html5/thumbnails/1.jpg)
Попасть в мишеньКак создавалась мини-игра "Тир удачи"
![Page 3: Попасть в мишень](https://reader038.vdocuments.site/reader038/viewer/2022103000/556fd3f7d8b42af8088b4752/html5/thumbnails/3.jpg)
Что же такого особенного в этой игре?
• Работоспособность во всех поддерживаемых браузерах (IE9+, Opera, Chrome, FF)
• Эффект DoF и Motion Blur у фона и мишеней
• Загрузка ресурсов и отображение процесса подготовки игры
• Работа со звуками: стрельба, попадание в мишень и т.д.
![Page 4: Попасть в мишень](https://reader038.vdocuments.site/reader038/viewer/2022103000/556fd3f7d8b42af8088b4752/html5/thumbnails/4.jpg)
Пора выбрать сторону!Или на каких технологиях мы это будем
реализовывать?
![Page 5: Попасть в мишень](https://reader038.vdocuments.site/reader038/viewer/2022103000/556fd3f7d8b42af8088b4752/html5/thumbnails/5.jpg)
Работа с изображением
![Page 6: Попасть в мишень](https://reader038.vdocuments.site/reader038/viewer/2022103000/556fd3f7d8b42af8088b4752/html5/thumbnails/6.jpg)
Работа с изображением
• html5 + css3
• canvas
• webgl
![Page 7: Попасть в мишень](https://reader038.vdocuments.site/reader038/viewer/2022103000/556fd3f7d8b42af8088b4752/html5/thumbnails/7.jpg)
html5 + css3✓ Простота разработки – много библиотек анимации
✓ 3D трансформации поддерживаются почти везде (caniuse.com/transforms3d)
✓ Высокая производительность при выносе отрисовки на GPU (3D трансформации)
✕ Фильтры работают лишь в webkit (caniuse.com/css-filters)
✕ Большая деградация производительности в браузерах без поддержки 3D трансформаций
✕ Отсутствие субпиксельного позиционирования без 3D трансформаций
![Page 8: Попасть в мишень](https://reader038.vdocuments.site/reader038/viewer/2022103000/556fd3f7d8b42af8088b4752/html5/thumbnails/8.jpg)
html5 + css3
API Docs Community Features Perf
5 5 5 2 1
3 2 3 5 4+
$.transit 5 5 2 1 5
![Page 9: Попасть в мишень](https://reader038.vdocuments.site/reader038/viewer/2022103000/556fd3f7d8b42af8088b4752/html5/thumbnails/9.jpg)
canvas✓ Простота разработки – много библиотек анимации
✓ Работает везде начиная с IE9 (caniuse.com/canvas)
✓ Поддерживает субпиксельное позиционирование
✓ Позволяет делать любые манипуляции с изображениями (фильтры и т.д.)
✕ Любые манипуляции с изображениями очень трудозатратны
✕ Не поддерживает 3D трансформации изображений
![Page 10: Попасть в мишень](https://reader038.vdocuments.site/reader038/viewer/2022103000/556fd3f7d8b42af8088b4752/html5/thumbnails/10.jpg)
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 не поддерживается
![Page 11: Попасть в мишень](https://reader038.vdocuments.site/reader038/viewer/2022103000/556fd3f7d8b42af8088b4752/html5/thumbnails/11.jpg)
webgl✓ Высокая производительность при работе с изображениями
✓ Поддержка производительных фильтров и трансформаций
✓ Огромный API для работы с 3D сценой, поверхностями и текстурами
✕ Не достаточная доля браузеров поддерживает работу с webgl (caniuse.com/webgl)
✕ Сложная разработка. Имеются библиотеки, но их документации оставляют желать лучшего
✕ Код, оптимизированный под webgl при деградации на canvas, в старых браузерах получается малопроизводительным
![Page 12: Попасть в мишень](https://reader038.vdocuments.site/reader038/viewer/2022103000/556fd3f7d8b42af8088b4752/html5/thumbnails/12.jpg)
webgl
API Docs Community Features Perf
three.js* 2 5 5 4 5
pixi.js 5 4 3 2 5
* – не поддерживает работу со спрайтами
![Page 13: Попасть в мишень](https://reader038.vdocuments.site/reader038/viewer/2022103000/556fd3f7d8b42af8088b4752/html5/thumbnails/13.jpg)
Update!14 января 2013г в EaselJS добавлена
экспериментальная высокопроизводительная поддержка webgl
Высокоуровневый API ограничен, но прирост производительности очень высок.
Разработкой webgl рендера занимаются совместно @gskinner и Mozilla
![Page 14: Попасть в мишень](https://reader038.vdocuments.site/reader038/viewer/2022103000/556fd3f7d8b42af8088b4752/html5/thumbnails/14.jpg)
Приз зрительских симпатий был отдан
реализации на canvasИз-за малой доли поддержки webgl в браузерах на октябрь-ноябрь 2013,
а так же расширенных возможностей необходимых для поставленной задачи
![Page 15: Попасть в мишень](https://reader038.vdocuments.site/reader038/viewer/2022103000/556fd3f7d8b42af8088b4752/html5/thumbnails/15.jpg)
После исследований выбор пал на набор библиотек под названием CreateJSИ библиотеку для работы с графикой – EaselJS
(https://github.com/CreateJS/EaselJS)
![Page 16: Попасть в мишень](https://reader038.vdocuments.site/reader038/viewer/2022103000/556fd3f7d8b42af8088b4752/html5/thumbnails/16.jpg)
Но конечно же все оказалось не так просто...
![Page 17: Попасть в мишень](https://reader038.vdocuments.site/reader038/viewer/2022103000/556fd3f7d8b42af8088b4752/html5/thumbnails/17.jpg)
Первая версия proof of concept
• 1 canvas – все сцены отрисовываются на нем
• Фильтры motion-blur накладываемые в реальном времени
• Изменение течения времени (эффект slow-mo) за счет изменения количества кадров
![Page 18: Попасть в мишень](https://reader038.vdocuments.site/reader038/viewer/2022103000/556fd3f7d8b42af8088b4752/html5/thumbnails/18.jpg)
В результате рекордные 4 fps
Для улиток может и сойдет, но что-то с этим нужно делать
![Page 19: Попасть в мишень](https://reader038.vdocuments.site/reader038/viewer/2022103000/556fd3f7d8b42af8088b4752/html5/thumbnails/19.jpg)
Что же было сделано?• Сцены разделены на несколько слоев
• Таймер заменен на requestAnimationFrame
• Сделана предгенерация motion-blur для элементов
• Режим slow-mo переделан со смены fps на менеджер анимаций
![Page 20: Попасть в мишень](https://reader038.vdocuments.site/reader038/viewer/2022103000/556fd3f7d8b42af8088b4752/html5/thumbnails/20.jpg)
Разделение сцен на слои
• Позволяет проще контролировать отрисовку элементов на разных сценах
• Позволяет сократить цикл отрисовки финальной сцены
• Когда сцену не видно ее просчет можно совсем исключить из цикла рендеринга
![Page 21: Попасть в мишень](https://reader038.vdocuments.site/reader038/viewer/2022103000/556fd3f7d8b42af8088b4752/html5/thumbnails/21.jpg)
Алгоритм работы motion-blur кеша
![Page 22: Попасть в мишень](https://reader038.vdocuments.site/reader038/viewer/2022103000/556fd3f7d8b42af8088b4752/html5/thumbnails/22.jpg)
Менеджер анимаций• Все анимации переделаны на использование простой формулы S = V*t
• Менеджер предоставляет именную коллекцию t для вышеописанной формулы
• При включении режима slow-mo все записи в коллекции переумножаются на фактор замедления, что приводит к замедлению скорости элементов без изменения fps
• Позволяет делать плавный переход от одной скорости к другой для заданной записи
![Page 23: Попасть в мишень](https://reader038.vdocuments.site/reader038/viewer/2022103000/556fd3f7d8b42af8088b4752/html5/thumbnails/23.jpg)
В результате получаем 50-60 fps
Уже не стыдно показать! Но просадки fps очень режут глаз
![Page 24: Попасть в мишень](https://reader038.vdocuments.site/reader038/viewer/2022103000/556fd3f7d8b42af8088b4752/html5/thumbnails/24.jpg)
Продолжаем оптимизировать дальше!
• Вынесение статичных текстур в DOM
• Оптимизация цикла отрисовки мишеней
![Page 25: Попасть в мишень](https://reader038.vdocuments.site/reader038/viewer/2022103000/556fd3f7d8b42af8088b4752/html5/thumbnails/25.jpg)
Вынесение статичных текстур в DOM
• Текстуры не имеющие никакие анимации или трансформации выносим в DOM элементы
• Применяем к этим элементам 3D трансформации для реализации плавного перемещения с субпиксельным смещением
• В браузерах, что не поддерживают 3D трансформации, деградируем до обычного смещения за счет стилей
![Page 26: Попасть в мишень](https://reader038.vdocuments.site/reader038/viewer/2022103000/556fd3f7d8b42af8088b4752/html5/thumbnails/26.jpg)
Оптимизация цикла отрисовки
• Все элементы, что не видны пользователю помечаем, как невидимые тем самым они исключаются из цикла отрисовки
• Для отрисовки обратной стороны мишеней используем один и тот же canvas с изображением
• Удаляем невидимую сторону мишени со сцены, чтобы она никак не участвовала в цикле отрисовки
• На сценах у которых используется фон не очищаем canvas перед отрисовкой
![Page 27: Попасть в мишень](https://reader038.vdocuments.site/reader038/viewer/2022103000/556fd3f7d8b42af8088b4752/html5/thumbnails/27.jpg)
В результате получаем стабильные 60 fps
![Page 28: Попасть в мишень](https://reader038.vdocuments.site/reader038/viewer/2022103000/556fd3f7d8b42af8088b4752/html5/thumbnails/28.jpg)
В результате получаем• В Google Chrome и Opera Next – стабильные
60 fps)
• Firefox – 59-60 fps. Под нагрузкой на браузер имеются кратковременные просадки на 1-2 fps)
• Safari – 57-60 fps. Что выливается в неприятные кратковременные фризы анимаций
![Page 29: Попасть в мишень](https://reader038.vdocuments.site/reader038/viewer/2022103000/556fd3f7d8b42af8088b4752/html5/thumbnails/29.jpg)
UpdateПосле анонса поддержки webgl в EaselJS ситуация
значительно изменилась
![Page 30: Попасть в мишень](https://reader038.vdocuments.site/reader038/viewer/2022103000/556fd3f7d8b42af8088b4752/html5/thumbnails/30.jpg)
Результаты с webgl
• В Google Chrome и Opera Next – стабильные 60 fps)
• Firefox – стабильные 60 fps)
• Safari – Ситуация не изменилась. Поддержка webgl по умолчанию заблокирована
![Page 31: Попасть в мишень](https://reader038.vdocuments.site/reader038/viewer/2022103000/556fd3f7d8b42af8088b4752/html5/thumbnails/31.jpg)
Загрузка ресурсов и отображение процесса
подготовки игры
![Page 32: Попасть в мишень](https://reader038.vdocuments.site/reader038/viewer/2022103000/556fd3f7d8b42af8088b4752/html5/thumbnails/32.jpg)
Что должен уметь делать загрузчик?
• Загружать разные форматы файлов: изображения и звуки
• Предоставлять информацию по текущему статусу загрузки
• Позволять обрабатывать ошибки загрузки файлов
![Page 33: Попасть в мишень](https://reader038.vdocuments.site/reader038/viewer/2022103000/556fd3f7d8b42af8088b4752/html5/thumbnails/33.jpg)
Все это умеет делать загрузчик PreloadJS
Входящий в комплект CreateJS (https://github.com/CreateJS/PreloadJS)
![Page 34: Попасть в мишень](https://reader038.vdocuments.site/reader038/viewer/2022103000/556fd3f7d8b42af8088b4752/html5/thumbnails/34.jpg)
Так почему не что-то другое?
![Page 35: Попасть в мишень](https://reader038.vdocuments.site/reader038/viewer/2022103000/556fd3f7d8b42af8088b4752/html5/thumbnails/35.jpg)
Чем же PreloadJS лучше?• Работа с XHR2 для отображения реального процесса загрузки с поддержкой фоллбеков
• Возможность параллельной загрузки с поддержкой очередей
• Поддержка плагинов. Есть плагин постобработки звуковых файлов для работы с библиотекой SoundJS
• Хорошая документация и открытый API
![Page 36: Попасть в мишень](https://reader038.vdocuments.site/reader038/viewer/2022103000/556fd3f7d8b42af8088b4752/html5/thumbnails/36.jpg)
Процесс подготовки игры
Для отображения процесса создания motion-blur кеша придется доработать загрузчик
![Page 37: Попасть в мишень](https://reader038.vdocuments.site/reader038/viewer/2022103000/556fd3f7d8b42af8088b4752/html5/thumbnails/37.jpg)
Как это было сделано• Создан класс Loader, который позволяет добавлять в очередь загрузки PreloadJS кастомные записи
• Перед созданием motion-blur кеша добавляем равное количеству элементов записи в очередь загрузки
• После создания кеша для элемента отстреливаем событие готовности, что переключает очередь загрузки будто мы загрузили файл
![Page 38: Попасть в мишень](https://reader038.vdocuments.site/reader038/viewer/2022103000/556fd3f7d8b42af8088b4752/html5/thumbnails/38.jpg)
Готово!Таким образом, в процесс отображения 100% входит, как загрузка файлов, так и подготовка всех элементов игры
![Page 39: Попасть в мишень](https://reader038.vdocuments.site/reader038/viewer/2022103000/556fd3f7d8b42af8088b4752/html5/thumbnails/39.jpg)
Работа со звуком
![Page 40: Попасть в мишень](https://reader038.vdocuments.site/reader038/viewer/2022103000/556fd3f7d8b42af8088b4752/html5/thumbnails/40.jpg)
Какие требования к работе со звуком?
• Воспроизведение одного или нескольких звуков одновременно
• Кроссбраузерное воспроизведение звуков
• Минимальный контроль за воспроизведением: проигрывание, пауза
![Page 41: Попасть в мишень](https://reader038.vdocuments.site/reader038/viewer/2022103000/556fd3f7d8b42af8088b4752/html5/thumbnails/41.jpg)
Даешь библиотеку для облегчения жизни!
А есть ли что-нибудь в наборе CreateJS для работы со звуками?
![Page 42: Попасть в мишень](https://reader038.vdocuments.site/reader038/viewer/2022103000/556fd3f7d8b42af8088b4752/html5/thumbnails/42.jpg)
Как оказалось есть!Встречаем SoundJS!
(https://github.com/CreateJS/SoundJS)
![Page 43: Попасть в мишень](https://reader038.vdocuments.site/reader038/viewer/2022103000/556fd3f7d8b42af8088b4752/html5/thumbnails/43.jpg)
Но всех проблем это не решило :(
• В IE 9 есть небольшая задержка перед проигрыванием звуков
• Если в Windows не настроен WMP, то звуки в IE воспроизводиться вообще не будут.
• При включении Web Audio API в Firefox 25 перестали воспроизводиться все звуки. Было исправлено обновлением SoundJS
• В Firefox 25 на всех Windows машинах mp3 файлы не загружались корректно. Было исправлено в новой версии Firefox
![Page 44: Попасть в мишень](https://reader038.vdocuments.site/reader038/viewer/2022103000/556fd3f7d8b42af8088b4752/html5/thumbnails/44.jpg)
Что хотелось, но не получилось...
![Page 45: Попасть в мишень](https://reader038.vdocuments.site/reader038/viewer/2022103000/556fd3f7d8b42af8088b4752/html5/thumbnails/45.jpg)
Не получилось реализовать
• Разворот мишеней с настоящей 3d перспективой. Будет возможно в webgl версии
• Правдоподобный дым от выстрелов
![Page 46: Попасть в мишень](https://reader038.vdocuments.site/reader038/viewer/2022103000/556fd3f7d8b42af8088b4752/html5/thumbnails/46.jpg)
Выводы