Tykrael Posted October 20, 2017 Share Posted October 20, 2017 Hello peeps, I've been trying for a long time now to make it work, but i can't find any new ideas to test out. My project is a vuejs webpack template project i've been able to initialize phaser make things display changing the game's background color on input etc But i can't for the life of me find the way to make sprite input detect pointer. I've followed this tutorial : https://www.sebastianklier.com/node/vue/phaser/game/2017/06/03/node-vue-phaser-webpack.html Here's the code of my game vue <template> <div id="plano"></div> </template> <style> #plano { position:absolute; top:0; left:0; width:1280px; height:640px; margin: 0 auto; } #plano canvas { display: block; margin: 0 auto; } </style> <script> /* eslint-disable */ /* eslint-disable no-unused-vars */ import 'pixi' import 'p2' import Phaser from 'phaser' /* eslint-enable no-unused-vars */ export default{ name: 'phaser', data: () => ({ game: null, sprites: {}, }), mounted () { this.$on('click', function(){ console.log('click') }) let self = this if (this.game == null) { this.game = new Phaser.Game({ width: 1280, height: 640, renderer: Phaser.AUTO, antialias: true, parent: this.$el, state: { preload: function preload () { self.preload(this) }, create: function create () { self.create(this) }, update: function update () { self.update(this) }, render: function render () { self.render(this) } } }) } }, methods: { preload () { this.game.load.image('block', './static/assets/block.png') }, create (phaser) { let self = this; var sprite = this.game.add.sprite(this.game.world.centerX, this.game.world.centerY, 'block') sprite.anchor.set(0.5) sprite.inputEnabled = true sprite.input.enableDrag() sprite.events.onInputDown.add(function() { console.log('sprite down') }) }, update (phaser) { }, render() { var debug debug = this.game.debug debug.inputInfo(32, 32); debug.pointer( this.game.input.activePointer ); debug.spriteInputInfo(this.game.world.children[0], 32, 150) } }, destroyed () { // this.game.destroy() } } </script> As you can see it's pretty simple i just want to be able to drag the block, the debug.spriteInputInfo shows no signs of life. Of course the code works outside of vue ... If anyone got an idea I'll gladly take it, i'm at my wits end. Link to comment Share on other sites More sharing options...
Tykrael Posted October 27, 2017 Author Share Posted October 27, 2017 Wow 90 views not even 1 reply ... How about with a git of the project for anyone who's willing to help ? https://github.com/Tykrael/test-phaser Link to comment Share on other sites More sharing options...
samme Posted October 28, 2017 Share Posted October 28, 2017 Debugging other people's projects isn't easy. What are debug.inputInfo and debug.pointer showing while you try to drag? Have you tried the same Phaser code without vuejs? Link to comment Share on other sites More sharing options...
Tykrael Posted October 30, 2017 Author Share Posted October 30, 2017 Hello, I know debugging other people's projects isn't easy I've been in the game for almost 10 years, 8 being lead, so trust me there was absolutely no aggressivity behind my words . The debug pointer show mouse down fine, but the inputinfo doesn't see the pointer over. The same phaser code without vuejs works fine. I even tried having the phaser code in an object outside of vue, and then running only an initialization function via vue, but it didn't work any different. So i know it's a conflict between vue and phaser, but i can't take vue out of the picture it's my whole data management. Phaser would be the easy way for the second part of the project but if i can't make it work i'll use something else (D3), it's just phaser is perfect for my project and i'm sure the conflict is just plain stupid I just can't find it. I was really just hoping someone would have ran into that problem and maybe found a solution which i didn't think of. Thanks samme 1 Link to comment Share on other sites More sharing options...
samme Posted November 4, 2017 Share Posted November 4, 2017 https://github.com/photonstorm/phaser-ce/issues/398 Link to comment Share on other sites More sharing options...
Tykrael Posted November 4, 2017 Author Share Posted November 4, 2017 yup that's a coworker of mine wich reposted the issue in the hopes of finding a solution. Link to comment Share on other sites More sharing options...
DarrylK Posted February 14, 2018 Share Posted February 14, 2018 I am not 100% sure what you are attempting to do with the update function, but it seems like your watcher is not quite set up how I would imagine it should be. update(phaser) { phaser.stage.backgroundColor = this.colorRecord; }, render() { var debug debug = this.game.debug debug.inputInfo(32, 32); debug.pointer(this.game.input.activePointer); debug.spriteInputInfo(this.game.world.children[0], 32, 150) } }, destroyed() { // this.game.destroy() }, watch: { game: function (val) { this.$nextTick(() => { // Besure update frame in every data change this.update(val) }) } } } Here you establish watch, the value you want to watch from your data object(game) and then you provide some sort of handler function to take in the new value of game as it has changed. val is now the equivalent of game from your data object at that exact point in time as the data has been changed which triggered the watcher. We are then calling the update method on this instance of the component and we pass in the new value of game(val) You want to make sure you are using val instead of this.game so you are referencing what the watcher collected for you on the change. Now in the update method, it has to change a bit since phaser is now game. Hopefully this gets you a little closer to what it is that you were doing with the update. I dont know if this was helpful as I am just learning phaser and trying to incorporate it into something I already know(vue). Side note: The debug for the pointer is working in the version I pulled down from github so I don't have any ideas on that. Or at least it appears to be in the manner I would expect. Link to comment Share on other sites More sharing options...
Recommended Posts