Создайте трейлинг-эффект на Sprite с Pixi.js (V4)

Question

У меня есть этот метод, который перемещает Sprite по горизонтали, что отлично работает, но я действительно озадачен тем, как добавить к нему конечный эффект. Я хочу оставить на холсте распечатку спрайта во время движения.

вот мой текущий код (я использую машинопись)

private dash =() => { 
    let warriorLeftPosX = this.viking.x + this.viking.width; 
    let warriorRightPosX = this.mountainMan.x - this.mountainMan.width; 
    this.viking.vx = this.vikingProperties.sprite_loop_velocity; 
    this.mountainMan.vx = this.mountainManProperties.sprite_loop_velocity; 
    this.viking.accelerationX = this.vikingProperties.animation.dash.acceleration; 
    this.mountainMan.accelerationX = this.mountainManProperties.animation.dash.acceleration; 

    if (warriorRightPosX > this.renderer.view.width/2 - (this.mountainMan.width/6) 
     || warriorLeftPosX < this.renderer.view.width/2 - (this.viking.width/6)) { 

     this.mountainMan.vx += this.mountainMan.accelerationX; 
     this.viking.vx += this.viking.accelerationX; 

     this.mountainMan.x -= this.mountainMan.vx; 
     this.viking.x += this.viking.vx;    
    } 
} 

этот метод работает с использованием рекурсии с requestAnimationFrame.

Благодаря

Answer 1

Если бы я делал это, чтобы поддержать Canvas и WebGL рендеры ....

Для моего mountainMan, было бы класс, который содержал 1 спрайт с альфа-1, а затем за ним, может быть, 2 или 3 спрайта с повышением прозрачности. Затем при каждом обновлении каждое прозрачное изображение устанавливает себя в положение смещения из основного спрайта.

Итак, если главный спрайт находился в положении 100, двигаясь по оси х вправо со скоростью 30, я мог бы сделать прозрачный спрайт 1 на 90, прозрачный спрайт 2 на 80 и прозрачный спрайт 3 при 70 Если бы он двигался со скоростью 9, я бы переместил их на позиции 97, 94 и 91. Таким образом, вы получаете эффект следа, когда быстрее вы будете больше распространять изображения призраков.