Graphic Font System Colours

  • [Share Code: LXK7U2Y5AN]

    I'm working on a graphical font system, using Alien Outcast's fonts. You add all four files (Caps, Low, Num, SPC) and specify which characters each file contains, and the FontPrint() routine takes a string and determines which file each character belongs to, and copies that tile to the screen. This is working great, and was much easier than I was anticipating. See video. (Title animation is something different, just a custom routine.)

    But I'm now trying to add custom colouring but can't figure out the best method. I'm using the drawSheet() command, which doesn't seem to support colouring. I could create sprites (and colour them) using the setSpriteAnimation() command, but that seems like a lot of overhead if you have a lot of text to display.

    The other option is the drawImageEx() command. It has a tint parameter. But how do I determine the character x,y position inside the sprite sheet? I can get the tile size, but is there a tilePosition command?

    Is there another way (using drawSheet()) to add colouring? There are a few graphic commands I'm unfamiliar with and may have overlooked something.

    Thanks for your help.

  • F

    You can achieve the same effect as tinted colours using the multiply blend mode via the setBlend() function.

    For example you could modify the PrintFont() function by drawing a coloured box before drawSheet() and blending the character with multiply:

    box(x, baseLine - size.y + offset, size.x, size.y, red, false)

  • F

    I would use the drawImageEx() and just multiply the tile width with the position to get the x coordinate.

  • Fuze Team

    I'm not adept enough with blend modes, but I'm sure @Gothon's method would work brilliantly. I would personally go down the route suggested by @vinicity - drawImageEx() allows for easy tint application, and you can multiply the letter number in the string (the 'i' counter in the for loop which draws each letter from a string) by the tile width to get your x position. Any offset would also have to be factored in.

  • Fuze Team

    Just want to add, we're aware of the limitation with drawSheet and plan to add a companion function matching the functionality of drawImageEx for drawSheet in a future patch.

  • Thanks for the tips! I started to go with the DrawImageEx(), but realized this wouldn't work. I needed to use DrawQuad().
    I ended up hand creating a dot matrix font in the image editor, which was fairly easy.
    (I actually created two others I didn't like as much. Ha, waste of time?)

    Couldn't figure out how to set each character's width in the editor. They are all square. For now, I just hard coded the widths in the code, messy but works. If I could read the pixel values, I could figure it out procedurally.
    I realized sometimes I want a fixed width! So I created a FontPrintFixed() routine. (For the Hi-Scores table).

    Everything is looking great now:

    I added the font to the game play too:

Log in to reply