@Magneto903

Как сделать на html canvas эффект motion blur (в реалтайме)?

У меня простой макет игры (кораблик летает по клеточному полю)
Управление:
W/стрелка на верх - ускорение
Мышка - направление корабля
(На всякий случай щёлкните мышью по полю, чтобы управлять, может заедать)


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

Сначала я просто хотел через неполную очистку canvas (заливка частично закрытым прямоугольником), вот так:


Однако это хорошо смотрится лишь тогда, когда кораблик летит на маленькой скорости. На большой поле просто превращается в мелкую сетку, что тоже некрасиво. И это не эффект размытия. Это просто дублирование изображения с небольшим смещением, но не эффект motion blur.

Тогда я решил использовать API canvas для применения фильтра размытия

Это уже лучше смотрится (особенно в сочетании с неполной очисткой canvas), но этот метод слишком тяжёлый и сильно сажает производительность

Я начал искать библиотеки, которые могут сделать такой эффект, но более лёгким способом. Нашёл такую


Однако во-первых, внешне это выглядит как-то не очень. Во-вторых, это также слишком тормозит игровой процесс (явно это не 60FPS)

Может есть какой-то способ добиться эффекта motion blur, но с хорошей производительностью? Есть ли какие-то библиотеки? Или на canvas это невозможно сделать?
  • Вопрос задан
  • 222 просмотра
Решения вопроса 1
twobomb
@twobomb
Чуть подправил функцию рисования сетки (оставил один beginPath и один stroke) и по крайней мере у меня фпс с 30 вырос до максимально возможных для requestAnimationFrame 60 фпс. Всё это на родном blur фильтре
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы