MeMyMo Posted February 24, 2017 Report 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 Quote Link to comment Share on other sites More sharing options...
drhayes Posted February 24, 2017 Report 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. Quote Link to comment Share on other sites More sharing options...
MeMyMo Posted February 24, 2017 Author Report 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! Quote Link to comment Share on other sites More sharing options...
ldd Posted February 24, 2017 Report 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 Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.