Jump to content

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


Recommended Posts

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 () {
      create: function create () {
      update: function update () {
      render: function redner () {
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


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) {
destroyed () {

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


Link to comment
Share on other sites

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)


for inputInfo: i got my mouse events, 

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


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 !

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

I was looking through this post, 

which led to...

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.

Link to comment
Share on other sites

alright everyone! finally understand what was up. 
Got to this site,
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.


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..



Filtering chunks

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

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! :)

Link to comment
Share on other sites


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...