Made a cool tooltip class for my current project, utilizing the BABYLON GUI.
Edit
I finally got around to it and simplified it a bit, removed hard-coded things, made stats dynamic (with a setup function)
All included in the PG;
The tooltip class should be the last gui element added to the ADT to always be on top.
Read the code , play around with it, I hope the naming explains the majority.
tooltip.setupStats( [ “A”, “B”, “C”] ); // needed once after tooltip creation.
tooltip.update(name, quality, iconUrl, itemCategory, itemType, stats, gold, description, footNote)
tooltip.show( x, y); // pixel positions of upper left corner of the tooltip.
tooltip.hide();
In the update function, the “stats” argument is an array that matches the setupStats
[ “value of A”, “value of B”, “value of C” ], they can be numbers or strings, null or 0 will make that stat not display.
Original
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 and the icon will be changed ofc
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?
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;
Yes , …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,
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.
//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)
Thanks!
In my case, constitution is just a health stat
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
, play around with it, I hope the naming explains the majority.
and the icon will be changed ofc
, …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’.