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.
-
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 beforedrawSheet()
and blending the character with multiply:box(x, baseLine - size.y + offset, size.x, size.y, red, false) setBlend(BLEND_MUL) drawSheet(...) setBlend(BLEND_MIX)
-
I would use the drawImageEx() and just multiply the tile width with the position to get the x coordinate.
-
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.
-
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: