TRsiew 0 Report post Posted July 4, 2018 hi , do here have any GUI leaderboard sample or tutorial to learn ? Share this post Link to post Share on other sites
Deltakosh 4,306 Report post Posted July 5, 2018 Hello! what are you expecting precisely? What kind of leaderboard? Share this post Link to post Share on other sites
TRsiew 0 Report post Posted July 10, 2018 this kind of leaderboard , have any sample like this ? Share this post Link to post Share on other sites
Deltakosh 4,306 Report post Posted July 10, 2018 You can basically do a lot with our StackPanel but we do not support scrolling yet 1 Wingnut reacted to this Share this post Link to post Share on other sites
Wingnut 2,300 Report post Posted July 10, 2018 Hi guys. I've been playing... https://www.babylonjs-playground.com/#08KEYA#46 Pretty complicated and rigid... using a row-stackPanel swap-in/out system... to simulate scrolling. MouseWheel scroller is being grumpy yet, but slider works ok. Dialog height and row rectangle height... super sensitive... not easily scalable (currently frozen to 6 items in-view). *shrug* It's something to mess-with. Other/better coders might advance it. I just finished the sort-by-score section. The database (array-of-objects) is built in lines 158-169, with the sorter happening next. I'm not sure if I will continue to advance this or not. The lawn needs mowing, and I need lunch. Are those good excuses to give my brain a break? A nod/wink/hi5 to @The Leftover. Although the sort code is borrowed from web-folk, I thought about some things he's been teaching me... when I entered line 174. He's been teaching me about calling a function with a function as the arg/param. It still feels retarded, but, I'm workin' it into my brain... slowly. A dynamic parameter. weird. Update: PG now at 46. I had the dialog set for proper height... when I had my dev tools open. When I closed my dev tools pane, dialog white space went bad. Better now. I THINK I used to know how to set a GUI control so that it didn't "squish" when I opened my dev tools panel . But, I forgot how to do that. Note: How many of you had a flashback to "Leaderboard Golf" when you read this thread title? :) Twas a popular series, long ago. 2 TRsiew and The Leftover reacted to this Share this post Link to post Share on other sites
adam 754 Report post Posted July 10, 2018 Here's a PG I created a while back that might be helpful: https://www.babylonjs-playground.com/#R4C9C1#10 4 1 DylanD, Wingnut, dbawel and 2 others reacted to this Share this post Link to post Share on other sites
Deltakosh 4,306 Report post Posted July 10, 2018 Well, @adam is close to a final version If you want to finish it we could merge it directly 1 DylanD reacted to this Share this post Link to post Share on other sites
TRsiew 0 Report post Posted July 11, 2018 thanks for answer , can the StackPanel add control with image ? i tried the StackPanel , look not work with StackPanel , and only work with Rectangle Share this post Link to post Share on other sites
Deltakosh 4,306 Report post Posted July 11, 2018 StackPanel works with all controls Can you provide a repro of your problem? Share this post Link to post Share on other sites
Arte 165 Report post Posted July 11, 2018 Hi @TRsiew and welcome from me, https://www.babylonjs-playground.com/#HUG2V9 Is this what you looking for? Share this post Link to post Share on other sites
TRsiew 0 Report post Posted July 12, 2018 @Arte thanks , it is . one more question , how can we add text under image ? similar like Rectangle add control var rect = new BABYLON.GUI.Rectangle(); rect.width = "100px"; rect.height = "100px"; var text = new BABYLON.GUI.TextBlock(); text.text = ""; text.color = "white"; rect.addControl(text0); Share this post Link to post Share on other sites
aWeirdo 338 Report post Posted July 12, 2018 @TRsiew Please see the GUI documentation for positioning of controls; https://doc.babylonjs.com/how_to/gui#position-and-size If you'd like to make a request for someone to code a score/leader-board for you, requests can be put in this sub-forum: http://www.html5gamedevs.com/forum/35-service-offers-and-requests/ Have a nice day 1 1 Arte and TRsiew reacted to this Share this post Link to post Share on other sites
Arte 165 Report post Posted July 12, 2018 As @aWeirdo mentioned everything in documentation. https://www.babylonjs-playground.com/#HUG2V9#1 Share this post Link to post Share on other sites
DylanD 51 Report post Posted July 12, 2018 On 7/10/2018 at 2:49 PM, adam said: Here's a PG I created a while back that might be helpful: https://www.babylonjs-playground.com/#R4C9C1#10 this is really cool Share this post Link to post Share on other sites
adam 754 Report post Posted July 14, 2018 On 7/10/2018 at 4:26 PM, Deltakosh said: Well, @adam is close to a final version If you want to finish it we could merge it directly I'm not going to be able to get to this right away. When I do, I'm going to need to discuss how we should deal with styling. edit: It would be nice if the slider would continue to work even if your pointer moves off control (to the right for instance). Share this post Link to post Share on other sites
aWeirdo 338 Report post Posted July 14, 2018 3 hours ago, adam said: edit: It would be nice if the slider would continue to work even if your pointer moves off control (to the right for instance). Happens because the GUI is rendered on a mesh, when the pointer leaves the mesh, no more pointer events ^^. Not quite sure how best to fix it, as the event is passed between parents & children, using their measurements, etc. babylon.gui.js#L3221 Would have to do your own pointerMove event.. or add it to the scene pointerMove observable and do all the measurements "again"/ "locally" Atleast it works well on fullscreen; https://www.babylonjs-playground.com/#R4C9C1#12 Share this post Link to post Share on other sites
TRsiew 0 Report post Posted July 16, 2018 thanks for all the answer , babylonjs how to add/load custom font(ttf) for TextBlock ? Share this post Link to post Share on other sites
aWeirdo 338 Report post Posted July 16, 2018 @TRsiew You can load a Font using CSS and reference it using the fontFamily property. // Css @font-face { font-family: 'myFontsName'; src:url('fontsSubFolder/myFontsName.ttf'); font-weight: bold; font-style: normal; font-size: 20px; } // Js textBlock.fontFamily = "myFontsName" Share this post Link to post Share on other sites
TRsiew 0 Report post Posted July 16, 2018 @aWeirdo it's work , thanks for answer 😍 Share this post Link to post Share on other sites