How do I change text character colours

  • Hi guys,

    Is it possible to change the color of individual letters in a text file? in html, I could use the <span> tag.

    for example:

    I've come up with some solutions in my head, but they're really really dirty. Here's a couple:

    • create a text object for every letter: Each letter would have to refer to an array to find out their width. When adding new letters, the width of the previous letter would need to be considered so that they're the correct distance apart (told you it was dirty)
    • Use a sprite font: Using a sprite font, it's easier to find a letter because all widths are the same. A coloured square with an "additive" blend mode can then be create over each letter. Changing the squares colour will change the colour of the corresponding letter.

    Any help would be appreciated! I've tried the latter example and it worked but surely there's an easier, more elegant way?

    : )

  • Try Construct 3

    Develop games in your browser. Powerful, performant & highly capable.

    Try Now Construct 3 users don't see these ads
  • I'd suggest snooping around the plugin section, I'm 80% sure I saw a plugin that will allow you to change the colors of individual letters.

  • I had a brief look but couldn't find anything. Will check again

  • have a look at this topic - might help, might not...

    viewtopic.php?f=147&t=152781&p=964111&hilit=+color#p964111

    edit - 20:35 3/10/2015

    try again

  • Yeah, no inline CSS that i am aware of for text in C2.

    I usually use different text objects for the color change. Spawn the first part of the sentence, and get the text width, then spawn your color changed word at The text object.X axis+text.width. Add the New text width to the first text width, so we can add the last part of the sentence with the color returned to the original.

  • Hey guys,

    If you're interested in my result, check this out:

    http://www.solfa.me/experimental/touch-type-solfa/

    It's a prototype for a touch typing program the gradually add's new words each time you reach the end of the line. The method I ended up using is relatively clean... It involves masks and spawning sprites. To make it move across the page, I had to be sure of the distance between two words so I used sprite text and made the letters equal distance apart.

    The hard part was finding a font I liked and converting it into an evenly spaced sprite font, but I got there in the end!

    Still, it would be cool to have a clean solution that uses span tags... But hey, this would have taken me twice as long to build from scratch with javascript <img src="{SMILIES_PATH}/icon_e_smile.gif" alt=":)" title="Smile">

Jump to:
Active Users
There are 2 visitors browsing this topic (1 users and 1 guests)