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:
- 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);}
- 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); }}
- 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'); } } }
- 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()); }
- 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 :)


Pingback: Flash Games » Blog Archive » MochiLand: Tutorial: Custom Leaderboards With Mochi API (AS3)