Jump to content

Leaderboard sample


Recommended Posts

Hi guys.  I've been playing...


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.

Link to comment
Share on other sites

@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";
Link to comment
Share on other sites

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

Link to comment
Share on other sites

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 :D

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

Link to comment
Share on other sites

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

Link to comment
Share on other sites

You can load a Font using CSS and reference it using the fontFamily property.

// Css
@font-face {
    font-family: 'myFontsName';
    font-weight: bold;
    font-style: normal;
    font-size: 20px;

// Js
textBlock.fontFamily = "myFontsName"


Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...