Jump to content

Phaser + VueJS


SkyWorld
 Share

Recommended Posts

Excuse me!
I have a problem with the game develop.
I have 5 states: state1~state5, and every state has preload, create and update 3 function.
How should I put them in mounted and methods?
In original code:

var GameObj = {};
GameObj.Index = function (game) {
};
GameObj.Index.prototype = {
create: function(){},
update: function(){},
player: function(){}
};

And I try to write in VueJS:

import 'pixi';
    import 'p2';
    import Phaser from 'phaser';

    export default {
        name: 'game',
        props: {
            height: Number,
            width: Number,
        },
        mounted() {
            let self = this;
            const gameHeight = document.querySelector('#gameBox').offsetHeight;
            const gameWidth = document.querySelector('#gameBox').offsetWidth;

            if (this.game === null) {
                this.game = new Phaser.Game({
                    width: gameWidth,
                    height: gameHeight,
                    renderer: Phaser.AUTO,
                    parent: this.$el,
                });
            }

            this.addSate();
        },
        methods: {
            addSate() {
                this.game.state.add('GamePreloader', function() {
                    this.prototype = {
                        preload(Phaser) {
                           ...
                        },
                        create(phaser) {
                            ....

                            this.game.state.start('GameIndex');
                        },
                    };
                });

                this.game.state.add('GameIndex', function() {
                    this.prototype = {
                        create(phaser) {
                            ....
                        },
                        memberLogin(phaser) {
                           ....
                        },
                    };
                });

                this.game.state.start('GamePreloader');
            },
        },
        data() {
            return { game: null };
        },
    };

I don't know if my structure has a fault? Because there is nothing in the canvas to display.

Link to comment
Share on other sites

 Share

  • Recently Browsing   0 members

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