Proper way to have UI elements stack?

Questions
#1

I have a UI element (image) that I need to overlay a score over, what’s the properway to do this on a stack pannel?

#2

Can you repro in the PG?

#3

I can help with that part, and probably show the “proper” way, too. Inside a stackPanel, grid, any other container, or stand-alone, button is a single CreateImageWithCenterTextButton control. Put it anywhere that any other control can go.

https://www.babylonjs-playground.com/#PLTRBV#7

Sweet feature, huh? Works great. :slight_smile: [doc] As a sort of running joke, this control has been referred-to as: “an impure pure control” :wink: Two pures… shacking-up in the same container. heh.

#4

Here’s my ripped out code: https://www.babylonjs-playground.com/#XCPP9Y#1578

What I’m trying to do is place the score ‘0’ in this case where it is but then also have images that I can place in the bottom circles (acting as tokens):

image
image821×324 56.8 KB

When I change the height of the score text that offsets the bottom images, so I’m trying to see how I can do this either by absolute values or if there’s a better way than I am doing it here.

And my code:

    class scoreHud extends BABYLON.GUI.StackPanel {
    scoreText = new BABYLON.GUI.TextBlock("scoreHud", (<string>new String(0)));
    currentToken = 0;

    constructor() {
        super();
        this.verticalAlignment = BABYLON.GUI.Control.VERTICAL_ALIGNMENT_TOP;
        this.horizontalAlignment = BABYLON.GUI.Control.HORIZONTAL_ALIGNMENT_LEFT;
        this.widthInPixels = 500;
        this.heightInPixels = 200;
        var image = new BABYLON.GUI.Image("scoreImage", "/scenes/hud_score-bar.png")
        image.parent = this;
        this.addControl(image);
        this.scoreText.widthInPixels = 400;
        this.scoreText.heightInPixels = 200;
        this.scoreText.fontSizeInPixels = 72;
        this.scoreText.color = "white";
        this.scoreText.textHorizontalAlignment = BABYLON.GUI.Control.HORIZONTAL_ALIGNMENT_CENTER;
        this.scoreText.paddingLeft = "150px";
        this.scoreText.paddingBottom = "40px";
        this.addControl(this.scoreText);

        var token =  new BABYLON.GUI.Image("token", "/scenes/img/hud_score-bar_token.png");
        token.parent = this;
        token.widthInPixels = 50;
        token.heightInPixels = 50;
        token.paddingLeft = "150px";
        token.paddingBottom = "40px";
        this.addControl(token);
    }

    public updateScoreHud() {
        this.scoreText.text = <string>new String(scoreSystem.getScore());
    }
    
    
    public setSmartToken(){
        this.currentToken++;
    }
}
1 Like
#5

I think a grid could do that fine, but the panel almost looks like 2 isVertical=false stackpanels… in a single isVertical=true stackpanel. Others may have other ideas… stay tuned. Sorry about misunderstanding for my first answer.

2 Likes
#6

Thanks Wing! Your answer was great, I should have posted the code and issue sooner.

2 Likes
#7

https://www.babylonjs-playground.com/#XCPP9Y#1581

Goofin’ around. :slight_smile: Having some problems getting the spacing between the 5 tokens in panel3… correct. I fig others can fight with it for awhile… and I will recDrugs.normalize() for a bit. :smiley:

Panel is vertical, panel2 and 3 are horzzzz. Let the tweakings continue. :slight_smile:

Sometimes, I wish stackPanels had cellMarginLeft/Right/Top/Bottom. Spacing between cells. Might already have that… but probably not. :slight_smile:

Reminder: Wingy is rarely “proper” and is MUCH more often… “git 'er done”, no matter the route. Any good coder… already knows that about me… just by glancing at my code. :open_mouth: Six-year-old with a chain saw.

1 Like
#8

Thanks so much Wing, I’ll check out how that was done!

#9

My pleasure. I hope I’m not ruining all your experimenting fun.

https://www.babylonjs-playground.com/#XCPP9Y#1582

I put 4 “blank tokens” (tokenSpacer1-4) in-between the 5 “fur tokens” in panel3 (lower horz stack - the tokens stack). Works, looks ok, probably not the best solve for token spacing. Shrug.

Adjust width of spacers in lines 106-120. Line 70 adjusts indent of entire panel3 (left/right position of tokens stack).

Yawn. :slight_smile: Rotation on tokens… shows I have a little clipping on the left-side of token1. hmm.

Fix: I made another tokenSpacer (#0)… just 10 pixels wide… and inserted it in panel3 FIRST… before token1. Works good, now - no token1 clipping. Ahhh… fun with GUI. :slight_smile:

Maybe others will climb-aboard and make improvements or have other ideas.

2 Likes
#10

You saved my life man, I’m so used to relying on the styling I was pulling my hair out trying to figure out why the padding wasn’t working, the spacers is what saved it.

        this.tokens.forEach(element => {
            element.alpha = 0;
            element.widthInPixels = 55;
            element.heightInPixels = 55;
            panel3.addControl(element);

            var tokenSpacer1 = new BABYLON.GUI.Rectangle("tokenSpacer1");
            tokenSpacer1.widthInPixels = 22;
            tokenSpacer1.heightInPixels = 22;
            tokenSpacer1.thickness = 0;
            panel3.addControl(tokenSpacer1);
        });
1 Like
#11

Good to hear, i73!

Yeah, the entire panel should probably be inside a master rectangle container… so it can be easily moved-around to various places within the ADT (advancedDynamicTexture)… but I haven’t gotten there.

16-20 inches of snow, here, in the last 36 hours. I’ll be snow-blowing forever, it seems. I got 70% of it blown yesterday, though… mid-blizzard. Yee ha! Today’s blow should be easier, in theory. Happy thanksgiving! :confused:

I helped you, I73… now you will help me? :slight_smile:

Attention white poodles and snow-tunneling children: Avoid local mail-person paths and tenant parking areas… until after noon today. heh.

2 Likes
#12

Move somewhere warm. :joy:

2 Likes