Made some cool tooltips

Made a cool tooltip class for my current project, utilizing the BABYLON GUI.
No PG as it’s all tied up in hard-coded stat and item types, aswell as static values i use within in my project.

But maybe it’ll cause some inspiration, i’d love feedback too!

Slightly(cough) inspired by a popular MMORPG.

Populated with dummy values :smiley: and the icon will be changed ofc

2 Likes

Looks good - how did you get the potion description to go down a line since it would overlap with “consumable” - did you measure the text or is there another way?

1 Like

Hi @brianzinn
I actually used nested StackPanels

The item type on left ( cloth, etc ) and equipment/use type on the right, is a horizontal StackPanel nested within a vertical StackPanel for stats, which again is nested within a main vertical StackPanel that includes a top container for the icon & title and at the bottom the description, gold value and the footnote are added to the main StackPanel.

Anything that isn’t used for a given item is hidden with control.notRenderable = true;

1 Like

Looks great, I’m actually in the process of integrating items into my project also. It would be invaluable help if you would/could share your project :slight_smile:

Feedback wise, there is not too much to say as it mostly looks pretty tidy and hierarchy is respected:

  • one thing is unclear, is what does 12 constitution mean for example, is it a cost? is it an effect?

In all cases, great job!

1 Like

Yes :+1:, …you could also have used grids inside your stackpanels. But overall this imbrication of containers is (in my opinion) basically the way you build a complex responsive and dynamic GUI with the BJS 2D GUI. May I add here that I also found that the ‘Editor’ is a pretty good tool to use to better understand this sort of ‘imbrication’.
GJ,

2 Likes

The style remembers me of many games I played from RTS to RPGs. But how do you solve the issue with positioning? Do you calculate absolute left and top (+offset) at i.e. hovered button? My old project used this tooltip design:

But it causes issues, because it needs to wrap around hovered button and z-index can be problematic with other tooltips/hovereds.

@Takemura
Exactly, when a button is hovered.

//on gui button (el) hover
tooltip.update(...); // item data
tooltip.show(el._currentMeasure.left, el._currentMeasure.top, el._currentMeasure.width, el._currentMeasure.height);

...
show(x = 0, y = 0, offsetX = 0, offsetY = 0){
    if(this.icon.isLoaded){
        this.container.isVisible = true;
		this.setPosition(x,y,offsetX,offsetY);
    }
    else {
        let _this = this;
        this.icon.onImageLoadedObservable.addOnce(() => {
            _this.container.isVisible = true;
			_this.setPosition(x,y,offsetX,offsetY);
        });
    }
}
setPosition currently waits one render and before updating the left & top properties 
(Needs to measure the new height)

I sorted the z-indexing by adding the tooltip directly (and last) on advancedDynamicTexture, other UI parts are separated in simular sub-containers, (lobbyUi, gameUi, tooltipUi)

( Messed up the design for now, excuse that :slight_smile: )
tooltipHover

2 Likes

Thanks!
In my case, constitution is just a health stat :slight_smile:

I won’t be sharing it at the moment, but i might do it in the near('ish) future if i get the time.
i simply don’t have the time to update it to be dynamic right now nor supply support for confusing parts of the code

Looking great! :smiley: