Попасть в мишень

25 %
75 %
Information about Попасть в мишень
Technology

Published on February 17, 2014

Author: abietis

Source: slideshare.net

Description

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

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

Тир удачи 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 Community Features Perf 5 5 5 2 1 3 $.transit Docs 2 3 5 4+ 5 5 2 1 5

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

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

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 версии • Правдоподобный дым от выстрелов

Выводы

Add a comment

Related presentations

Related pages

Не попасть в мишень — allRefs.net

Не попасть в мишень Право Библиотека | Совершенствование души. На сайте allRefs.net есть ...
Read more

Игра в дартс № 1 - Попади в мишень - YouTube

Самая первая игра в которую играли все любители и профессионалы дартса это ...
Read more

Попасть в мишень - YouTube

Знакомство с воинской службой на стрельбище учебной авиационной базы II ...
Read more

Онлайн игра Попади в мишень

Онлайн игра Попади в мишень играть бесплатно. ... надо в них попасть и набрать очки.
Read more

Попади в мишень! — Играй в бесплатную флеш игру онлайн!

Описание игры: Тебе предстоит попасть в мишень и заработать за 60 секунд как можно ...
Read more

Вероятность попасть в м... - Школьные Знания.com

Вероятность попасть в мишень равна 0,6. Произведено три выстрела. Какова вероятность, ...
Read more

Игра - попасть в мишень

Любите поиграть онлайн ? Попробуйте сыграть в флеш игру попасть в мишень бесплатно ...
Read more

Флеш игра Попади в мишень

Не расстраивайтесь, если вы не попадаете в мишень с первого раза. Немного практики, и ...
Read more

Попасть в мишень - games.muzofon.com

Цель игры состоит в том, чтобы ударить в середину мишени до истечения времени.
Read more

Как целиться из пистолета

Как целиться из пистолета. Если вам еще не довелось пострелять из пистолета, то в ...
Read more