How do I color specific words in Sprite Font?

0 favourites
  • 6 posts
From the Asset Store
Horror Halloween Pixel Art Sprite Font Space Data included
  • I'm working on a game currently that has an inventory system. I think it would be nice for item names to be colored when mentioned in dialog so the player knows to pay attention to them. I think Zelda is a good example of a game that does something like this.

    Since a bit of searching taught me that there's no proper way to do something like this, I thought up a rather hacky way of making it happen, but I need some advice on how plausible it is. My idea is that I can add an identical sprite font with colored text and then overlay it on the white sprite font, add enough spaces until I get to the word I want to color, then type only that word.

    This works perfectly when done manually, but the problem is making it work automatically...how can I write an event that copies the text of another sprite font object, replaces the first X characters with spaces, then writes the one or two words I want in color? If it helps, the item names are often called in through functions (so a typical line of dialog would be something like "That's a very nice " & Function.Param(0) & " you got there." and I would want the parameter to appear in color).

    Attached is an example of the effect I'm going for.

  • Try Construct 3

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

    Try Now Construct 3 users don't see these ads
  • Take a look here, click a bit through the tutorial. Do you mean it like this?

  • Take a look here, click a bit through the tutorial. Do you mean it like this?

    Yes, how did you do that?

  • 1. The easiest way is to have some letters in a different color in the same font (like in my case A white or D orange), which just have another code, like ° or ~ instead of A or D (since I need A and D usually in beige). Then you just name the object or convert its name when displayed, to the according glyphs. In this example, instead of AD " ^~ ". Now AD are displayed in a different color in the same font and same object. Little effort, besides substituting the original object name with other glyphs. Of course, you need a lot of glyphs, so maybe it is wise to split the same system in a different fonts for the alphabet and for numbers.

    2. I am also just repositioning some words in the special color. You can detect, if a word is included, count the tokens before and position your word accordingly. (That means the word in the special color is just laying above the other text including the word in the original color.)

    3. You can even count tokens in your text, then count the width (character width + token count), then place the new word after the previous font, add it's width, then continue with the other one again. But here, you have to mind the paragraph rules (max characters per line), to limit the width of a line and break your word into a new one, if necessary.

    I know, the first 2 solutions are not as flexible, as you mean it (I think), but you need to reconsider, how much effort you want to invest. The first solution is really easy, and should work fine, if you just take one special color.

    Hope it helps...

  • >

    1. The easiest way is to have some letters in a different color in the same font (like in my case A white or D orange), which just have another code, like ° or ~ instead of A or D (since I need A and D usually in beige).

    That's how I did it too. Here's a visual example: http://forums.tigsource.com/index.php?t ... msg1093571

  • Awesome! I was in the midst of a game jam so I wasn't able to take the time to implement any of your recommendations, but I will definitely keep them in mind for future updates. Thanks!

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