Error trying to use sprite atlas for character

Phaser 3
1

Hi Guys,

I’m starting to invest some time into learning Phaser and i was able to play a little already.
I came up with some tutorials and i wanted to use the atlas feature for my character Sprite, for some reason even if it looks like the Sprite sheet is being loaded correctly and the generateFrameNames method seems to return something as soon as i want to play that animation i’m getting

TypeError: t is undefined

I’m guessing the issue is simple but i can’t seem to find it. if you guys have any directions or suggestions I’ll be much appreciated. (see the source attached, npm start should do the trick to run it locally with gulp)

Animation definition src/animations/guyhat.js

   scene.anims.create({
      key: 'walk',
      frames: scene.anims.generateFrameNames(spriteKey, {
        prefix: 'walk_',
        start: 0,
        end: 15
      }),
      frameRate: 10
      // repeat: -1
    });

   scene.anims.create({
      key: 'stand',
      frames: scene.anims.generateFrameNumbers(spriteKey, {
        prefix: 'idle_',
        start: 0,
        end: 15
      }),
      frameRate: 10
      // repeat: -1
    });

Attempt to play animation src/sprites/player.js

   update(activeInput, time, delta) {
        if (activeInput.left.isDown || activeInput.a.isDown) {
          this.setVelocityX(-160);
          this.flipX = true;
          //this.play('walk', true);
        } else if (activeInput.right.isDown || activeInput.d.isDown) {
          this.setVelocityX(160);
          this.flipX = false;
          //this.play('walk', true);
        } else {
          this.setVelocityX(0);
          this.play('stand', true);
        }

        if (
          (activeInput.up.isDown || activeInput.w.isDown) &&
          this.body.onFloor()
        ) {
          this.jump();
        }
      }

See source on github:

Thanks in advance!

Edit:

The full stack-trace of the exception

TypeError: t is undefinedphaser.min.js:1:543095
    setCurrentFrame phaser.min.js:1
    updateFrame phaser.min.js:1
    load phaser.min.js:1
    load phaser.min.js:1
    load phaser.min.js:1
    _startAnimation phaser.min.js:1
    play phaser.min.js:1
    play phaser.min.js:1
    update player.js:32
    update stage.js:54
    step phaser.min.js:1
    update phaser.min.js:1
    step phaser.min.js:1
    step self-hosted:1023
    step phaser.min.js:1
    step self-hosted:1019
    e phaser.min.js:1
2

Print the scene.anims.generateFrameNames(spriteKey, { prefix: 'walk_', start: 0, end: 15 }) to see what it contains (as you say it seems to return “something” :)).

You are trying to play an animation called “stand”, but you do not show creating it? Should be a scene.anims.create(… with they key “stand” etc.

1 Like
3

Hi! thanks for answering, yes sorry i didn’t add the stand definition (just added in)
And when i print scene.anims.generateFrameNames(spriteKey, { prefix: 'walk_', start: 0, end: 15 }) i’m getting

[
  {
    "key": "guyhat",
    "frame": "walk_1"
  },
  {
    "key": "guyhat",
    "frame": "walk_2"
  },
  {
    "key": "guyhat",
    "frame": "walk_3"
  },
  {
    "key": "guyhat",
    "frame": "walk_4"
  },
  {
    "key": "guyhat",
    "frame": "walk_5"
  },
  {
    "key": "guyhat",
    "frame": "walk_6"
  },
  {
    "key": "guyhat",
    "frame": "walk_7"
  },
  {
    "key": "guyhat",
    "frame": "walk_8"
  },
  {
    "key": "guyhat",
    "frame": "walk_9"
  },
  {
    "key": "guyhat",
    "frame": "walk_10"
  },
  {
    "key": "guyhat",
    "frame": "walk_11"
  },
  {
    "key": "guyhat",
    "frame": "walk_12"
  },
  {
    "key": "guyhat",
    "frame": "walk_13"
  },
  {
    "key": "guyhat",
    "frame": "walk_14"
  },
  {
    "key": "guyhat",
    "frame": "walk_15"
  }
]

Should that objects contain more information than key and frame?

PS in my atlas there is only 15 sprites named with prefix walk i try to change start and end (e.g. start: 0, end: 25) to see if i was really getting what is it in the atlas and it still returns an Array[15], so it looks like it’s reading it fine.

4

Yes, that looks to be correct. Print the stand version as well so you know it also contains the correct content. If it has the correct object then it should work from what I can see, at least it looks the same as what I myself have.

Do a test with creating one animation, only try to play that animation and do it in one file to make sure all is loaded and referenced properly and to eliminate chance of error being because of something else.

1 Like
5

Probably you want to be using generateFrameNames() for the ‘stand’ animation as well, not generateFrameNumbers().

1 Like
6

Yes i do :P, read it 100 times and never seen that i was calling the wrong method.

Thanks a lot guys!!!