Phaser IO Update在回调时动态创建文本

时间:2017-07-17 11:58:39

标签: javascript phaser-framework

我目前正在使用Phaser IO和SignalR(+ jQuery)制作游戏, 我得到了一个来自服务器的玩家列表(现在包含一个ID和名称),我为每个玩家创建了一个文本字段,我后来想要操作(具有特定玩家的投票数量),但是我没有线索关于如何引用动态文本对象。

我也接受新想法

var game = new Phaser.Game($window.innerWidth, $window.innerHeight, Phaser.Auto, 'gameCanvas');

        var dayState = {
            preload: function () {
                // Preloaded stuff
            },
            create: function () {
                var world = game.world;

                // Players alive in game
                var players = // Call to Server, retrieves list of players

                // Add player 
                for (var i = 0; i < players.length; i++) {
                    var currentPlayer = players[i];

                // Player name
                    game.add.text(world.width - 225, y, currentPlayer.Name);

              // I WANT TO UPDATE THIS UPON CALLBACK
                game.add.text(world.width - 175, y, 0)

                    // Vote button
                        game.add.button(world.width - 50, y + 2, //preloaded texture for button, voteFunction, currentPlayer.Id , 2, 1, 0);                    
                }
            }
        };
        game.state.add('DayState', dayState);
        game.state.start('DayState');

        function voteFunction() {
            // Posts vote to server
        };

function voteReturnedFromServer(amount){
// Server calls this function (SignalR)
// This is where I want to update text element created above with data from SignalR
// Update text with callback data "amount"
};

3 个答案:

答案 0 :(得分:1)

您可以继续定义与game相同级别的变量(为了方便),然后设置一个等于您添加到游戏中的文本的变量。

var voteText;
// ...


voteText = game.add.text('world.width - 175, y, 0);

如果定义了voteText,则只需更新text

voteText.text = 'data returned from the server'

答案 1 :(得分:0)

问题是在创建文本后找到它。我最终在游戏状态之外创建了一个数组,然后将文本推送到该数组中。 然后当我需要编辑文本时,我使用grep搜索数组(因为我已经使用了jQuery)

var game = new Phaser.Game($window.innerWidth, $window.innerHeight, Phaser.Auto, 'gameCanvas');

// This is where I'll push my texts
var voteTexts = [];

        var dayState = {
            preload: function () {
                // Preloaded stuff
            },
            create: function () {
                var world = game.world;

                // Players alive in game
                var players = // Call to Server, retrieves list of players

                // Add player 
                for (var i = 0; i < players.length; i++) {
                    var currentPlayer = players[i];

                // Player name
                    game.add.text(world.width - 225, y, currentPlayer.Name);

              // I WANT TO UPDATE THIS UPON CALLBACK
                var vote = game.add.text(world.width - 175, y, 0)
vote.id = currentPlayer.Id;
voteTexts.push(vote);

                    // Vote button
                        game.add.button(world.width - 50, y + 2, //preloaded texture for button, voteFunction, currentPlayer.Id , 2, 1, 0);                    
                }
            }
        };
        game.state.add('DayState', dayState);
        game.state.start('DayState');

        function voteFunction() {
            // Posts vote to server
        };

function voteReturnedFromServer(amount){
                var textToUpdate = $.grep(voteTexts, function (e) {
                    return e.id === votes.TargetId;
                });
// Since I know there'll be a result and only one, then I use [0]
                textToUpdate[0].text = votes.Count;
};

答案 2 :(得分:0)

使用内置方法setText()

text.setText(amount);

https://photonstorm.github.io/phaser3-docs/Phaser.GameObjects.Text.html