使用 Pixi.js (V4) 在 Sprite 上创建拖尾效果

Question

我有这个水平移动精灵的方法，效果很好，但我真的很困惑如何给它添加拖尾效果。我想在 canvas 中留下精灵移动时的打印。

这是我当前的代码（我使用的是 TypeScript）

    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，它将是一个 class，其中包含 1 个 alpha 1 的精灵，然后在它后面可能还有 2 或 3 个透明度增加的精灵。然后，在每次更新时，每个透明图像都会将自己设置到与主精灵的偏移位置。

所以如果主精灵在位置 100，以 30 的速度在 x 轴上向右移动，我可能会在 90 处制作透明精灵 1，在 80 处制作透明精灵 2，在 80 处制作透明精灵 3 70. 如果他以 9 的速度移动，我会将它们移动到位置 97、94 和 91。这样你就可以得到拖尾效果，你走得越快，重影图像就越分散。

使用 Pixi.js (V4) 在 Sprite 上创建拖尾效果

Create trailing effect on a Sprite with Pixi.js (V4)

sprite

typescript

pixi.js