Creating The Tokenset

  1. First, go to the “My Tokensets” tab on the home page and click on “Create New” to create a new tokenset.
../../_images/t3-tutorial-my-tokensets.png
  1. You should now see your tokenset in the list of tokensets.
  2. Click on your tokenset to open the tokenset editor.
../../_images/t3-tutorial-my-tokensets-2.png
  1. Click on “Create Token” to create a new token.
../../_images/t3-tutorial-create-token.png
  1. Click on a token thumbnail to access the token editor for that token.
../../_images/t3-tutorial-token-thumbnail.png

Prototype State JSON

During the game, tokens are represented in the game state as an object with “props” (properties). A token’s props should tell the game engine everything one needs to know about the token to manage game play. The props can change over the course of the game.

In the “Prototype State JSON” field, we are specifying what the token props should be at the moment of instantiation.

For tic tac toe, we just need a way to distinguish x’s from o’s, so something like this:

{
  "props": {
    "token_type": "x"
  }
}

Note

The input must be valid JSON

View Configs

We also need to tell the frontend how the token should be rendered. A view is one particular way to render the token.

A token can have multiple views. For example, cards have two views: the front and the back, and both need to be specified for the game UI to render properly. A 20-sided die would have 20 views.

For tic tac toe tokens, we only need 1 view per token (the default).

Display modes represent different kinds of token UI. The display mode fa-icon is a token that gets rendered as a FontAwesome icon.

Once a display mode is picked, display configs need to be set to specify the specifics of how to render the view. Different display modes expect different fields in the display config JSON.

For fa-icon, the display config JSON should be a single field with name “fa-icon” specifying the icon name. Only free icons will render on Turn Base.

{
  "fa-icon": "times"
}

By default, icons are assumed to be in the “fas” namespace (solid icon set). The namespace can be changed with the colon (:) notation:

{
  "fa-icon": "far:circle"
}
../../_images/t3-tutorial-tokens.png

Make sure to save the tokens/tokenset when you are done editing.

Select the tokenset(s) you created in the game spec.

../../_images/t3-tutorial-game-spec-tokenset.png