Placing a PIXI sprite in a loop from a texture

user_2851791 0
Viewed 395

I'm placing images from a texture on my container when an item in my object has a certain value.

My code do place an image on every position I want, but the problem I have is that every image is the same one. Because the image that is showing up everywhere is the last one from the array i guess that there is something wrong with the way I loop, on the other hand I tried all kind of different ways to loop and the outcome was never different for me. Maybe I'm using PIXI wrong?

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)
})
pixi.js javascript
1 Answers

Maybe you have to make a new texture as well? Else you just keep resetting the frame of the same texture.

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)
user_10835720
Related