Unable to get sprite to animate

[Vivraan]

Migrated from

#7136

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

My code:
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

The commit I'm working from is this one, which summarises the repro steps.

Replies from Issues thread

@bigtimebuddy says:
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.

[Vivraan]

@bigtimebuddy I tried to take your code (I got to learn just from viewing it) but I still can't get it to work.

[Vivraan]

Here's how I'm using the components from your fiddle:
(Commit on GitLab)

// From https://jsfiddle.net/bigtimebuddy/qo12kdnj/
        let isLeft = false
        let isRight = false

        const onKeypress = ({ type, key }) => {
            const isKeyDown = type === 'keydown'
            switch (key) {
                case INPUT_MOVE_LEFT:
                    isLeft = isKeyDown
                    break
                case INPUT_MOVE_RIGHT:
                    isRight = isKeyDown
                    break
            }
        }

        window.addEventListener('keydown', onKeypress)
        window.addEventListener('keyup', onKeypress)

        let lastDirection = -1

        const move = () => {
            let direction = Number(isRight) - Number(isLeft)

            if (direction !== lastDirection) {
                if (direction === 0) {
                    this._animState = 'IDLE'
                    this._anim.textures = animations.idle
                    this._vx = 0
                    this._anim.scale.x = this._anim.scale.y
                } else {
                    this._animState = 'WALKING'
                    this._anim.textures = animations.walking
                    this._vx = MOVE_SPEED * direction
                    this._anim.scale.x = this._anim.scale.y * direction
                }
                this._anim.play()
                lastDirection = direction
            }
        }

        this._behaviour = Object.freeze({
            IDLE: move,
            WALKING: move,
            IN_AIR: () => { }
        })

        this._app.ticker.add(() => {
            const dt = deltatime(this._app.ticker)
            this._behaviour[this._animState].call()
            this._anim.update(dt)
...

[Vivraan]

Now my entire movement isn't working, even after I began updating this._vx!

[Vivraan]

Anyone? @bigtimebuddy?

Apologies for tag-spamming in so many places!

[NikolasP98]

I'm having the same issue... The animated sprite is moving, but frames are stuck on zero and aren't looping. My code only changes animations when needed, or else it escapes the re-assignment of textures. Directions change as well. Here's my code: https://pastebin.com/9kzu7bmJ and a live example: https://portfolio-e-five.vercel.app/peeps