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;    
    } 
} 

この方法は​​で再帰を使用して実行されます（私は活字体を使用しています）私の現在のコードです。

おかげ

私は、これはキャンバスやWebGLのレンダラーをサポートするためにやっていた場合は

Answer 1

....

私mountainManについては

、それはアルファ1と1つのスプライトが含まれていたクラスとなり、その後、その背後にあるかもしれません透明度が増しているスプライトが2つまたは3つ追加されています。次に、各更新時に、各透明イメージは、それ自体をメインスプライトからのオフセット位置に設定します。

したがって、主スプライトが位置100にあり、速度が30で右に移動すると、透明スプライト1が90、透明スプライト2が80、透明スプライト3が70になることがありますもし彼が9の速度で動いていたら、それらを97,94、そして91の位置に動かすでしょう。この方法では、ゴーストイメージがより広がるほど速く行くところでトレイル効果を得ます。