Unable to animate using AnimatedSprite

[Vivraan]

Expected Behavior

Player walking animation as in:

This.is.Mario50.2021-01-10.17-00-00.mp4

Current Behavior

Player switching animations but not changing frames in:

screen-recorder-sun-jan-10-2021-17-00-57.mp4

Often, if I change the frame using gotoAndPlay(), the frame is set to this index in spite of emptying the cache while refreshing.

This.is.Mario50.and.11.more.pages.-.Personal.-.Microsoft.Edge.2021-01-11.12-38-14.mp4

Possible Solution

https://gitlab.com/Vivraan/mario50-pixijs/-/blob/227a18672242d9c468274e6a50c53cff1adda7f2/player.js#L63-73

        const move = (dt) => {
            if (this._vx != 0) {
                this._anim.textures = animations.walking
                if (!this._anim.playing) {
                    this._anim.play()
                }
                this._anim.scale.x = Math.sign(this._vx)
            } else {
                this._anim.textures = animations.idle
            }
        }

Steps to Reproduce

I raised this issue as a question rather than a bug report. The commit I'm working from is this one, which summarises the repro steps.

Environment

• pixi.js version: ^5.3.7
• Browser & Version: MS Edge 84.0.522.52 (Chromium)
• OS & Version: Windows 10 20H2 19042.685
• Running Example: Repo in GitLab

[bigtimebuddy]

@Vivraan I think your logic for move incorrectly calls every frame. This mean that it's constantly setting textures on your animation frame after frame. If you cache the previous direction to only handle changes, it's better.

Here's an isolated example (click on the character on the right and then use the left and right arrow keys to see the animation switch). https://jsfiddle.net/bigtimebuddy/qo12kdnj/

This is not a limitation of the AnimatedSprite. In your case, this is an appropriate use.

Also, for questions (not bugs) please post to the Discussion section Q&A instead. Thanks!

[Vivraan]

@Vivraan I think your logic for move incorrectly calls every frame. This mean that it's constantly setting textures on your animation frame after frame. If you cache the previous direction to only handle changes, it's better.

Here's an isolated example (click on the character on the right and then use the left and right arrow keys to see the animation switch). https://jsfiddle.net/bigtimebuddy/qo12kdnj/

This is not a limitation of the AnimatedSprite. In your case, this is an appropriate use.

Also, for questions (not bugs) please post to the Discussion section Q&A instead. Thanks!

Yeah, I just got acquainted with Discussions recently. Will keep this in mind.

[bigtimebuddy]

Awesome, will close this issue. Good luck with your project!

[Vivraan]

Awesome, will close this issue. Good luck with your project!

Hey @bigtimebuddy I just tried your solution but I still can't get it to work.
Should I raise this in Discussions?

[bigtimebuddy]

Yes, a discussion is good for this.

[Vivraan]

I've tagged you in the Q&A section. I suppose I need to do more work on this.

[Vivraan]

@bigtimebuddy Please check out #7144! Haven't seen any responses there!

Apologies for tag-spamming in so many places!

[bigtimebuddy]

I see your tagging. I unfortunately cannot help you debug your project at the moment, sorry. Hopefully someone else will be able to chime in. Good luck and keep at it, I'm sure you'll figure it out.