how to update a sprite frame change?

[Le Twitch]

Main.Game = function (game) {  };var colourA;var squareA;Main.Game.prototype = {        create: function() {                this.randomColour.call();          squareA = this.add.sprite(55, 370, 'colourSquare', colourA);                squareA.inputEnabled = true;                squareA.events.onInputDown.add(this.randomColour, this);            },        update: function() {                            },    randomColour: function() {             var colourArray = ['red', 'orange', 'yellow', 'green', 'blue', 'purple'];        var randomA = Math.floor(Math.random() * colourArray.length);                colourA = colourArray[randomA];                console.log(colourA);            }};

the variable "colourA" changes but the change doesn't appear on screen

[lewster32]

I think you're approaching this a bit strangely. Firstly you can just do:

this.randomColour();

To call the function - .call and .apply on functions can often result in unintended stuff happening if you don't know how to use them properly.

 

Secondly, you can change the frame of the sprite at any point by changing the sprite.frameName property:

sprite.frameName = "red";

Lastly, if you want to use a function to get this, and don't need to keep the reference to the colour floating around, a much better way of doing this would be as follows:

    create: function() {        // call the function in the frame parameter        squareA = this.add.sprite(55, 370, 'colourSquare', this.randomColour());        squareA.inputEnabled = true;        squareA.events.onInputDown.add(function() {          // change the framename by calling the function again          squareA.frameName = this.randomColour();        }, this);    },        randomColour: function() {        var colourArray = ['red', 'orange', 'yellow', 'green', 'blue', 'purple'];        var randomA = Math.floor(Math.random() * colourArray.length);        var colourA = colourArray[randomA];        console.log(colourA);        // the key here is that this function now returns the colour, rather than setting it - this is cleaner and ensures variables don't end up strewn around your code but are used only where needed        return colourA;    }

[Le Twitch]

 

I think you're approaching this a bit strangely. Firstly you can just do:

this.randomColour();

To call the function - .call and .apply on functions can often result in unintended stuff happening if you don't know how to use them properly.

 

Secondly, you can change the frame of the sprite at any point by changing the sprite.frameName property:

sprite.frameName = "red";

Lastly, if you want to use a function to get this, and don't need to keep the reference to the colour floating around, a much better way of doing this would be as follows:

var colourA;var colourB;var textWord;var textColour;var square;var squareA;var squareB;var gameText;        Main.Game.prototype = {        create: function() {                this.randomColour();        square = this.add.group();        squareA = this.add.sprite(55, 370, 'colourSquare', colourA);        squareB = this.add.sprite(675, 370, 'colourSquare', colourB);                square.add(squareA);        square.add(squareB);                square.setAll('inputEnabled', true);            gameText = this.add.bitmapText(null, null, textColour + 'Text', textWord, 127);                gameText.x = gameWidth - gameText.textWidth / 2;        gameText.y = gameHeight - gameText.textHeight / 2;                square.callAll('events.onInputDown.add', 'events.onInputDown', this.randomColour);              },        randomColour: function() {                var colourArray = ['red', 'orange', 'yellow', 'green', 'blue', 'purple'];        var randomA = Math.floor(Math.random() * colourArray.length);        var randomB = Math.floor(Math.random() * colourArray.length);            while (randomA === randomB) {                    randomB = Math.floor(Math.random() * colourArray.length);                }            colourA = colourArray[randomA];        colourB = colourArray[randomB];            var randomText = Math.floor(Math.random() * 2);            if (randomText === 0) {                            textWord = colourA;                textColour = colourB;                        } else if (randomText === 1) {                            textWord = colourB;                textColour = colourA;                        }                console.log(colourA, colourB, textWord, textColour);            }};

this should clear things up a bit. this is the full code that i'm using. the colours for "squareA" and "squareB" needs to be different and needs to be randomized at the same time. the colours of "squareA" and "squareB" are then picked at random to determine which colour would be set as the text and which colour would be set as the colour of the text(the image and atlas file).

 

the aim of the game is to click/tap on the right colour of the text and not the word of the text. let's say that the word is red and the colour of the text is orange. the right answer would be orange because that's the colour of the text. you would then click/tap on the orange square.

i can't code the input mechanics for it yet until i get the randomizing mechanic right first :S