Basic atlas animation problem (ES6, Cannot read property 'getFrameIndexes' of null, _frameData is null)

[MeMyMo]

Hi, I'm trying out this ES6 + Webpack + Phaser bootstrap project and I'm tring to load an Atlas, then create a sprite and add an animation to it:

import Phaser from 'phaser'
import Player from '../sprites/Player'

export default class extends Phaser.State {
  init () {}
  preload () {}

  create () {

    this.player = new Player({
      game: this.game,
      x: this.world.centerX,
      y: this.world.centerY
    })

    this.game.add.existing(this.player)

    this.player.animations.add('anim', ['soldier1_hold.png'], 24, true)
    this.player.animations.play('anim')
  }
}

The Sprite:

import Phaser from 'phaser'

export default class extends Phaser.Sprite {

  constructor ({ game, x, y, key, frame }) {
    super(game, x, y, key, frame)
  }

  update () {}

}

In another state I load the atlas:

import Phaser from 'phaser'
import { centerGameObjects } from '../utils'

export default class extends Phaser.State {
  init () {}

  preload () {
    this.loaderBg = this.add.sprite(this.game.world.centerX, this.game.world.centerY, 'loaderBg')
    this.loaderBar = this.add.sprite(this.game.world.centerX, this.game.world.centerY, 'loaderBar')
    centerGameObjects([this.loaderBg, this.loaderBar])

    this.load.setPreloadSprite(this.loaderBar)

    this.load.atlasXML('characters', 'assets/images/topdown-shooter/Spritesheet/spritesheet_characters.png', 'assets/images/topdown-shooter/Spritesheet/spritesheet_characters.xml');
  }

  create () {
    this.state.start('Game')
  }

}

 

I'm not sure where I'm messing up, seems to me that it may be related to ES6, but I'm pretty new to it.

Any ideas?

src.zip

[drhayes]

You've got the sprite's constructor wrong. It's not "constructor({game, x, y, key, frame})" it's "constructor(game, x, y, key, frame)". Note the missing curly braces. Your call to super is fine, though.

[MeMyMo]

And I forgot to pass the asset! Doh!

 

This works:

 

import Phaser from 'phaser'
import Player from '../sprites/Player'

export default class extends Phaser.State {
  init () {}
  preload () {}

  create () {

    this.player = new Player({
      game: this.game,
      x: this.world.centerX,
      y: this.world.centerY,
      asset: 'characters'
    })

    this.game.add.existing(this.player)

    this.player.animations.add('anim', ['soldier1_hold.png'], 24, true)
    this.player.animations.play('anim')
  }

  render () {
    if (__DEV__) {
      this.game.debug.spriteInfo(this.player, 32, 32)
    }
  }
}

import Phaser from 'phaser'

export default class extends Phaser.Sprite {

  constructor ({ game, x, y, asset, frame }) {
    super(game, x, y, asset, frame)
    this.anchor.setTo(0.5, 0.5);
  }

  update () {

...

Thanks!

[ldd]

just so that other people see this, the curly braces are valid in ES6, and it is called object destructuring.

You can read more about it here