problem with sprite.events.onInputDown.add() with Vue.js

[sillyhero]

Hello everyone ! 
I am a new web dev and is currently working with Vue.js framework.
Decided to try out making a game with Phaser 2, and I am currently loving it!
Although i ran in to some problems with mouse events, i have no problems with key down events ;)

currently I am trying to click on an image, just to console log it out. (will want to drag later on.)
but first thing is first, I cant even get my console log out. 
here is my code, and I am using it with vue.js!
Any help will be great ! Thank you! 

mounted () {
  let self = this
  if (this.game == null) {
    this.game = new Phaser.Game(window.innerWidth, window.innerHeight, Phaser.AUTO, this.$el, {
      preload: function preload () {
        self.preload(this)
      },
      create: function create () {
        self.create(this)
      },
      update: function update () {
        self.update(this)
      },
      render: function redner () {
        self.render(this)
      }
    })
  }
}

preload () {
  this.game.load.image('pink', require(`@/assets/images/packing/pink-bg.png`))
  this.game.load.image('cat', require(`@/assets/images/packing/cat-head.png`))
  this.game.load.image('table', require(`@/assets/images/packing/table.png`))
  this.game.load.image('plate', require(`@/assets/images/packing/plate.png`))
  this.game.load.spritesheet('container', require(`@/assets/images/packing/container-set.png`), 310, 270)
  this.game.load.spritesheet('scorePlate', require(`@/assets/images/packing/kueh-set.png`), 313, 270)
}

let cat = this.game.add.sprite(0, 0, 'cat')
cat.height = this.game.world.height * 0.25
cat.width = this.game.world.width * 0.15

let table = this.game.add.sprite(0, 0, 'table')
table.height = this.game.height
table.width = this.game.width

this.game.physics.startSystem(Phaser.Physics.ARCADE)

let containerBullu = this.game.add.sprite(this.game.world.width - (this.game.world.centerX + this.game.world.centerX), this.game.world.height / 7, 'container')
containerBullu.height = this.game.world.height * 0.55
containerBullu.width = this.game.world.width * 0.35
containerBullu.frame = 4
containerBullu.inputEnabled = true
containerBullu.events.onInputDown.add(this.listener, containerBullu)

let containerCornflake = this.game.add.sprite(this.game.world.width - (this.game.world.centerX + this.game.world.centerX / 1.8), -50, 'container')
containerCornflake.height = this.game.world.height * 0.6
containerCornflake.width = this.game.world.width * 0.35
containerCornflake.frame = 9

render (phaser) {
  this.game.debug.spriteInfo(this.containerBullu, 100, 100)
}
listener (containerBullu) {
  console.log(containerBullu)
},
destroyed () {
  this.game.destroy()
}

here are snippets of my code! 
I hope to hear from anyone soon!
Thanks!

 

[casey]

I dont' know Vue.JS but it looks like you're missing a comma after your render function.

[samme]

What does the browser console say?

Add debug.input(…) and debug.scale(…) in render().

[sillyhero]

hey thanks for getting back to me. I added the , after i posted this . 
and my browser console doesnt say anything, it is empty, like its not reading the function.

i added debug.input(…) and debug.scale(…) in render().
I hope i am doing it correctly, is it this way? 

render (phaser) {
  this.game.debug.spriteInfo(this.containerBullu, 100, 100)
  this.game.debug.inputInfo(300, 400)
  this.game.debug.scale(500, 600)
},

UPDATE*

for inputInfo: i got my mouse events, 
X Y
World 
scale
screen

for scale i got my game canvas details.
game
canvas
mode: NO_SCALE
parent: Obj htmldivelement
screen

 

containerBullu.inputEnabled = true
containerBullu.events.onInputDown.add(this.listener, containerBullu)

i am able to console.log and see that the inputEnabled is true for my sprite.
but somehow events.onInputDown.add() is not firing.

Will continue to look into it and update as i go along!!

Thank you 2 for getting back to me and helping !

[sillyhero]

containerBullu.events.onInputDown.add(function () { console.log('In onInputDown') })

adding the function inside, the console log still doesnt appear.
 

[sillyhero]

here a screenshot of my debugs.

[Makemake Hope]

Try to log input target when clicking on your containerBullu maybe. Just to be sure it's interactive and accessible for the input (not overlapped by another sprite for example).

[sillyhero]

hey thanks for getting back to me! I tried that and it seems that sprite is not begin detected. 
 

containerBullu.inputEnabled = true
containerBullu.input.useHandCursor = true
containerBullu.input.pixelPerfectOver = true

 

even handcursor when set to true, I am unable to see it. 
Will continue to look into it.

[sillyhero]

so i removed all my sprites, and the mouseover or click events are not detected.

 

[sillyhero]

i am able to undate the sprite to make it rotate, and on the console. the pixelperfectover and usehandcursor are true, but my mouse isnt detecting it on the screen.

[sillyhero]

I was looking through this post, 
http://www.html5gamedevs.com/topic/33563-phaser-vuejs/

which led to...

https://github.com/photonstorm/phaser-ce/issues/398
and it's the same problem I am fixing.
was wondering if anyone could enlighten me on the comment.

"I deactivated the PIXI vendor in the webpack build and it works"

i deleted PIXI from my vendor in webpack.base.conf.js , but it didn't work. 
Thank you ! sorry for the noobish questions.

[sillyhero]

alright everyone! finally understand what was up. 
Got to this site,
https://www.sebastianklier.com/node/vue/phaser/game/2017/06/03/node-vue-phaser-webpack.html
git cloned and managed to see the difference and fully understand the comments.

 

brnkrygs  Sebastian Klier • 6 months ago

Hi Sebastian Klier and Vincent Egurbide ,

I ran into this too - all the way down to commenting out 'pixi' clearing the block. It was causing me enough trouble implementing buttons for State transitions that I took some time to trace the issue.

I may have found the cause (works for me so far at least) and wanted to share...

Comparing the webpack.base.config.js in the sample repo here with the Phaser-CE lean webpack/ES6 boilerplate, I noticed a slightly different HtmlWebpackPlugin configuration.

https://github.com/lean/pha...
https://github.com/lean/pha...

After some trial-and-error, it came down to two keys that needed to be added the the HtmlWebpackPlugin configuration:

chunks: ['vendor', 'app'],
chunksSortMode: 'manual',

Looks like some sort of loading race if the 'app' chunk is loaded randomly (or first). By adding those keys, my buttons started handling click events!!

Thanks, by the way, for this blog post and repo - it got me a LONG ways WAY faster that I would've otherwise!

 

so, i added in 
chunks: ['vendor', 'app'],
chunksSortMode: 'manual', 
into my HTML webpack Plugin..

under..

 

Filtering chunks
----------------

To include only certain chunks you can limit the chunks being used:

```javascript
plugins: [
  new HtmlWebpackPlugin({
    chunks: ['vendor', 'app'],
    chunksSortMode: 'manual',
  })
]
```

Thanks everyone ! I hope this helps! and hopefully no more problems in the future. but if i do! i will probably post them back here, so maybe someone new will find this post useful!