Jump to content

Best way to manage multi color text?


Recommended Posts

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.



Link to comment
Share on other sites

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
Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...