Phaser + vuejs

[Tykrael]

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.

[Tykrael]

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

[samme]

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?

[Tykrael]

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]

https://github.com/photonstorm/phaser-ce/issues/398

[Tykrael]

yup that's a coworker of mine

wich reposted the issue in the hopes of finding a solution.

 

[DarrylK]

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.