A tutorial about creating a flash game template by using Flixel game library with Mochi ads and leaderboard. To show how to join these libraries I created a pointless text adventure game called Don’t Press Space.
Note: This tutorial is obsolete after the termination of all Mochi services, but it can be still used for a learning purpose.
Setup
The external libraries used in this project are:
- Flixel game library (version 2.35)
- Mochi ads and leaderboard (version 3.9.1 AS3)
The project is developed with the FlashDevelop source code editor. To successfully compile it, you have to add a proper classpath to the AdamAtomic-flixel-2_35 game library installed on your computer as follows:
- open project in FlashDevelop
- go to Project menu
- go to Properties
- go to Classpaths
- click on Add Classpath
Flowchart
Here is the flowchart of the game template for better understanding how it works:
Main class
To set your Mochi ID and resolution of your game change the next lines in Main.as class:
|
1 2 3 4 5 |
// define Mochi Game ID public static var strMochiGameID:String = "f2f007e06bbe21d3"; // Substitute this with your Mochi Game ID ! // define Game Resolution public static var strMochiGameRes:String = "600x480"; // Substitute this with a resolution of your game ! |
Menu State class
A Mochi Click Away Ad is defined in create() function of MenuState.as class. If you want to put Click Away Ad on some other position or skip it change the next highlighted lines:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
Main.mcClickAwayAd = new MovieClip(); Main.mcClickAwayAd.width = 300; Main.mcClickAwayAd.height = 250; Main.mcClickAwayAd.scaleX = .5; Main.mcClickAwayAd.scaleY = .5; Main.mcClickAwayAd.x = (FlxG.width - 150 ) / 2 + 50; Main.mcClickAwayAd.y = (FlxG.height - 125 ) / 2 + 30; this.addChild(Main.mcClickAwayAd); // define options for Mochi ClickAwayAd var opts:Object = { }; opts.id = Main.strMochiGameID; // mochi game ID opts.clip = Main.mcClickAwayAd; // attach Mochi ClickAwayAd to this movie clip opts.skip = false; //set this option to TRUE if you want to skip the ClickAwayAd // show Mochi ClickAwayAd MochiAd.showClickAwayAd(opts); |
To show a Mochi Leaderboard in the main menu screen change the next lines inside MenuState.as class according to your leaderboard settings:
|
1 2 3 4 5 6 7 8 |
private function showMochiScore():void { // Substitute these with your MochiAd leaderboard code !!! var o:Object = { n: [4, 2, 2, 9, 14, 10, 7, 12, 10, 5, 14, 5, 2, 4, 2, 15], f: function (i:Number,s:String):String { if (s.length == 16) return s; return this.f(i+1,s + this.n[i].toString(16));}}; var boardID:String = o.f(0, ""); MochiScores.showLeaderboard( { boardID: boardID, onDisplay: displayMochiScore, onClose: closeMochiScore, onError: closeMochiScore } ); } |
Play State class
To send the score to the Mochi Leaderboard when the game is over change the next lines inside PlayState.as class according to your leaderboard settings:
|
1 2 3 4 5 6 7 8 |
private function sendMochiScore():void { // Substitute these with your MochiAd leaderboard code !!! var o:Object = { n: [4, 2, 2, 9, 14, 10, 7, 12, 10, 5, 14, 5, 2, 4, 2, 15], f: function (i:Number,s:String):String { if (s.length == 16) return s; return this.f(i+1,s + this.n[i].toString(16));}}; var boardID:String = o.f(0, ""); MochiScores.showLeaderboard( { boardID: boardID, onClose: onQuitGame, onError: onQuitGame, score:FlxG.score } ); } |
The game example
Note: After the termination of the Mochi services, Mochi ads and leaderboard is not working anymore, but the game is still playable!
Hi there, awesome tutorial Srdjan! Thank you very much. BTW, why doesn’t the state diagram have End state??? Is this game like perpetual, never ends or what? That’s seems a little bit strange and may confuse some people…
Actually Flash games don’t have an end state. You just return to the menu (and the diagram above shows return to the menu as “Close”). An end state in the case of a Flash game is when user navigates to other page or just closes the browser but this is totally out of the game’s scope.
hello goshki. I have tried using this example, however when i try to test my game, it crashes when i try to show the high-score. i have it set up similarly to your sendMochiScore() function but mine is called when the player dies in level1. when the player dies i see mochi active i the top left corner of the screen. then the game freezes. any hints. thank you. i am using flixel 2.53.
hello srdjan susnic, i have a question about sending the score to mochi. following this example, i am able to view the leaderboard. however i cannot get the score function to work. every time i try to add “score:FlxG.score” the program freezes. if i exclude the score the leaderboard shows up fine. any thoughts?
The example is made for flixel 2.35! That’s why it doesn’t work with flixel 2.53.
I’m going to prepare a new version for flixel 2.53 as soon as I get some free time.
oh. i see. that explains allot. thank you. any quick tips point me in the right direction for showing the score?
Well, it’s hard to me to say what is wrong without the source code, but I can say that I’m currently working on a new game using flixel 2.53 and everything works fine for me with Mochi Ads and Leaderboards (I can show and send score without any problems). And I’m using the same code as in this example!
if it helps my game is heavily inspired by the pixelate flixel primer game demo. if you have time to check it here is the download link
https://github.com/oladitan/Hover-Over-City
ok. i have a variable _scoreText that is an Flxtext where _scoreText.text=flxg.score.toString();.
private function showHighScore():void
{
var o:Object = { n: [9, 4, 13, 0, 12, 3, 14, 9, 13, 15, 10, 2, 6, 10, 15, 6], f: function (i:Number,s:String):String { if (s.length == 16) return s; return this.f(i+1,s + this.n[i].toString(16));}};
var boardID:String = o.f(0, Main.strMochiGameID);
MochiScores.showLeaderboard({boardID: boardID, score: _scoreText});
}
i have also tried
private function showHighScore():void
{
var o:Object = { n: [9, 4, 13, 0, 12, 3, 14, 9, 13, 15, 10, 2, 6, 10, 15, 6], f: function (i:Number,s:String):String { if (s.length == 16) return s; return this.f(i+1,s + this.n[i].toString(16));}};
var boardID:String = o.f(0, Main.strMochiGameID);
var score:String = o.f(0, _scoreText);
MochiScores.showLeaderboard({boardID: boardID, score:score});
}
showHighScore(); is a function that is called when the player is killed. the game remains in the this state until the enter key is pressed.
I can see mochi load up in the top left of the screen, but when it tries to access “score” the game freezes. do i need to explain more about what “score” is in another Class is or something.
i hope this makes sense. thank you.
Well try to submit only FlxG.score :
MochiScores.showLeaderboard({boardID: boardID, score: FlxG.score});
And try to compile your project as a realease version (not debug version)!
i have set forceDebugger to false. in my MenuState “Splash1”, the highscore will open, but will freeze the program if I try to close it. in the Playstate: “Level1”, when my player dies, the game will freeze upon trying to open the highscores. I have placed a link to the files here:
https://github.com/oladitan/Hover-Over-City
if you have a moment to look at it. thank you.
hi srdjan, the score works only after i reuploaded it to mochi with the updated code. I thought it would work from my computer. It still does not work from flashdevelop, only online so far. thank you.