MochiAds Leaderboards Service

To add a leaderboard to a game, log into MochiAds and click on the name in the game listings. Be sure the game has been Approved before you start this process.

earnings by game

After you click on a listing, you will see a screen that looks like this:

game details

Click the [Leaderboards] button, and then on the next screen click the [Create Leaderboards] button:

create leaderboards

Now you need to fill out the options on the Leaderboards screen.

create leaderboards 2

For Home Computer Wars, we will keep everything default except the “highlight Color” which we will change to red to match our in-game colors. When you are done, click [Create Leaderboard]. Next you will see the API information screen:

leaderboards api info screen

First, you need to download the new files for MochiServices and copy the entire Mochi directory into the root of your game files (where the .fla sits). Next, we need to add the connect() call to our game. We will add it to the first frame, after the call to MochiAds.

leaderboards

Now, we need to add the Leaderboards code to our game. We already have a screen FEndScreen with an associated class file named EndScreen.as. We will use that file to add the Leaderboard.

The first thing we need to do is import the mochi package into our class:

import mochi.*;

Next, we need to launch the Leaderboard Screen. We will do this when finalscore is set on EndScreen. We will do this in the setfinalScore() function:

public function setFinalScore(scr:Number) {
			finalScore = scr;
			mochi.MochiScores.showLeaderboard({boardID: "5e138b8cf06173d2", score: finalScore, onClose:LeaderBoardClosed});
		}

The mochi.MochiScores.showLeaderboard() is the heart of this process. There are many options for showing the Leaderboard, but mostly use the most basic ones. The Leaderboard System will collect a username for us, all we have to do is provide the score. We place finalscore after the score: property of the object passed to showLeaderboard() .

The Mochi LeaderBoard will automatically call play() to _root when it is closed, so we need to stop this by setting a onClose() handler. We don’t want anything to happen onClose(), because EndScreen has its own function for restarting thr game. To support onClose, we will add a dummy function named LeaderBoardClose() that does nothing (for this lesson anyway).

function LeaderBoardClosed() {
		}

And that is pretty much all there is to it. The final code for EndScreen.as looks like this:

import mx.events.EventDispatcher;
import mx.utils.Delegate;
import mochi.*;
class EndScreen extends MovieClip {

	var button_playagain:MovieClip;
	var finalScore:Number = 0;

	function EndScreen() {
			EventDispatcher.initialize(this);
        	button_playagain.onRelease = Delegate.create(this,EventClickPlayButton);
        	finalScore = 0;

		}       

        public function setLocation(x:Number,y:Number) {
                this._x = x;
                this._y = y;
        } 

		public function setFinalScore(scr:Number) {
			finalScore = scr;
			mochi.MochiScores.showLeaderboard({boardID: "5e138b8cf06173d2", score: finalScore, onClose:LeaderBoardClosed});
		}

		function LeaderBoardClosed() {
		}

        function EventClickPlayButton() {
                this.dispatchEvent({type:"EventCloseEndScreen"});
        } 

	public function addEventListener(){/*Interface Stub*/}
	public function removeEventListener(){/*Interface Stub*/}
	public function dispatchEvent(){/*Interface Stub*/}
}

Now when we play Home Computer Wars, and finish a game, we see a screen like this:

leaderboards example

For more detailed information on the Mochi Leaderboard, go here and play the latest game below.

Now this version of the game is ready for testing. You can grab all the latest updated files here.

Read the rest of the series: ‘Anatomy of a Flash Game’

  1. Anatomy of a Flash Game: Lesson 1 – Setting up the game
  2. Anatomy of a Flash Game: Lesson 2 – Creating Enemies & The Game Environment
  3. Anatomy of a Flash Game: Lesson 3 – MochiAds, MochiBot and MochiAds Leaderboards