Как реализовать эффект (исчезающего следа) как в игре dark echo?

Question

[Magneto903]

Я хочу сделать эффект визуального звука, который отражается от стен и постепенно затухает (как в игре dark echo).

Каким образом я могу это сделать средствами canvas?


Проблема в следующем:

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


WASD или стрелки - движение

Пробел - создать звук


В примере выше я не стал добавлять полупрозрачность частиц, т.к. и так понятно, что такое кол-во частиц нагружает систему

Однако если я буду неполностью стирать canvas, то во время движения линии будут искажаться (я для имитации viewport (движения камеры) отнимаю условную позицию камеры). Это хорошо видно, если стрелками туда-сюда двигаться (смотрите пример ниже)

Движение WASD или стрелки

Пробел - создать звук


Мне обязательно нужно имитировать viewport, т.к. вся карта не помещается в экране

Вопрос: как сделать такой эффект, чтобы он не был сильно тяжёлым и не тормозил браузер, но при этом выглядел достойно (не как во втором примере)?

Answer 1

[RAX7]

Используй линейный градиент, примерно как здесь: https://jsfiddle.net/RAX7/m2t98cjq/

Comments

[Magneto903]

А этот метод будет работать, когда частицы будут резко менять направление (например отталкиваться от стен)?

[RAX7]

Magneto903, будет, у тебя же на скрине видно, что частица - это просто две линии нарисованные градиентом.

[Magneto903]

RAX7, При изменении направления старый градиент не сохраняется и сразу исчезает, хотя по длине он ещё не должен исчезать. Как я могу это исправить? Мне нужно отслеживать, в какой точке произошло изменение направления и от неё уже рисовать старый градиент?

[RAX7]

Magneto903,

[Magneto903]

RAX7, Думаю, это можно считать решением)