Pixi.js (V4)로 스프라이트에 트레일 링 효과 만들기

Question

스프라이트를 수평으로 이동시키는이 방법을 사용하면 문제가 없지만 실제로 후행 효과를 추가하는 방법에 의아해합니다. 움직이는 동안 스프라이트의 프린트를 캔버스에두고 싶습니다.

여기

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와 재귀를 사용하여 실행 (내가 타이프 라이터를 사용하고 있습니다) 내 현재 코드입니다.

감사

나는이 캔버스와 WebGL이 렌더러를 지원하기 위해 일을한다면

Answer 1

....

내 mountainMan를 들어

, 그것은 알파 1 일 스프라이트가 포함 된 클래스가 될 것입니다, 그리고 그 뒤에 어쩌면 투명성이 증가하는 2 ~ 3 개의 스프라이트. 그런 다음 각 업데이트시 각 투명 이미지는 기본 스프라이트의 오프셋 위치로 설정됩니다.

따라서 주 스프라이트가 100 위치에 있고 속도가 30으로 오른쪽으로 x 축으로 이동하는 경우 투명 스프라이트 1을 90, 투명 스프라이트 2를 80, 투명 스프라이트 3을 70 . 만약 그가 9의 속도로 움직 였다면, 나는 97, 94, 91 번 위치로 이동시킬 것입니다. 이렇게하면 유령 이미지가 더 빨리 퍼져 나갈 때 흔적 효과를 얻을 수 있습니다.