I want to make a multicolored font like:

enter image description here

My problem is that black is someway "set" as the transparency background for the font, so if i use black or any dark color xna takes it as background too.

How can i define in my spritefont what color is background and what not? is there a way to just draw my font with any program and use that as simple font?

  • \$\begingroup\$ Can you describe exactly are you trying to do? Sounds like you have a larger problem that isn't described above, and you've come up with a solution, but it's not working as expected. \$\endgroup\$ – John McDonald Mar 17 '14 at 18:38
  • \$\begingroup\$ i dont really have a problem, i wanted to try and make my own font and i started from some standard font and exported it from TTF to BMP, then i manually edited it. Im just trying to edit the font using black color instead of white but thats not possible for the reasons i wrote above \$\endgroup\$ – user3161621 Mar 17 '14 at 19:00
  • \$\begingroup\$ Can you show us exactly how you're loading and using the font? \$\endgroup\$ – user39686 Mar 17 '14 at 20:56
  • \$\begingroup\$ its all completely standard: i set up content importer as texture, content process as spritefont then in loadcontent the usual: Font1 = Content.Load<SpriteFont>("myfont"); spriteBatch.DrawString(Font1, infoTXT, new Vector2(20, 355), Color.White); \$\endgroup\$ – user3161621 Mar 17 '14 at 21:02
  • \$\begingroup\$ Ya my bad, it's been so long since I've used XNA. \$\endgroup\$ – user39686 Mar 17 '14 at 21:04

Based off Microsoft's help descriptor of the FontTextureProcessor class:

Monochrome characters should use white for solid areas and black for transparent areas. To include multicolored characters, add an alpha channel to the bitmap and use that to control which parts of the character are solid.

Since you're editing the font as a BMP bitmap, it's not going to have a separate alpha channel. This is the reason that black or dark areas are being treated as transparent.

You'll need to edit it with software that supports an alpha channel such as GIMP or Photoshop, then export it to a PNG (with transparency enabled), TIFF, or any other such format with alpha support.

So let's take your original image: Base image w/ white background

So let's open it up in GIMP. The first thing is we need to separate the layers, the white has to go. To do this we need to select the "Fuzzy Select Tool": Fuzzy Select Tool

Under the "Tools options" on the left, I would recommend setting the threshold to something around 100-150 for best results.

Now select the magneta background, and use CTRL+X to cut it. This should give us a white background with the letters still intact. Now we need to create a new layer: New layer

Use CTRL+V to paste the magenta area into the new layer. Now use the Fuzzy Select Tool again to select the white areas, and delete them. I had to first right-click the layer on the right-hand side and choose "Add Alpha Channel" for this to work correctly.

Now in GIMP it should look similar to this: Visible alpha channel

Now we need to go to File -> Export. Select the PNG type, and you should have a dialog that looks somewhat like this: PNG export dialog

Those options I have selected should give the best results.

Now we get the result with proper alpha: Final image with alpha channel

Note: I intentionally left out the white areas within the letters. That is left up as an exercise to the reader.

| improve this answer | |
  • \$\begingroup\$ ok ty,i think i understand the concept, alpha is an extra "color" used to define how much is transparent the image but i never used it, can you give one last info where i can find some tutorial or help how to edit it on gimp? \$\endgroup\$ – user3161621 Mar 17 '14 at 21:12
  • \$\begingroup\$ I'll edit my post with a mini-tutorial for ya, alright? \$\endgroup\$ – user39686 Mar 17 '14 at 21:13
  • \$\begingroup\$ sure thnx very much \$\endgroup\$ – user3161621 Mar 17 '14 at 21:24
  • \$\begingroup\$ There you go, let me know if you have any further questions. \$\endgroup\$ – user39686 Mar 17 '14 at 21:39
  • \$\begingroup\$ yes, worked perfectly, i suppose that the magenta horizontal spacing correspond to the spacing in xna and so im gonna have to cut paste for the next 2 hours :D \$\endgroup\$ – user3161621 Mar 17 '14 at 22:17

The reason that sprite fonts are white is so that you can apply your own color in the Spritebatch.DrawString. If I understand correctly, each pixel in your custom font will get multiplied by the Color parameter. If your source font sprite is black, you won't be able to apply your own color because black is all zeros.

If you want to make a custom font and render it black, leave the source white, then use Color.Black when you draw your string.

| improve this answer | |
  • \$\begingroup\$ yes i know this but like the title said i want a font with multiple colors... ofc i know i could draw n times with color. etc etc but i just want to reduce all the work... i just want to draw my own font and get it written... i cant believe its not possible... \$\endgroup\$ – user3161621 Mar 17 '14 at 20:24
  • \$\begingroup\$ also i want to add i saw it done like here: nogginbox.co.uk/blog/text-effects-in-monogame his font is black and green... i just dont get why his get written and mine doesnt... \$\endgroup\$ – user3161621 Mar 17 '14 at 20:29
  • \$\begingroup\$ I understand the problem now and have updated your question \$\endgroup\$ – John McDonald Mar 17 '14 at 21:00

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.