CODEWITHSUNDEEP
javascriptphaser-framework
user1725266
user1725266

Reputation: 466

Phaser IO Update dynamically created text on callback

I'm currently creating a game using Phaser IO and SignalR (+jQuery), I get a list of players from server (for now containing an ID and Name), for each player I create a text field, which I later want to manipulate (with the amount of votes the specific player has), however I have no clue on how to reference the dynamically text object.

I'm open to new ideas as well

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"
};

Upvotes: 2

Views: 679

Answers (3)

StefanBob
StefanBob

Reputation: 5128

Use built-in method setText()

text.setText(amount);

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

Upvotes: 0

user1725266
user1725266

Reputation: 466

Issue was finding the text after it has been created. I ended up creating an array outside game states and then push the texts into that array. Then when I needed to edit the text, I'd search the array using grep (since Im already using 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;
};

Upvotes: 0

James Skemp
James Skemp

Reputation: 8571

You can go ahead and define a variable at the same level as game (for ease), and then set a variable equal to the text you add to the game.

var voteText;
// ...


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

Then simply update the text, if voteText is defined.

voteText.text = 'data returned from the server'

Upvotes: 1

Related Questions