MeMyMo Posted February 24, 2017 Share Posted February 24, 2017 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 Link to comment Share on other sites More sharing options...
drhayes Posted February 24, 2017 Share Posted February 24, 2017 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. Link to comment Share on other sites More sharing options...
MeMyMo Posted February 24, 2017 Author Share Posted February 24, 2017 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! Link to comment Share on other sites More sharing options...
ldd Posted February 24, 2017 Share Posted February 24, 2017 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 MeMyMo 1 Link to comment Share on other sites More sharing options...
Recommended Posts