Made a cool tooltip class for my current project, utilizing the BABYLON GUI.
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.
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.
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
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’.
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.
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