Problem referencing correct texture in atlas

[Jambutters]

I'm pretty new to JS so I apologize for the messy code. Also don't hold back on telling me what I should and shouldn't do design wise! The problem is that way at the bottom where the for loop is, it is not referencing the textures I want as declared in the variables head and body early on. But when I test it out in about line 16 or so, it does reference the correct texture.Thanks for reading

 

class Player {
    constructor(dataObj) { //
        this.uid = dataObj.username;
        this.sprite = dataObj.sprite || "default";
        this.x = dataObj.x || 0;
        this.y = dataObj.y || 0;
        this.width = 32;
        this.height = 32;
        this.PIXISPRITE;
        this.testSprite;
        if (dataObj.sprite.custom === false) {
            let spriteTextures = [];
            let head = loaderSource["/client/img/custom_head.json"].textures[this.sprite.layer1 + ".png"];
            let body = loaderSource["/client/img/custom_body.json"].textures[this.sprite.layer2 + ".png"];
            spriteTextures.push(head, body);
            console.log(head);
            this.testSprite = new PIXI.Sprite(head); 
/*when I test this, it grabs the texture from atlas just fine. */

            let createArrComponents = (paraSpriteText) => {
                let arrayTextures = [];
                let counterX = 0;
                let counterY = 0;
                for (let i = 0; i < paraSpriteText.length; i++) {
                    let tmpArray = [];
                    let indexspriteTextures = i;
                    const ROWS = paraSpriteText[i].width / this.width;
                    const COLUMS = paraSpriteText[i].height / this.height;
                    for (let i = 0; i < ROWS * COLUMS; i++) {
                        let rectFrameObj = new PIXI.Rectangle(counterX, counterY, this.width, this.height);
                        counterX += this.width;
                        let framedTexture = new PIXI.Texture(paraSpriteText[indexspriteTextures]);
                        framedTexture.frame = rectFrameObj;
                        tmpArray.push(framedTexture);
                        if (counterX >= this.width * ROWS) {
                            counterX = 0;
                            counterY += this.height;
                        }
                    }
                    arrayTextures.push(tmpArray);
                }
                return arrayTextures;
            };
            let spriteComponentsArr = createArrComponents(spriteTextures);
            console.log(spriteComponentsArr);
            for (let i = 0; i < spriteComponentsArr.length; i++) {
                let headSprite = new PIXI.extras.AnimatedSprite(spriteComponentsArr[0]);
/*THESE TWO ARE NOT REFFERENCING THE TEXTURE I WANT AS DECLARED IN THE VARIABLES head & body */
                this.PIXISPRITE = headSprite;
                headSprite.addChild(new PIXI.extras.AnimatedSprite(spriteComponentsArr[1])); //ADDSSTHEBODY
            }
        }
        Player.list[this.uid] = this;
    }
    createSelfSprite() {
    }
}

let test = new Player({username: "testy", 
sprite: {layer1: "head_no1",
          layer2: "body_no6"}
});

 

[ivan.popelyshev]

for (let i = 0; i < paraSpriteText.length; i++) {
for (let i = 0; i < ROWS * COLUMS; i++) {

double "i".

[Jambutters]

2 hours ago, ivan.popelyshev said:

for (let i = 0; i < paraSpriteText.length; i++) {
for (let i = 0; i < ROWS * COLUMS; i++) {

double "i".

does the "let" scope to the block ? 
Changed it and no luck :s.

[Jambutters]

Also how would you check if a texture exists in the atlas or not?

Trying this:  

 

if (loaderSource[atlasJson].textures[srcImg]) {

//logic
}

and it gives me Uncaught TypeError: Cannot read property 'textures' of undefined.

edit: nevermind , fixed this type error

 

[ivan.popelyshev]

let framedTexture = new PIXI.Texture(paraSpriteText[indexspriteTextures]);
framedTexture.frame = rectFrameObj;

//this one instead

let framedTexture = new PIXI.Texture(paraSpriteText[indexspriteTextures], rectFrameObj);

Try this one. There are some bad effects in Texture constructor that can affect it.

Also, do you know how to debug with breakpoints and watch?

[Jambutters]

On 7/19/2017 at 11:56 PM, ivan.popelyshev said:

let framedTexture = new PIXI.Texture(paraSpriteText[indexspriteTextures]);
framedTexture.frame = rectFrameObj;

//this one instead

let framedTexture = new PIXI.Texture(paraSpriteText[indexspriteTextures], rectFrameObj);

Try this one. There are some bad effects in Texture constructor that can affect it.

Also, do you know how to debug with breakpoints and watch?

Bad effects in the texture constructor? I am debugging with console.logs everywhere and can't seem to find the problem but I'll try w/ debugger and see if I can catch anything. Really strange problem...I am passing the correct string though... Does the first object in the atlas get referenced first if there is an error or if the fail to specify what image you want in the atlas? . Is there a way to check what image I'm representing when creating a texture using ``` new PIXI.Texture(PIXI.loader.resources['atlas.json'].textures["theimage.png"]) ``` ? Like, yeah, is there a way to check "theimage.png" value referenced on the texture object?

 

Narrowed down the problem a bit more. It works and references correct sprite fine when creating a PIXI.Sprite , but when doing a PIXI.extras.AnimatedSprite, it always gets it wrong it seems? 

[Jambutters]

On 7/19/2017 at 11:56 PM, ivan.popelyshev said:

let framedTexture = new PIXI.Texture(paraSpriteText[indexspriteTextures]);
framedTexture.frame = rectFrameObj;

//this one instead

let framedTexture = new PIXI.Texture(paraSpriteText[indexspriteTextures], rectFrameObj);

Try this one. There are some bad effects in Texture constructor that can affect it.

Also, do you know how to debug with breakpoints and watch?

Found the problem... Unsure if this is a bug. I am grabbing the correct texture which is 200px down but it's not using the grabbed texture starting location @ Y: 200px down , as it's starting point for x: 0, y: 0, rather it's always starting from the entire sprite sheet... Can fix from reading the json file though. Is there another way to deal with this ? 

 

Resolvedish .. 

 

[ivan.popelyshev]

let oldTexture = ...;

let newRect = new PIXI.Rectangle(oldTexture.frame.x + 200, oldTexture.frame.y, w, h);
let newTexture = new PIXI.Texture(oldTexture.baseTexture, newRect);

Yes, it does not take frame into account, it just copies base texture. You have to add old rect to new one.