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?
Can you repro in the PG?
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. [doc] As a sort of running joke, this control has been referred-to as: “an impure pure control”
Two pures… shacking-up in the same container. heh.
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):
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++;
}
}
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.
Thanks Wing! Your answer was great, I should have posted the code and issue sooner.
https://www.babylonjs-playground.com/#XCPP9Y#1581
Goofin’ around. 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.
Panel is vertical, panel2 and 3 are horzzzz. Let the tweakings continue.
Sometimes, I wish stackPanels had cellMarginLeft/Right/Top/Bottom. Spacing between cells. Might already have that… but probably not.
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. Six-year-old with a chain saw.
Thanks so much Wing, I’ll check out how that was done!
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. 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.
Maybe others will climb-aboard and make improvements or have other ideas.
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);
});
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!
I helped you, I73… now you will help me?
Attention white poodles and snow-tunneling children: Avoid local mail-person paths and tenant parking areas… until after noon today. heh.
Move somewhere warm.