NIfty text color encoding

The nifty manual explains color encoding in the string of a ‘text’ element but I can’t seem to get it to work or find any info about it. Is it broken or something like that? If I can’t have multicolored text in one of these I’ll need multiple text boxes which complicates things no end. :frowning:

I’ve never managed to get it working either. If you do solve it I’d be interested to hear the results :slight_smile:

Color encoding works fine for me.

Nifty manual: http://heanet.dl.sourceforge.net/project/nifty-gui/nifty-gui/nifty-gui-the-manual-v1.0.pdf

Page 31:

COLOR ENCODED TEXT Nifty supports encoding colors into the text string. This works with a special syntax. You include a special kind of String directly into the text to change the color. This string starts with „\#“ followed by three values, one for red, green and blue as hexadecimal values (optionally followed by an alpha value). The string has to end with a single „#“ character. Say you have the String „Hello World“ and you want the word „World“ to be colored in red. Then you can specify the text attribute like so: „Hello \#ff0000#World“ and this text would be displayed like: „Hello World“.

The phrasing of the syntax was a kind of tricky (The “string” which has to be ended with “#” is the rgb-substring, not the whole string), but the example shows it very clearly. :slight_smile: (Tested with stable RC2-release)

I think the issue is the font that is being used.

When exporting a font with BMFont, how it is exported seems to make a difference. When I use a font that is exported (see export options under file) as a glyph that is black with alpha, the color code does not work with the text field. However if I export using white text with alpha, the color code works just fine.

3 Likes

Merry Christmas all and thanks for the info.

I’ve read that part of the nifty manual a lot and I’m using the RC2 stable release too.
I generate my fonts with Hiero but even using the stock nifty font I can’t get encoding to work at all. From java or in the XML the color never changes but the special encoding is taken out of the string so I guess that part is working, it’s just the color that’s not getting rendered for some reason.

I made a very simple test case that still didn’t work, but I can’t seem to add the most important part, the XML, to the forum; It just gets swallowed up.

I made a very simple test case that still didn’t work, but I can’t seem to add the most important part, the XML, to the forum; It just gets swallowed up.
(Let's see if I get this right) Yeah it doesn't like > and <. You have to escape them with &gt; and so on.

I updated to the nightly a few weeks ago and it seems, the problem is still there. (It worked fine in RC2)
The parser removes the color codes, but the text is rendered white.

I’ve been looking into the code for 5 minutes and found 3 problems with the color encoding:

  1. the code will only run when Nifty runs in BatchRendering, call hirarchy of ColorValueParser.isColor(string,int) points to BatchRenderDevice
  2. only the first letter following the color code will get colorized, “\#ff0000#Hello World” results in a red “H” followed by white “ello World”
    3., additionally \#ff0000Hello World# doesn’t get parsed at all

Using nifty-1.4.0-20130408.230317-54.jar nighly build.

2 Likes

@void256
Any official fix yet? :slight_smile:

Is color encoding not working when using the batched renderer or the regular one when using a nightly build?

In the regular jme3 Nifty renderer, color encoding is entirely handled inside of jme3 in the BitmapFont/BitmapText classes. I’m not sure if that ever was supported properly. Actually I wonder why this appears to have worked before o_O I’ve found some code that looks like Nifty color encoding in the BitmapFont class but I don’t know how all of this works there. I’m probably not able to help with this, sorry.

In the batched renderer color encoding is handled completly inside of Nifty and not in jme3 anymore. So if it does not work with the batched renderer I’m to blame :smiley: and I’m able to fix it eventually.

I don’t really know which one I’m using :smiley: - I’ve updated to the latest nightly and didn’t specify anthing special in the code.
Is there a way to force a specific renderer? I searched in the nifty methods, but found nothing.

Well, there are two options available now to instantiate the NiftyJmeDisplay but only when you use a nightly build of jme :slight_smile:

Option 1 (the standard one - this was the only option until some weeks ago)

[java]/**
* Create a standard NiftyJmeDisplay. This uses the old Nifty renderer. It’s probably slower then the batched
* renderer and is mainly here for backwards compatibility.
*
* @param assetManager jME AssetManager
* @param inputManager jME InputManager
* @param audioRenderer jME AudioRenderer
* @param viewport Viewport to use
*/
public NiftyJmeDisplay(AssetManager assetManager,
InputManager inputManager,
AudioRenderer audioRenderer,
ViewPort vp){
[/java]

Option 2: Enable the batched renderer with this new constructor

[java]/**
* Create a new NiftyJmeDisplay for use with the Batched Nifty Renderer (improved Nifty rendering performance).
*
* Nifty will use a single texture of the given dimensions (see atlasWidth and atlasHeight parameters). Every
* graphical asset you’re rendering through Nifty will be placed into this big texture. The goal is to render
* all Nifty components in a single (or at least very few) draw calls. This should speed up rendering quite a
* bit.
*
* Currently you have to make sure to not use more image space than this single texture provides. However, Nifty
* tries to be smart about this and internally will make sure that only the images are uploaded that your GUI
* really needs. So in general this shoudln’t be an issue.
*
* A complete re-organisation of the texture atlas happens when a Nifty screen ends and another begins. Dynamically
* adding images while a screen is running is supported as well.
*
* @param assetManager jME AssetManager
* @param inputManager jME InputManager
* @param audioRenderer jME AudioRenderer
* @param viewport Viewport to use
* @param atlasWidth the width of the texture atlas Nifty uses to speed up rendering (2048 is a good value)
* @param atlasHeight the height of the texture atlas Nifty uses to speed up rendering (2048 is a good value)
*/
public NiftyJmeDisplay(
final AssetManager assetManager,
final InputManager inputManager,
final AudioRenderer audioRenderer,
final ViewPort viewport,
final int atlasWidth,
final int atlasHeight){
[/java]

Oh and you can check the Nifty version with:

[java]System.out.println(nifty.getVersion());
→ 1.3.3-SNAPSHOT (2013-03-26 01:22:49)[/java]

If it says 1.3.3-SNAPSHOT with this or a later date you should be able to use the new batched render thing which should perform better (e.g. render faster) especially with more complex GUIs, many elements and so on.

So and I’ve finally found some time to check the text color encoding problem:

If I use the regular, old renderer (Option 1) then I don’t have support for text color encoding when using a current nightly build. It might be possible that this has worked before and is now broken because of changes in the bitmap font class inside of jme. I can’t say this for sure. For me the text encoded characters are removed but I don’t see any color - which actually matches my expectation from what I’ve seen in the code.

If I use the batched renderer (Option 2) I only get the first character to be encoded with the color >_< After I’ve done a bit more research this was in fact a bug in the batched renderer font handling. D’oh! I’ve just commited a patch to the Nifty source to fix this. It’s not yet in the nighty jme builds tho but will be there once I update the Nifty version their.

Sorry to resume an old topic, but I was wondering what’s the state of this issue.
I’m trying the following and expect the “Hello world” text to be rendered in white (hello) and red (world), but it’s all white:

<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<nifty xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://nifty-gui.lessvoid.com/nifty-gui" xsi:schemaLocation="https://raw.githubusercontent.com/void256/nifty-gui/1.4/nifty-core/src/main/resources/nifty.xsd https://raw.githubusercontent.com/void256/nifty-gui/1.4/nifty-core/src/main/resources/nifty.xsd">
    <useControls filename="nifty-default-controls.xml"/>
    <useStyles filename="nifty-default-styles.xml"/>
    <screen id="start" controller="com.myclass">
        <layer id="foreground" childLayout="vertical">
            <panel id="panel_top" childLayout="horizontal" align="center" height="10%">
                <control id="console" name="nifty-console" lines="5" align="left" valign="top" focusable="true" backgroundColor="#0502"/>
            </panel>
            <panel id="panel_bottom" childLayout="center" align="center" height="55%" backgroundColor="#500a">
                <text align="center" style="nifty-label" height="15%" width="15%" valign="center" text="Hello \#ff0000f0#world" />
            </panel>
        </layer>
    </screen>
</nifty>

Also, in the “console” control all the Java methods involved in coloring the text are not having any effect.
I’m using Jme3.1 Alpha, Nifty jars are version 1.4.1

I wonder if you need to escape the back slash.

“Hello \#ff0000f0#world”

Yeah I tried basically everything… but no, the xml code is is fine. According to the 1.3.2 manual:

Say you have the String „Hello World“ and you want the word „World“ to be colored in red. Then
you can specify the text attribute like so: „Hello \#ff0000#World“ and this text would be displayed
like: „Hello World“.

(“World” is red on the pdf file i’m quoting)
But thanks for caring :wink:

Btw, @pspeed I was really looking into Lemur, but Nifty won me just because of the pre-made console widget. Now if only I could get this color encoding to work…

Well, it should just be passing that string directly to BitmapText. So you can try recreating it with just that and see what you need.

I started making a chat message console and had my BitmapText strings constructed like:
“\#ff0#” + sender + “\#aaa#” + “:” + message;

…and they worked fine.

Ok, assuming it goes straight to a BitmapText I tried the Java way to change the color of the text in the console, and it’s ineffective, I still get the regular white text

niftyConsole = screen.findNiftyControl("console", Console.class);
niftyConsole.getTextField().setText("\\#0f0#Hello");

I don’t understand.

Are you using the correct nifty renderer? I remember only one of the two was supporting color encoding. I think it was the batched renderer, not sure though.

1 Like

Yes! That’s it. Now color encoding works.
It wasn’t easy though, I had to go through the NiftyJmeDisplay.java file to see what constructor used the batched renderer.

I really wish we could put this in the wiki or something.

Anyone can edit the wiki.