Question

我有这种水平移动Sprite的方法，效果很好，但我真的很困惑如何为它添加尾随效果。我想在画布上留下精灵的印记。

这是我当前的代码（我正在使用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，它将是一个包含1个带有alpha 1的精灵的类，然后在它后面可能会增加2或3个精灵，并增加透明度。然后，在每次更新时，每个透明图像将自身设置为与主精灵相对的偏移位置。

因此，如果主精灵位于位置100，并且以30的速度向右移动x轴，我可以使透明精灵1为90，透明精灵2为80，透明精灵3为70。如果他以9的速度移动，我会将它们移动到位置97,94和91.这样你就可以获得越野效果，你越快，鬼影就越散布。

使用Pixi.js（V4）在Sprite上创建尾随效果

1 个答案: