[Solved] Text within a nifty scroll panel acquires a black surround

Troubleshooting gui
1

I’m trying to use a scroll panel within niftygui to display messages. However; the text in this context is ending up with a strange black surround like this (only when scroll panel is created in Java):

text%20with%20outline
text%20with%20outline725×509 9.92 KB

How do I get rid of that?

I also can’t see anywhere in the java api to turn off the horizontal scroll bar, is that possible?

Minimal example:

Example.xml:

<?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="letterSelect" controller="test.NiftyController">
        <layer id="foreground" childLayout="center">
            <panel id="scrollHolder" height="80%" width="85%" align="center" childLayout="vertical">

            </panel>
        </layer>
    </screen>
</nifty>

Main:

public class Main extends SimpleApplication {

@Override
public void simpleInitApp() {

    NiftyJmeDisplay niftyDisplay = new NiftyJmeDisplay(
            assetManager, inputManager, audioRenderer, guiViewPort);
    Nifty nifty = niftyDisplay.getNifty();
    guiViewPort.addProcessor(niftyDisplay);

    nifty.addXml("Interface/example.xml");
    nifty.gotoScreen("letterSelect");
}

@Override public void simpleUpdate(float tpf) {}

public static void main(String[] args){
    Main main = new Main();
    main.start();
}

}

Nifty controller (dynamically creates a scroll pane, with some text in it):

public class NiftyController  implements ScreenController {
private Nifty nifty;
private Screen screen;

public void bind(Nifty nifty, Screen screen) {
    this.nifty = nifty;
    this.screen = screen;
}
@Override
public void onStartScreen() {
    Element scrollHolderPanel = screen.findElementById("scrollHolder");
    scrollHolderPanel.getChildren().forEach(Element::markForRemoval);


    new PanelBuilder() {{
        childLayoutCenter();
        height("100%");
        width("100%");
        control(new ScrollPanelBuilder("scroll") {{
            panel(new PanelBuilder() {{
                valignTop();
                childLayoutCenter();
                height("400px");
                panel(new PanelBuilder() {{
                    childLayoutVertical();
                    height( "100px");
                    panel(new PanelBuilder() {{
                        childLayoutVertical();
                        text(new TextBuilder() {{
                            textVAlignTop();
                            textHAlignLeft();
                            text("some example text");
                            font("Interface/Fonts/Default.fnt");
                            //color("#000000"); 
                            height("100%");
                            width("100%");
                        }});
                    }});

                }});

            }});
        }});
    }}.build(nifty, screen, scrollHolderPanel);

}

@Override public void onEndScreen() {}
}
1 Like
2

The surround is probably caused by issue #99:
blendMode=”multiply” in Nifty renders incorrectly · Issue #99 · jMonkeyEngine/jmonkeyengine · GitHub

There’s a workaround, but it’s hard to find. I’ll dig it up and get back to you.

1 Like
3

Here’s the workaround I got from @void256 back in 2014:

(1) Add the following XML before the <screen> tag:

    <style id="my-scroll-panel#scrollpanel">
        <attributes backgroundColor="#888f"/>
        <effect overlay="true">
            <onActive name="imageOverlay"
                      filename="blackborder.png"
                      imageMode="resize:1,30,1,1,1,30,1,1,1,30,1,1"
                      post="true"/>
        </effect>
    </style>
    <style id="my-scroll-panel#bottom-right">
        <attributes width="23px" height="23px"/>
    </style>

(2) Apply the “my-scroll-panel” style to each scrollPanel control using

style("my-scroll-panel");

Link to the complete 2014 forum post via the Internet Archive:

Topic: Nifty labels inside a scrollPanel control | jMonkeyEngine.org

2 Likes
4

To disable the horizontal scrollbar:

parameter("horizontal", "false");
1 Like
5

Perfect! That resolved everything! Thank you so much!

1 Like