Builder:Paperdoll API

When you play Tootsville, you see the “Paperdoll Mini” in the bottom, right-hand corner of your screen.

This Paperdoll Mini can also be added to your own web sites.

You can obtain the public Avatar information for any Toot character in the game.

Limits[edit]

You are only permitted to request a few Avatars per minute. If you try to request more, you'll receive an Error_420.
You must obey the Core:TOS terms of service. The Paperdoll API is part of Tootsville V.

Basic Usage[edit]

To embed a Paperdoll Mini into a web page, you must have permission to run JavaScript on that page. This means you can't post it onto most other people's web sites.

Step 1. Obtain API Key[edit]

Visit https://tootsville.tk/tk/manage/api-keys and sign in with your Google Account. (If you have never played Tootsville, you'll be asked to create a Toot character at this time.)

Click the (+) icon to create a new API key for your Paperdoll Mini usage.

Step 2. Insert HTML code into Header[edit]

In the HTML code for the page, you'll need to put in this small script anywhere between <head

<script src="https://www.tootsville.tk/tk/paperdoll.basic.js" type="application/javascript" async defer></script>
<script>window.addEventListener('load', Tootsville.paperdoll.magic);</script>
<meta data-tootsville-api-key="tk/123-456-789">

Replace 123-456-789 in <meta data-tootsville-api-key="tk/123-456-789"> with the API key you obtained from https://tootsville.tk/tk/manage/api-keys

Step 3. Insert Canvas for Paperdoll Mini[edit]

At the place in your page where you want the Paperdoll Mini to appear, insert a canvas element like this:

<canvas data-tootsville-paperdoll="Zap" height="256" width="256">
  If you had a cool web browser, you'd see Zap here.
</canvas>

Replace Zap in data-tootsville-paperdoll="Zap" with the name of the Toot character you want to display. You can set the height and width parameters as you wish.

The text between the canvas tags will be displayed in older browsers, or for non-graphical browsers, like those used by blind users, or search engine results.

How this works[edit]

When your page loads, the script you included will use your API key to request the Toot avatar information for each character named in a canvas/@data-tootsville-paperdoll attribute. The same 3D game engine used on play.tootsville.org is then used to draw the avatar into the canvas element.

As a result, it can take a moment before the Toot character appears. By setting the height and width parameters, you can allow your viewer's web browser to lay out the page, leaving space for the image when it becomes ready. You can (and usually should) also use CSS styling to adjust the placement and size of the canvas.

Advanced Usage[edit]

TODO:

Query the Avatar object from the API server
Render the Avatar into a canvas

Contents