Leaderboard sample

[TRsiew]

hi , do here have any GUI leaderboard sample or tutorial to learn ?

[Guest]

Hello!

what are you expecting precisely? What kind of leaderboard?

[TRsiew]

 this kind of leaderboard , have any sample like this ?

[Guest]

You can basically do a lot with our StackPanel but we do not support scrolling yet

[Wingnut]

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.

[adam]

Here's a PG I created a while back that might be helpful:

https://www.babylonjs-playground.com/#R4C9C1#10

[Guest]

Well, @adam is close to a final version If you want to finish it we could merge it directly

[TRsiew]

thanks for answer , can the StackPanel add control with image ? i tried the StackPanel ,  look not work with StackPanel , and only work with Rectangle

[Guest]

StackPanel works with all controls

Can you provide a repro of your problem?

[Arte]

Hi @TRsiew and welcome from me,

https://www.babylonjs-playground.com/#HUG2V9

Is this what you looking for?

[TRsiew]

@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);

[aWeirdo]

@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

[Arte]

As @aWeirdo mentioned everything in documentation.

https://www.babylonjs-playground.com/#HUG2V9#1

[DylanD]

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

[adam]

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).

[aWeirdo]

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
 

[TRsiew]

thanks for all the answer , babylonjs how to add/load custom font(ttf) for TextBlock ?

[aWeirdo]

@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"

 

[TRsiew]

@aWeirdo it's work , thanks for answer ?