2
\$\begingroup\$

I've been searching, downloaded a couple programs that lets you convert images into fonts, but none let you obtain the color. They all switch them to black and white.

While searching the internet, I found a few colored fonts. Yet, almost all games have their own fonts that are colorful.

How do they do it? Did they just opt to program the font with coded position and sizes?

I'd just like to make my own true type or open type font (ttf or otf) from some images I created. And the images aren't even that colorful, just fill and stroke color.

\$\endgroup\$
  • 1
    \$\begingroup\$ It sounds like you're asking about full-colour "bitmap fonts," as described in this tutorial here for example. \$\endgroup\$ – DMGregory Feb 2 at 18:55
  • \$\begingroup\$ Hey @DMGregory I don't have money for photoshop. The only thing pop up is that color font can be made with photoshop with all these great devs out here and designer you would think there's another using freeware free software. If you have a suggestion I'll appreciate it. And thanks for the information still. \$\endgroup\$ – L2L2L Feb 3 at 11:04
  • \$\begingroup\$ Then use free alternatives like GIMP or Inkscape. Once the image file is in Unity, the game engine doesn't know or care what program it was made in. \$\endgroup\$ – DMGregory Feb 3 at 12:54
  • \$\begingroup\$ Okay I was thinking of doing that too and since I have the graphic letters already made in inkscape, so now I just need shoebox to actually create it. I'mma try it @DMGregory and please put your comment in a answer so I can like it... before someone else do it. \$\endgroup\$ – L2L2L Feb 4 at 1:25
  • \$\begingroup\$ Link-only answers are discouraged here. If you find the Shoebox technique works for you, I'd recommend writing up the steps you used as an Answer. (It's totally OK to answer your own question here) \$\endgroup\$ – DMGregory Feb 4 at 1:33
1
\$\begingroup\$

There is a good reason why these are all black and white. Most game engines allow you to manipulate the RGBA values of the textures in your buffer before being displayed.

For example, in my own OpenGL based engine I use the function glColor:

void glColor4i( GLint red, GLint green, GLint blue, GLint alpha);

As you can see, it takes 4 parameters. The first three, red, blue, green are values from 0 to 1 and combined can display any color on the visible scale. The last parameter, alpha, is a powerful tool to play with the visibility of the texture. That is, you can make the font semi-transparent, make the background transparent around the letter, or blend with the background.

Screenshot of an applied bitmap font with different colours and alpha channels in my project.

screenshot of a OpenGL font

In my project I have used one of the tools you were referring to, namely to create an imagine of a font. There is a platherea of software and online tools available if you search for "ttf to bitmap".

Next I've written a class in C++ that allows me to display strings and position these anywhere on the screen. This includes the proper spacing for slimmer characters like"i", "l" and ".", as otherwise the words look stocky and unnatural. I also have a function call to the above OpenGL function and I often play with alpha values to make the font fade in or change the color to add emphasis. Here is an example of my current project, precisely applied a bitmap font and playing with the values.

\$\endgroup\$
  • \$\begingroup\$ I think you may have missed where OP describes wanting fonts wiith "fill and stroke color." ie. They don't just want to tint the whole letter one colour uniformly, they want colour variation within each letter form. The tinting technique you describe won't provide this on its own, though it can be a building block we use on our way to multicolour text. \$\endgroup\$ – DMGregory Feb 4 at 12:27
  • \$\begingroup\$ Thanks. It's possible, although may take a bit of manual prep work. OP has to create an overlayer from the original bitmap. One can highlight the strokes/shadows and alpha out the rest. Or even better, create a bitmap with the stroke font and extrude the selection of the original bitmap. I have not done this for my own engine yet but I can definitely see it feasible to do. \$\endgroup\$ – Majte Feb 4 at 13:34

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.