sillyhero

Members
  • Content Count

    9
  • Joined

  • Last visited

  1. sillyhero

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

    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!
  2. sillyhero

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

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

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

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

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

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

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

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

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

    here a screenshot of my debugs.
  7. sillyhero

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

    containerBullu.events.onInputDown.add(function () { console.log('In onInputDown') }) adding the function inside, the console log still doesnt appear.
  8. sillyhero

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

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