Pixi.js开发游戏时如何从ticker移除特定moveBullet函数实例

你之前调用ticker.add()时传入的是匿名箭头函数，没有保存该函数的引用，所以后续无法通过ticker.remove()精准移除对应的监听实例，按以下方案修改即可：

方案1：保存回调引用，移除时直接调用remove #

适合子弹数量不多、希望单实例独立绑定逻辑的场景：

修改createBullet函数，保存回调引用

function createBullet(sheet, sprite) {
    const bullet = new PIXI.Sprite(sheet.textures["sample.png"]);
    bullet.x = sprite.x
    bullet.y = sprite.y + 10
    bullet.height = bullet.height / 5
    bullet.width = bullet.width / 5
    app.stage.addChild(bullet);
    // 将回调函数挂载到bullet实例上保存引用
    bullet.moveHandler = (delta) => { moveBullet(delta, bullet) };
    bullet.ticker.add(bullet.moveHandler);
}

修改moveBullet函数，移除精灵同时移除ticker监听

function moveBullet(delta, b) {
    // 移动子弹
    b.y += (-BULLETSPEED * delta)

    // 子弹超出边界后删除
    if (b.y < -10)
    {
        app.stage.removeChild(b);
        // 移除对应的ticker监听
        b.ticker.remove(b.moveHandler);
        // 可选：销毁精灵实例释放内存
        b.destroy();
    }
}

方案2：统一管理子弹列表（更推荐） #

适合子弹数量多的场景，避免大量零散ticker监听带来的性能损耗：

// 全局维护子弹列表
const bullets = [];

// 修改createBullet，创建后推入数组
function createBullet(sheet, sprite) {
    const bullet = new PIXI.Sprite(sheet.textures["sample.png"]);
    bullet.x = sprite.x
    bullet.y = sprite.y + 10
    bullet.height = bullet.height / 5
    bullet.width = bullet.width / 5
    app.stage.addChild(bullet);
    bullets.push(bullet);
}

// 全局只注册一次ticker监听
app.ticker.add((delta) => {
    // 倒序遍历数组，避免删除元素导致的索引错乱
    for (let i = bullets.length - 1; i >= 0; i--) {
        const b = bullets[i];
        b.y += (-BULLETSPEED * delta);
        if (b.y < -10) {
            app.stage.removeChild(b);
            b.destroy();
            bullets.splice(i, 1);
        }
    }
})

内容的提问来源于stack exchange，提问作者Ori Levy