将 PIXI 精灵放置在纹理的循环中

Question

当我的对象中的某个项目具有特定值时，我将纹理中的图像放置在我的容器上。

我的代码确实在我想要的每个位置放置了一个图像，但我遇到的问题是每个图像都是相同的。因为随处可见的图像是阵列中的最后一个图像，所以我猜我的循环方式有问题，另一方面，我尝试了各种不同的循环方式，结果对我来说从来没有什么不同。也许我用错了 PIXI？

const texture = PIXI.utils.TextureCache.skills

const values = Object.values(treeData.nodes).filter(obj => {
    return obj.isKeystone === true
})

values.forEach(node => {
    const spriteData = treeData.skillSprites.keystoneInactive[3].coords[node.icon]
    // if i console my spriteData here, it looks fine and i get different data everytime
    const rectangle = new PIXI.Rectangle(spriteData.x, spriteData.y, spriteData.w, spriteData.h)
    texture.frame = rectangle

    const image = new PIXI.Sprite(texture)
    image.anchor.set(0.5)
    image.x = node.x
    image.y = node.y
    spriteContainer.addChild(image)
})

Answer 1

也许你还需要制作一个新的纹理？否则你只是不断重置相同纹理的框架。

const frame = new PIXI.Rectangle(spriteData.x, spriteData.y, spriteData.w, spriteData.h)
const newTexture = new PIXI.Texture(texture, frame)
const image = new PIXI.Sprite(newTexture)

将 PIXI 精灵放置在纹理的循环中

Placing a PIXI sprite in a loop from a texture

javascript

pixi.js