Sprite animation issue? Flickering

Questions
1

Hi,

I have a sprite created from an atlas image like this:

this.sprite = new Sprite({
            image: atlas,
            cols: 16, rows: 16,
            animations: animations,
        });
this.addChild(this.sprite);

Most of the time, it works just fine, but every once in a while I see flickering when moving the sprite or when changing animations.

It’s really hard to replicate or pinpoint the cause, as it’s very inconsistent.

The only pattern I’ve noticed is that it happens more frequently when the CPU or memory is under stress (for example, I had a memory leak, and during that time, I experienced it a lot).

Has anyone encountered something like this?

Any pointers on how to debug or investigate it would be greatly appreciated!

2

Can you DM me a URL to the spritesheet so we can test it out. Have not seen anything flicker. Rarely do I use that many frames for an animation, though. So it would be handy for us to test it.

3

Sure!

I’ve DM’d you a reduced version of the atlas image I’m using, which causes the flickering, along with a video demonstrating the issue.

Here’s the relevant code I’m using:

Animations (move and idle):

const PLAYER_ANIMATIONS = {
    idle: [40],
    up: [128 + 8, 128 + 8 + 3],
    right: [128 + 8 + 4, 128 + 8 + 4 + 3],
    down: [144 + 8, 144 + 8 + 3],
    left: [144 + 8 + 4, 144 + 8 + 4 + 3],
};

const PLAYER_IDLE_FRAMES = {
    up: 192 + 8 + 0,
    right: 192 + 8 + 1,
    down: 192 + 8 + 2,
    left: 192 + 8 + 3,
};

When moving:

this.sprite = new Sprite({
            image: atlas,
            cols: 16,
            rows: 16,
            animations: animations,
        });
this.addChild(this.sprite);

And when the player stops:

this.sprite.stopRun();
this.sprite.gotoAndStop(idleFrame);

Please let me know if you need anything else

4

Okay - let's work this out in the DM. We can put a conclusion here when we have one.

1 Like