Lemur Button vs Label Text disappearing

User Code & Projects lemur
1

So, I have this code:

    QuadBackgroundComponent bg = new QuadBackgroundComponent(ColorRGBA.Blue);
    TbtQuadBackgroundComponent realbg = TbtQuadBackgroundComponent.create(assetManager.loadTexture("Textures/test9patchtex.png"), 1, 10,10, 229,229,0,false);
    TbtQuadBackgroundComponent realborder = TbtQuadBackgroundComponent.create(assetManager.loadTexture("Textures/inflicted.png"), 1, 10,10, 229,229,0,false);

        attrs = styles.getSelector(null);
        attrs.set("fontSize", 40);
        attrs.set("border", realbg);
        attrs.set("background", realborder);
        attrs.set("insets", new Insets3f(15f, 15f, 15f, 15f));

        Container titleWindow = new Container();
        guiNode.attachChild(titleWindow);

        titleWindow.setLocalTranslation(40, 450, 0);

        Label title = new Label("Realm Racer");
    System.out.println(title.getElementId().toString());
        titleWindow.addChild(title);
        
        Container playWindow = new Container();
        guiNode.attachChild(playWindow);
        playWindow.setLocalTranslation(500, 400, 0);
        
    Button play = new Button("Play");
    play.addClickCommands(new Command<Button>(){
        @Override
        public void execute(Button source){
            System.out.println("PLAY PLAY PLAY");
        }
    });
    playWindow.addChild(play);

Essentially, i have a 9 patch scaling applied to both border and background textures, and apply them to a label and a button. The output becomes this:
Imgur

However, if I change the Label to a Button, it works as expected:
Imgur

Why? Am I missing something about the layer construction of a label versus a button (besides a default background)?

@pspeed I’ll be trying to create a gui over the next couple of weeks, so you better be prepared for a storm of questions :smiley:

2

Not sure… really a Button is just a Label. Try giving your tbt quad components a z offset, though. It’s possible that the label and background are being drawn at the same Z or something. It shouldn’t matter in the GUI node but maybe it does.

I think buttons may have a shadow offset and color by default, pushing the text out a little bit.

3

so, it worked, but only to some extent. Here’s the modified code:

    QuadBackgroundComponent bg = new QuadBackgroundComponent(ColorRGBA.Blue);
    TbtQuadBackgroundComponent realborder = TbtQuadBackgroundComponent.create(assetManager.loadTexture("Textures/test9patchtex.png"), 1, 10,10, 229,229,0,false);
    TbtQuadBackgroundComponent realbg = TbtQuadBackgroundComponent.create(assetManager.loadTexture("Textures/inflicted.png"), 1, 10,10, 229,229,1,false);

        attrs = styles.getSelector(null);
        attrs.set("fontSize", 40);
    attrs.set("border", realborder);
    attrs.set("background", realbg);
    attrs.set("insets", new Insets3f(15f, 15f, 15f, 15f));

Only this order of offsets worked (0 for border, 1 for bg). However, it produced this:

double_border.PNG741×276 43.5 KB

It seems like the text has its own border and background now, independent of the original layers.

UPDATE: It seems to be an issue with the border layers. Turning it off gets rid of the double purple border (gets rid of the whole thing). It could be with the choice of pixels to scale on, maybe.

UPDATE 2: Actually, it seems to be because of the z-offset. Both background and border layer produce this duplication. That, or the pixel choice for stretching, but it seems to be fine with z-offset of 0.

UPDATE3: So, I got it to work. I removed the z-offset of the quads and instead gave the Label a shadowText, but I didn’t set the offset of it. It’s hacky, but it works.

4

Curiously however, if I get rid of the TbtQuad for the background and just use a regular QuadBackgroundComponent with a texture for the background, I get the same double border behaviour, regardless of what hacks I use.

5

I would have to know what your images look like, maybe.

6

Oh, wait… you give a border and a background with 15, 15, 15, 15 insets to every GUI element. So the container will get one… and the label/button in it.

That’s why you get double backgrounds and borders. If you only want those on labels and buttons then maybe only set them on labels and buttons.

7

Oh that’s a good point. I thought the container acted as a layout device and thus didn’t get any styling. But now that I think about it, CSS gives styling to the containers too. It works as expected now, no z-offset required. Thanks!