Tutorial: Custom Leaderboards With Mochi API (AS3)

Hi everyone,
I haven’t found any example how to create a custom leaderboard, so I’ve decided to create one. I’m sure that it can be useful for you :)
To follow this tutorial, you should be familiar with the information in the Mochi Media docs.

With just a little bit of time, we will create something like this:

Let’s go!

We need 6 buttons: 2 function buttons (Load – to load our leaderboard, Send – to send the score)and 4 buttons to filter the score: daily/weekly/monthly/all

We also need 3 columns (Text fields) to output name/score/date of players.

Main code:

  1. initialization function
    initBoardfunction 
    initBoard():void{
    	MochiServices.connect("MochiGameID", root);// connecting to MochiServices
    	MochiScores.setBoardID("LeaderboardID"); // set the board ID to the leaderboard you wish to work
    withbtnDaily.addEventListener(MouseEvent.CLICK, showLeaderboard_d);
    btnWeekly.addEventListener(MouseEvent.CLICK, showLeaderboard_w);
    btnMonthly.addEventListener(MouseEvent.CLICK, showLeaderboard_m);
    btnAll.addEventListener(MouseEvent.CLICK, showLeaderboard_a); 
     
    btnLoad.addEventListener(MouseEvent.CLICK, loadLeaderboard);
    btnSend.addEventListener(MouseEvent.CLICK, sendScore);}
  2. request is a list of score: onScoresReceived – callback function that gets the scoresfunction
    loadLeaderboard(e:MouseEvent):void
     
    {
    MochiScores.requestList(this, onScoresReceived);// request the scores and send them to the onScoresReceived method in this object or class}
     
    //description onScoresReceived functionfunction onScoresReceived (args:Object):void{
    if (args.scores != null) {
    allScores = MochiScores.scoresArrayToObjects(args.scores);
    showScore(allScores, 0, 15);
    /*
    * showScore(scores:Object, typeTop:int = 0, countPlaces:int = 10):void
    * @scores - array of objects whose keys are derived from cols
    * @typeTop - values:
    * 		0 : alltime score
    * 		1 : monthly score
    * 		2 : weekly score
    * 		3 : daily score
    * @countPlaces - number of scores. show top 15 players for example
    */
    } else {
    if (args.error) trace("Error: " + args.errorCode);	}}
  3. implementation of the showScore function:
    function showScore(scores:Object, typeTop:int = 0, countPlaces:int = 10):void
    {
    var scoresOb:Object;
    var place:int = 1;
    txt_name.text="";
    txt_score.text="";
    txt_date.text="";
    for (var i = 0; i < countPlaces; i++) {
    switch(typeTop) {
    case 0: scoresOb = scores.alltime[i]; break;
    case 1: scoresOb = scores.monthly[i]; break;
    case 2: scoresOb = scores.weekly[i]; break;
    case 3: scoresOb = scores.daily[i]; break;
    }
    if (scoresOb) {
    txt_name.appendText(place++ + " " + scoresOb.name + '\n');
    txt_score.appendText(scoresOb.score + '\n');
    txt_date.appendText(showDate(scoresOb.timestamp) + '\n');
    }
    }
    }
  4. function to display the correct date, for users :)
    function showDate(date:Object):String
    {
    var myDate:Date = new Date(date);
    var arMonths:Array = new Array("January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December");
    return (arMonths[myDate.getMonth()] + " " + myDate.getDate() + ", " + myDate.getFullYear());
    }
  5. to send the score
    function sendScore(e:MouseEvent):void{
    var score:int = 300;
    var name:String = "Typenamehere"
    MochiScores.submit(score, name, this, SubmitComplete);
    }
    function SubmitComplete(ok:Boolean):void{
    if (ok){
    trace("Scores submitted!");
    }else{
    trace("Error");
    }
    }

That’s it. Here, I’ve described how to create a simple leaderboard. With this is simple leaderboard we can also add the current rank of the player, country flags, and a scroll bar…but I’ll save that for another tutorial :)

Download the source here