Introduction to ARISjs – Leaderboards in ARIS 2

In this post, I’ll show you how to add a leaderboard to your ARIS game. Since this requires a bit of code—which thankfully we can pretty much just copy and paste—this post will also serve as an introduction to ARISjs, a javascript library baked into ARIS and accessible from many parts within. Even if you—like me—never thought of yourself as being able to build with code, all it takes is a little copy-paste to extend ARIS to be able to do amazing new things.

Strap in, let’s go for a ride!

Rupee Collector

Rupee Collector is the perfect use case for a leaderboard in an ARIS game. You can read more about it here, here, or here, but basically the game uses factories to spawn rupees all around a player at regular intervals. The player collects them to get points, also called Rupees. The game itself, since the rupees are spawned in terms of the players’ locations, is playable anywhere in the world (with data coverage). So wouldn’t it be great to compare the scores of players worldwide? Yes!

The procedure is pretty simple

  1. First, you an item in your game that you want to keep track of, in this case Rupees.
  2. Next, make a plaque for your leaderboard. Paste the leaderboard code (described below) into the plaque.
  3. Third, decide how you want the player to see the leaderboard. I simply created a tab in the player interface (In the Editor, Game > tabs >new tab) that points to my leaderboard plaque.

Done. Now all you need to know is what to copy and paste.

The Leaderboard Code

The sample code for the leaderboard is here, along with other ARISjs examples among the ARIS project pages at GitHub. This code solves all the really hard problems. All you need to do is replace a couple bits and pieces, and add in whatever other code you want to style the leaderboard. If you’ve not played with code before, this may still look like a lot of work, but it is doable. I’ve taken the code from the Rupee Collector leaderboard and annotated where you make changes. I wanted to show this below, but WordPress is fighting with me. So I’ve made a Google doc to do the job. A bonus is that all you need to do is copy the document itself, and make the needed changes before copying the code into your leaderboard plaque.

Here is the leaderboard template: Annotated Leaderboard code for copying

Before going there, I can also give you a feel for what you will be changing. No need to write them down though; they are mentioned inline there too.

  1. Two changes (marked in red) you must make to get the leaderboard working in your game: the item name and the game id. These need to be exactly right, and are the only two changes to either my or the ARISjs example code you need to make.
    var item_name = 'Rupees';
    var game_id = 7204;
  2. Header and column headings to ease the reading of the leaderboard. These are up to you.
    var content = "HIGH SCORES"+"<br />";
    content += "Player</span></div><div class='rupees'><span class='qty'>Rupees"+"<br />";
  3. Styling of the text and layout. This again is up to you. In the example from Rupee Collector, there are separate styles for the document generally and each one of the “div” classes.a. You can set specific fonts instead of using the default one. As I do here, you can even use fonts the browser doesn’t have by giving the program a url at which they can find the font.
    @font-face
    {
     font-family:vg_font;
     src:url('https://dl.dropboxusercontent.com/u/121361/leaderboards/Rupee%20Collector%20Leaderboard/emulogic.ttf');
    }

    b. Settings for body text establish a baseline for the text on the page. They can be overruled by div classes you define. I make the background of the page black, the text yellow, the font size 14px, and the text is by default in the custom font loaded above.

    body
    {
     background-color: #000000;
     color: #ffeb24;
     font-size:14px;
     font-family:'vg_font'; 
    }

    c. Below are the settings for the div classes. Notice that some are set to the left or right as bodies of text (float:left), and have their text aligned within that space (text-align), have specific size text, and so on. I fiddled a lot with these, especially .rank—where I centered the text and made sure the space was big enough to have the next field (player) align correctly when the numbers got to be two digits long—to get everything to look the way I wanted.

    .header {float:center; text-align:center; font-size:28px; }
    .entry {width:100%; overflow:auto; }
    .rank {float:left; text-align:center; min-width:44px; }
    .name {float:left; text-align:left; }
    .qty {float:right; text-align:right; }
    .player {float:left; text-align:left; font-size:16px; }
    .rupees {float:right; text-align:right; font-size:16px; }
    </style>

ARIS and ARISjs

The above procedure is just one example of how you can take what ARIS does and, with a little bit of copy-paste, find ways to make it do much more. Also, if you happen to be versed in interactive HTML and Javascript design, it is possible to use those existing talents to extend ARIS much farther.

The following areas in ARIS are presented as text fields but actually parse HTML and Javascript

  • Game Description Text
  • Plaque Text
  • Conversation Lines
  • Item Description
  • Quest Description (Active and Complete)

Sustainable U is a game made by the Mobile Learning Incubator (including some of the ARIS team and the current Field Day Lab) last year at the University of Wisconsin-Madison. It is a good example of starting with an ARIS game and fleshing it out with Javascript mini games.

You can also get started with this stuff at a much smaller level. Basic text formatting or including additional media can be done in the same way.

<b> This text will look bold in ARIS </b>

In future posts, I’ll detail some other commonly useful additions to ARIS via HTML and Javascript. General functions you can read about in many places, and there is also a library of Javascript functions (ARISjs) that speak to ARIS itself. You can check out the full list of documented examples on github and there’s a walkthrough about ARISjs itself in the ARIS manual.

Advertisements

3 thoughts on “Introduction to ARISjs – Leaderboards in ARIS 2

  1. Pingback: The Button – New AR Paradigms Using World Items and ARISjs | Local games lab ABQ

  2. Hello,

    I’m currently trying to make a leaderboard for my game and was wondering, how can I find my game’s ID?

    Thank you!

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s