[SOLVED] Change the text size in nifty ui

Troubleshooting gui
1

Hello, I’m building a TextBuilder using this code:

                    text(new TextBuilder() {{
                        height("100%");
                        text("My Cool Game");
                        color(Color.BLACK);
                        font("Interface/Fonts/Default.fnt");
                    }});

but I didn’t find any method to change the font/text size. The height attribute keeps the letters in the same size.

I found some topics like

but they don’t provide a solution.

Thanks in advance for all the help

2

I’m not sure if you even can stretch it out like that. The thing is that the font you are using is actually a bitmap of a certain size. So to remedy this, you should just use bigger bitmap font. You can generate these bitmap fonts from the regular fonts by using the jMonkeyEngine SDK or AngelFont tool.

3

In the first thread they talk about “textSize effect applied to onActive” but I wasn’t able to reproduce it.

I should use the biggest bitmap font as possible and then the height will scale it down?
Edit: I tried this but it didn’t work. Is there any way I can scale the bitmap instead?

4

A bit of searching came up with this:

5

Yeah, but I remember this being very difficult in Nifty. It’s one of the reasons I switched. I used one of the effects for it but new versions of nifty would break that and then I’d have to slightly rework it.

If OP is just using this for pop-up text or something then we might be able to offer some simple alternatives. If it’s part of an existing form/UI then I’ll let others provide Nifty tech support… edit: but I remember this being difficult.

6

Is there a problem using different font sizes? We actually have 16 different font sizes that we just use. That is 16 different fonts to Nifty. You can generate them quite quickly and that is it, only need to do once.

7

For example:

8
9

So… “Lemur is better”? :slight_smile: And we actually have 22 different fonts, I checked.

10

So, “I want to make this text a different size” “Make more fonts!” :slight_smile:

I don’t know if Lemur is better but you can certainly make text whatever size you want… you used to be able to in Nifty, too.

11

You can use an “onActive” effect textSize. Scaling the bitmap like that tends not to look great, however.

12

With each added font our power grows :slight_smile: I wasn’t even aware that you can change the font size in Nifty in any other way.

13

Lemur is better in many ways. My only issue is with object count on mobile devices, though it is more of a mobile problem in general. You can alleviate it with a more mobile friendly style.

In a new project I would definitely recommend you give it a try. The new animation system gives homage to it’s tween system too. It has recent commits and solid framework if you’re willing to learn generics. Ive always used it since I started a couple years back maybe.

14

I would like to avoid using different font sizes, because I was a continuous range that scales automatically with the resolution. The text is part of a bigger form.

You can use an “onActive” effect textSize. Scaling the bitmap like that tends not to look great, however.

@glh3586 Can you give me a code sample for that? I wasn’t able to do this.

BitmapText.setSize()

@jayfella can you give me a code sample for that? The method is not static, how do I get a BitmapText from here?

       text(new TextBuilder() {{
            height("100%");
            text("My Cool Game");
            color(Color.BLACK);
            font("Interface/Fonts/Default.fnt");
        }});

you mean Java generics? I’m good with them. I’ll give Lemur a try too.

15

Just in case: Getting Started · jMonkeyEngine-Contributions/Lemur Wiki · GitHub

16

I tried Lemur, but I would still like to continue with Nifty.
I was able to make a bit of progress by doing this:

                    text(new TextBuilder() {{
                        height("100%");
                        text(name);
                        color(Color.BLACK);
                        font("Interface/Fonts/Default.fnt");
                        onActiveEffect(new EffectBuilder("textSize"){{
//                                effectValue("100");
//                                effectParameter("factor", "10");
//                                effectParameter("startSize", "2");
//                                effectParameter("endSize", "2");
//                                effectParameter("textSize", "1");
                        }});
                    }});

it seems to change the text size but I’m not sure how to set the right values. I see this example:

using startSize, endSize, factor but they don’t seem to have any effect for me. @glh3586 any idea?

17

Actually I just tested a bit more and the code is working. Here is the final snippet:

                    text(new TextBuilder() {{
                        height("100%");
                        text(pokemon.name);
                        color(Color.BLACK);
                        font("Interface/Fonts/Default.fnt");
                        onActiveEffect(new EffectBuilder("textSize"){{
                            effectParameter("endSize", "4");
                        }});
                    }});
1 Like