Sign in to follow this  
Jambutters

Problem referencing correct texture in atlas

Recommended Posts

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"}
});

 

Share this post


Link to post
Share on other sites

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

 

Share this post


Link to post
Share on other sites
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?

Share this post


Link to post
Share on other sites
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? 

Share this post


Link to post
Share on other sites
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 .. 

 

Share this post


Link to post
Share on other sites
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.

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.