[SOLVED] Multiple .fnt files within one screen

I am creating a hud for my game using Nifty and am running into a problem when trying to apply multiple .fnt files to simple Text, Labels, or custom controls. This is my current code, chopped down a little…

 <panel id="HealthBarPanel"  childLayout = "horizontal"  width = "99%" >
 <!-- <control name="healthlabel" id = "HealthLabel"  text="01234" width="20%" height="100%" textHAlign="left" textVAlign="center"  /> -->

 <text text="100"  font="Interface/Fonts/health.fnt" width="20%" height="100%" wrap="true" textHAlign="left" textVAlign="center"/>

<panel id="ManaBarPanel" width = "99%" childLayout = "horizontal">
<!-- <control name="label" id = "ManaLabel" text="420" width="20%" height="100%" textHAlign="left" textVAlign="center" /> -->

<text text="420" font="Interface/Fonts/mana.fnt" width="20%" height="100%" wrap="true" textHAlign="left" textVAlign="center"/>

When I compile the code and run, both of the texts use only the font that was specified second. I’ve even tried creating a custom control for a “HealthLabel” as well as creating a custom label style and applying it to a label instead of the text. The control and style work fine, but i run into the same problem that only the last font specified is used.

Didn’t want to post here but I couldn’t think of anything else, it’s probably really simple and I just didn’t read something properly…Thanks all!

Here’s a picture of how it’s showing up:

Make sure your .fnt files specify different fonts, despite their different names.

when I use the health.fnt on the “mana text” both of the fonts show up red.
As shown here

<text text="100" font="Interface/Fonts/mana.fnt" width="20%" height="100%" wrap="true" textHAlign="left" textVAlign="center"/>
 <text text="420" font="Interface/Fonts/health.fnt" width="20%" height="100%" wrap="true" textHAlign="left" textVAlign="center"/>


When you import a font you should let them white or on a shade of grey, then change its color with the color attribute. Like this:

<text text="100" font="Interface/Fonts/Helvetica.fnt" color="#f00f" width="20%" height="100%" wrap="true" textHAlign="left" textVAlign="center"/>
<text text="420" font="Interface/Fonts/Helvetica.fnt" color="#00ff" width="20%" height="100%" wrap="true" textHAlign="left" textVAlign="center"/>

My guess would be that you have the font’s defined incorrectly. Since you haven’t used any “color” set on your controls, i’m assuming that you created two fonts (or copied) and are manually coloring the font image. My guess is that you never changed the face on the internal font file (either because you copied or you created two fonts with the same base font), so when you use the second font it is replacing the first. I would agree with fba though that you shouldn’t define different fonts for different colors.

darn ok, are you 100% sure that I can’t import fonts with colors, that would make my life so much easier. It seems especially odd that I can’t even do a combination between text and label or customcontrol.

Would I be able to do a gradient color effect on multiple text or would i run into the same problem?

I am creating the .fnt files with hiero. How do I “change the face on the internal font file”? Thanks for the thoughts.

Well, I know you guys said I shouldn’t do it this way but I ended up creating another .fnt with Hiero based off a very very similar font, and now it’s not overwriting it. I am still interested in what was happening there, if anyone can fill me in : )

The .fnt file is actually a text file. It contains the name of its corresponding image file on one of its first lines. When you copied and renamed your files, the content of the .fnt didn’t change and was still pointing to the original image file.

Yes, you can have fonts with colors and gradients on it as you just did, but you will probably have awkward results when you use the color attribute.

Just looked through the .fnt files and they are pointing to the correct .png files associated with them (their content changed), any other guesses?

why do you want to use multiple font files for the same font that are just a different color? That just feels like it would complicate things a lot in the future if it doesn’t already do that.

Yes, but I bet the font face is identical between both files. You can change that to something unique and it should work.

1 Like

It allowed me to easily make cool colored fonts in a way of which I was accustomed. When I started I didn’t know of complications, and even now it seems to work quite fine.

Thanks for your help!

The more fonts you use, that also need multiple colors the more problematic it becomes. Especially if you change your mind later on.

I really recommend to go with the solutions posted here and if they don’t work explain why they don’t.

The only suggested solution gives me a flat color. I assume I will find more stylistic control when I start looking into effects.

If your font image is white and you multiply it with a color it simply becomes that color:

ColorRGBA white = new ColorRGBA(1.0f, 1.0f, 1.0f, 1.0f);
ColorRGBA newColor = new ColorRGBA(1.0f, 0.0f, 0.0f, 1.0f);

colorRGBA mixed = white.mult(newColor);

Looking at the math, it shows it multiplies the new color by 1.0 - giving back the same color you put in. If you want “shading” in your fonts to give some kind of light or depth effect, in your font image, use greyscale colors where you want the color to be slightly darker than the input color. That will have the effect of multiplying the input color by the greyscale value on the greyer pixels, for example 0.8, 0.7, and so on.


Yes, but he is using a two color gradient which doesn’t work with multiplying grayscale values. Unfortunately, nifty doesn’t give you access to the shaders either so you can’t do more interesting text effects.

1 Like

Actually I’ve been messing around with the color attribute in addition to the gradient text and I think I should be set now as far as customizing text colors goes, thanks for everyones help :slight_smile:

1 Like