javascript - 将 Popup 添加到 Phaser 游戏

Question

我想在游戏中添加弹出窗口。我正在使用 Phaser 并发现 modal.js 用于在 Phaser 中添加弹出窗口它似乎很有用，但是当我尝试添加它时我收到错误“Uncaught TypeError:无法设置未定义的属性'modal1'”。我想我只是因为我的编码结构而收到这个错误。这是我的代码

var reg={};
createModals: function(){
    reg.modal.createModal({
        type: "modal1",
        includeBackground: true,
        modalCloseOnInput: true,
        itemsArr: [{
            type: "graphics",
            graphicColor: "0xffffff",
            graphicWidth: 300,
            graphicHeight: 300,
            graphicRadius: 40
        }, {
            type: "text",
            content: "The white behind me\nis a [Phaser.Graphic]",
            fontFamily: "Luckiest Guy",
            fontSize: 22,
            color: "0x1e1e1e",
            offsetY: -50
        }, ]
    });

    },

    showModal1: function(){
    reg.modal.showModal("modal1");
    }

对此有什么帮助吗...

Answer 1

这是一个完整的例子。

var reg = {};

function createModals() {
  reg.modal.createModal({
            type:"modal1",
            includeBackground: true,
            modalCloseOnInput: true,
            itemsArr: [
                {
            type: "graphics",
            graphicColor: "0xffffff",
            graphicWidth: 300,
            graphicHeight: 300,
            graphicRadius: 40
        }, {
            type: "text",
            content: "The white behind me\nis a [Phaser.Graphic]",
            fontFamily: "Luckiest Guy",
            fontSize: 22,
            color: "0x1e1e1e",
            offsetY: -50
        }
            ]
        }); 
}

function showModal1(){
  reg.modal.showModal("modal1");
}

var GameState = function(game) {
};

GameState.prototype.create = function() {
  reg.modal = new gameModal(game);
  createModals();
  var m1 = this.game.add.button(30, 50, "m1", showModal1);
};

var game = new Phaser.Game(750, 380, Phaser.CANVAS, 'game');
game.state.add('game', GameState, true);

<script src="http://netgfx.com/trunk/games/phaser_modals/phaser.min.js"></script>
<script src="http://netgfx.com/trunk/games/phaser_modals/modal.js"></script>
<div style="font-family:'Luckiest Guy',cursive;visibility:hidden;opacity:0;position:fixed;">&nbsp;</div>