Simple Game Start to Finish

This guide is for a simpler game, Falldown. This game doesn't have a backend interface, so you won't be dealing with JSON Web Tokens for encryption. Falldown was initially written by Nick Carneiro of Trillworks. The code can be found on GitHub, and the game can be played here: falldown.clay.io.

This video walkthrough has roughly the same content as this text tutorial.

Part 1 - Including Clay.io

Inluding Clay.io is as easy as copying and pasting this into your section of your index file. You'll of course want to change 'slime' to the API key of your game (you will get this after uploading your game):

<script type="text/javascript">
Clay = {};
Clay.gameKey = "falldown";
Clay.readyFunctions = [];
Clay.ready = function( fn ) {
    Clay.readyFunctions.push( fn );
};
( function() {
    var clay = document.createElement("script");
    clay.src = ( "https:" == document.location.protocol ? "https://" : "http://" ) + "clay.io/api/api.js"; 
    var tag = document.getElementsByTagName("script")[0]; tag.parentNode.insertBefore(clay, tag);
} )();
</script>

Part 2 - Leaderboards

First, we added the leaderboard in the Clay.io developer dashboard (so all scores are stored under that ID):

The fd variable holds settings for the game. Once Clay.io loads, we store the Leaderboard object along with those settings. The id, 8, is from the ID number in the above image:

Clay.ready( function() {
    fd.leaderboard = new Clay.Leaderboard( { id: 8 } );
} );

To show the leaderboard, we just map it to the "L" key (de.keys.l is true when the l key is down):

if( de.keys.l === true )
{
    de.keys.l = false;
    fd.leaderboard.show();
}

To post to the leaderboard, we again use the fd.leaderboard instance we have stored (fd.score holds this game's score). This code is called when the game is over:

fd.leaderboard.post( { score: fd.score } );

Click here for more documentation on leaderboards.

Part 3 - Achievements

First, we added the achievements in the Clay.io developer dashboard. Each game is given 100 point to give out, so split those among your achievements (points are a type of notoriety for members):

When the game is over, the following code is called that awards Clay.io achievements:

if( fd.score > 50000 )
    ( new Clay.Achievement( { id: 19 } ) ).award();
if( fd.score > 100000 )
    ( new Clay.Achievement( { id: 20 } ) ).award();

It's as easy as that!

Click here for more documentation on achievements.

Part 4 - Screenshots

We have taking a screenshot mapped to the "S" key:

if( de.keys.s === true )
{
    de.keys.s = false;
    new Clay.Screenshot();
}

That's it! Everything else is taken care of for you.

Click here for more documentation on screenshots.

Part 5 - Packaging for Clay.io

To get your game on Clay.io, we require a manifest.json file from you that includes some info about your game. The manifest file, along with all your game assets, and a couple of images of your game are packaged into a .zip file and uploaded to clay.

Here's the file we had:

{
    "name": "Falldown",
    "description": "Don't let your ball hit the top of the screen!",
    "version": "1",
    "app": {
        "launch": {
            "local_path": "index.html"
        }
    },
    "icons": {
        "16": "ball_16.png",
        "128": "ball_128.png"
    }
}

Click here for more documentation on the manifest file.

Inside the .zip file were all the necessary Javascript/CSS files, index.html, ball_16.png, ball_128.png, and the manifest.json file.

If you have any feedback, please do let us know at contact@clay.io