Best way to manage multi color text?

[Martiny]

Hello, guys.

 

So, I'm wondering if there is an example on how to manage multi colored texts? This image exemplifies perfectly what I want:

 

 

Actually, mine is actually simpler than that. I just want to write a sentence like this:

 

"Click on the Cat"

 

In which "Click on the" is black and "Cat" is red. I can't find a way to do it in Phaser. That's my code so far:

var textStyle = { font: "65px Arial", fill: "#000000"};var text = game.add.text (400, 500,"Click on the " + chosenAnimal, textStyle);

As you can imagine, everything is in black. How could I change the chosenAnimal to red in an easy way? There must be a simple solution to this, but I couldn't find anything in the examples.

 

 

[Videlais]

If you think about each printed color selection as its own little box, you can arrange the boxes on the screen using the first one as a reference and then move the rest as needed using its width and height.

 

For example, say you wanted to print "Click on the Cat," as per your example.

var chosenAnimal = "Cat"; //Stored name as a stringvar textStyle = { font: "65px Arial", fill: "#000000"};var text = game.add.text (400, 500,"Click on the ", textStyle); //Write the first text in blacktextStyle = { font: "65px Arial", fill: "#ff0000"}; //Change the fill color to 'red'var redText = game.add.text (400 + text.width, 500, chosenAnimal, textStyle); //Write the red text in the same x position + the width of the black text