0

Somehow I am getting an extra little artifact at the top of my AnimatedSprite frames. I am pretty sure it is the bottom of the sprite packed above. I thought that my sprite sheet PNG was off so I used TexturePacker to break up and re-assemble the spritesheet. While the spritesheet JSON I am using is not the same as the one generated by TexturePacker but the coordinates match. I even tried replacing some of the frames with the content from the texture packer version.

Here is the JSON abridged to just the last frame -- this comes out with a phantom line at the top:

{
    "meta": {
        "image": "slime3.png",
        "size": {"w":288,"h":160},
        "scale": "1"
    },
    "frames": {
        "slime_pink_die_1": {
            "frame": {"x":256,"y":128,"w":32,"h":32},
            "rotated": false,
            "trimmed": false,
            "spriteSourceSize": {"x":0,"y":0,"w":32,"h":32},
            "sourceSize": {"w":32,"h":32}
        }
    }
}

Here is how this is loaded:

        const slimecolors = ['pink'];
        const slimeActions = [{name:'die',frames:1}];
        slimecolors.forEach(slimeColor => {
            const slimeActionTextures = [];
            slimeActions.forEach(action => {
                const actionTextures = [];
                for (let j = 0; j < action.frames; j++) {
                    const texture = Texture.from(`slime_${slimeColor}_${action.name}_${j + 1}`);
                    actionTextures.push(texture);
                }
                slimeActionTextures.push(actionTextures);
            });

            const slime = new AnimatedSprite(slimeActionTextures[0]);
            slime.actions = slimeActionTextures;
            slime.x = (this.screen.width-128) * Math.random() + 64;
            slime.y = (this.screen.height-128) * Math.random() + 64;
            slime.dx = 2 * Math.random() * Math.sign(Math.random() - 0.5);
            slime.dy = 2 * Math.random() * Math.sign(Math.random() - 0.5);
            slime.scale.set(1 + (2 * Math.random()));
            slime.animationSpeed = 0.25;
            slime.gotoAndPlay(Math.random() * 4);
            this.slimes.push(slime);
            this.stage.addChild(this.slimes.slice(-1)[0]);
        });

(here this is an instance of a PIXI.Application).

The sprites on the top row do not have this artifact which is why I repacked.

nickdmax
  • 539
  • 2
  • 4
  • 11
  • I just noticed the artifact line is transparent and seems to pulses as the sprite moves. – nickdmax Jun 21 '20 at 23:26
  • I scaled it up to 8 - and was able to verify that the colors match the sprite packed above it. However, since the artifact has some transparency (and the bottom line of the sprites does not have any transparency) I suspect it has something to do with scaling the sprite. (although if I set the scale to 1 I still the issue so. . . ) – nickdmax Jun 21 '20 at 23:36

0 Answers0