Card Creator Documentation

The base info section is where you can define all the aspects of your class that don’t involve the cards themselves, such as the info presented on the class mat.

Here is a brief overview of the properties you can define:

To create a deck, head to the "Decks" tab in the Card Creator and click the "Add" button. This will create a new deck for your class. You can then open this deck by clicking its name in the list, or the "Cards" button next to the deck.

Once a deck is created, and you have opened it by either clicking on it, or clicking the "Cards" button next to it, you’ll be brought to the screen you’ll be spending the majority of your time in. This is the deck building screen.

Immediately, you’ll be able to see two buttons, "Show starting deck" and "Show advanced deck". Once you’ve started creating cards, you can use these buttons to see the entire level 1/X spread, and the entire level 2-9 spread, respectively.

Below that are four more buttons: "Deck Properties", "Deck Stats", "Card Style", and "Templates". Clicking any of these will open its respective window.

One thing to note about the following sections is that for some of the options (especially the color properties), it’ll be easier to see what they do once you’ve actually started creating cards. You can either skip to the Adding Cards section to start creating cards, or continue reading to see what each section does.

To export a high-quality spread image of your cards:

The structure of a card is based on indentation. Every sub-block or modifier must be indented with exactly 2 spaces more than its parent. This tells the system which modifiers belong to which command. For the purposes of this guide, "parent" refers to the block that is one level higher in the hierarchy.

For example:

In this example, the "margin" modifier is indented 2 spaces relative to the "- attack: 3" command, indicating that it applies specifically to that action.

Here is a more complex example:

In this example, we have utilized a "group" block to contain multiple actions. Each action is indented 2 spaces relative to the "group" command. This indicates that they all belong to that outer block. The hierarchy continues with the "divider" and "optional" blocks, each containing their own sub-blocks.

A more detailed explanation of each block type is provided in the following sections.

Remember: use 2 spaces per level of indentation to maintain the proper hierarchy.

When you create and focus a new card, you will immediately be greeted with a basic structure like this:

If you want to change the base actions (the attack 2 for top and move 2 for bottom), you can modify the following parameters:

As you can see, there are already a few things you can control. Changing the name of the card, its level, or its initiative is as easy as modifying the value. There are also a few modifiers outside the main action block:

Finally, let us continue with the main block defined by:

Any action the card defines, as discussed in Basic Actions, goes into the actions segment. However, there are also several modifiers for a top or bottom action that go outside that block.

These include:

These modifiers and/or icons go before the actions block, since they apply to the entire half of the card. For more detail on these properties, see Other Common Card Properties.

This section covers the core actions used to define a card’s abilities.

Conditions modify abilities and can be used with or without an associated value. The available conditions are:

Elements represent various thematic or mechanical attributes. They support single values, consumption markers, and infuse modifiers.

Tip: You can write a consume icon inline by appending c to the element name, e.g. firec will render a consume fire icon. This works for any element (e.g. icec, windc).

Available elements include:

Using multiple elements separated by '/' will generate an “or” condition.

Note: The square brackets in the consume and infuse examples are required in the syntax.

Note: For infusion, this will only work at the first indentation level. This means that either bottom: or top: should be its direct parent. infuseStyle: should sit directly below infuse:, but it should share the same parent block.

There is a special block for custom actions, which allows you to write any text you want. This block is useful for creating unique abilities or actions that don’t fit into the predefined categories.

Within these blocks, you can insert any of the common icons, such as conditions or elements, to further customize your text. This includes any class tokens that you’ve linked in the properties section.

The syntax for inserting these icons is: %iconName%.

Here are some examples of custom actions:

Sub Blocks are the blocks that house the extra properties of an action. These are things like range, target, and other modifiers that can be applied to an action. These blocks are always indented 2 spaces from their parent action, like so:

In this example, the "sub" block contains the "target", "range", and "pierce" modifiers. These are all indented 2 spaces from the "attack" command, indicating that they are all part of that action.

Alongside all existing conditions, the available attributes you can put in a sub block are:

Optional blocks represent abilities, or augments to abilities that come with a cost. The most frequent example of an optional block is an elemental consumption. This would be represented as follows:

The above will render an attack 3 ability with an optional block that consumes earth and adds +2 attack. Sometimes, an optional block may be used to represent an extra ability, rather than an augment to an ability (without being attached to it), in this case we use the modifier "noLine". An example of this would be:

In this example, we have a move 3 ability with an optional block that allows consuming earth to perform an additional heal 2. The noLine modifier is used to prevent a line from being drawn between the move and heal abilities, since in this case they are separate abilities.

Mandatory blocks are used to represent abilities that must be performed if that action is being played. Outside elemental infusion (which is created automatically with the infuse modifier), mandatory blocks are most often used to force a negative action to occur. An example of this would be:

In this example, we have an attack 3 ability with a mandatory block that means the player has to curse themselves.

An extension of the mandatory block is the Mode Blocks section.

The tokens block creates token slots. Each number in the provided array represents the XP that the token slot provides.

The area of effect block is used to create a hex pattern. This takes the following form:

In this example, we have an area of effect block that creates a hex pattern of two hexes in front of the player and another orange hex below them. Each letter in the string represents a hex, and the order of the letters determines the order of the hexes. The letters are as follows:

You may also use some letters for custom colored hexes, which you can color using CSS styling as shown in the example. These letters include d, h, f, and c.

To place icons on hexes, use the hexIcons modifier on the hex object. You can target any visible hex letter in the pattern, including a (ally), b (blank), t (target), s (self), and custom hexes such as h, c, d, and f. When placing an icon on a hex, it is usually best to remove the default shadow; see Icon Modifiers. You can do that by adding -s to the icon name, as in classToken0-s. The simplest form maps a hex letter directly to an icon name:

If you need more control, you can use an object instead. This gives the same result by default, but also lets you adjust the icon with dx, dy, and scale:

Any of those extra properties can be omitted, and the default values will be used.

Summons are a special type of action that can be created using the "summon" block. This is one of the more complex blocks, as it has a lot of properties that can be set. Here is an example of a basic summon block:

Note: This specific block’s properties require a double indentation (4 spaces).

In this example, we have a custom action that creates a summon called "Example Summon". This summon has 5 health, 2 move, 3 attack, and no range. The summon also has an image, which is set to a URL, and has various properties to position the image in the image box. It also has 1 shield defined in the special box (optional). Finally, the width of the special area is set to 100 pixels.

Here are all the properties that can be set for a summon:

There are further properties that can be set for a summon. These extra properties won’t change the appearance of the card, but will change the behavior of the summon in TTS. These properties are:

For a summon to operate correctly in TTS, it needs a detailed stats block in addition to its name. This block uses a nested object format and allows you to define richer stat information than the simple array, including attack effects and movement type:

In this example, the summon has 2 health, a move of 2, a range of 3, and an attack of 1 that inflicts Muddle. The movementType is set to "Fly", which means the summon will be treated as a flying unit in TTS. The effects array inside attack accepts condition name strings and will display them on the standee in TTS.

Named ability blocks are used to create a small banner in the top left corner of the card. This is useful when you have certain keyword abilities that have special rules defined on the class mat. A starter class that uses this is Mindthief, with its "augment" abilities. Note: this block only refers to the corner containing the keyword, not the banner containing the abilities. For help with the abilities banner, see the Advanced Styling section.

In order to use this block, it should be placed at the base level of the action, with only "top:" or "bottom:" as a parent. Here is an example:

The mode block can be used to create something akin to Blinkblade’s fast or slow abilities. Here is an example of how to use the mode block:

In this example, we have a mode block that contains an attack 2 ability, and an icon of the class token.

The mode block has a couple of special properties that can be set. These are:

Before we get into more advanced styling options, here are some common properties for an action and how they can be used. Do note that all of these properties should be a direct child of the "bottom:" or "top:" block, just like the "infuse:" block.

Modifiers allow you to fine-tune the placement, size, and appearance of each block. To apply modifiers, ensure each block is defined as an object (i.e. using a colon after the block name).

These style modifiers can be applied to any block, and should not have a hyphen in front of them. For example, to apply a modifier to an attack action, you would write:

Above the code editor, there are several controls that help you work with card code more efficiently.

This section covers two advanced styling topics: special text styling inside text-based blocks, and layout techniques for banners and grouped actions.

Once you have created and opened a new mod, the main brunt of the work comes down to getting the various assets for your class sorted. This is all done within the mod that you created on the site.

At the top of the mod page, there are a few things to fill in before getting to the assets.

The first thing to do is to switch on the "Active Mod" toggle. This toggle is how TTS will know which mod to use when importing the class. In some cases, you’ll have multiple mods for the same class (for example if the class has two decks), and you’ll be able to import both decks by importing one, and then changing the active mod to the other.

After this you have the Mod Name and the Deck Index. The mod name can be set to anything you want, it’s just so you know which mod is which in the list of mods on the class creator website. The deck index is the index of the deck you want to import. This is usually 0, but if you have multiple decks, you can set this to the index of the deck you want to import.

Some people like to make a new deck for every version of the class they make, so they can keep track of changes, and if you’re doing this, you’ll need to change the deck index to the index of the deck you want to import. This starts at 0, and goes up by 1 for every new deck you make, so if you have 3 decks, you’ll have deck indexes 0, 1, and 2 (in the order they appear on the "Decks" page).

Now come the assets themselves.

In order to import the class into TTS, you will first need to subscribe to the following mod on the Steam Workshop: https://steamcommunity.com/sharedfiles/filedetails/?id=3163711044

Once you have subscribed to the mod, you can open TTS, and create a new game. In the game, you’ll need to go to the "Workshop" tab, and search for the mod you just subscribed to. Once you’ve found it, click the "Load" button, and the mod will be loaded into your game. Within this you will see a tile that allows you to enter a class name and generate the bag.

Enter the name of the class you want to import, and click the button. This will create a bag with all the assets you need to play the class in TTS.

To upload this bag as your own Steam Workshop mod so that others can download and play your class, follow these steps:

If you’re not using the site to create your class, and instead just want to use it to import your class into TTS, you can still do this. Rather than using the "Upload Image" buttons, you’ll need to manually link to the images of your assets. Ensure that the level 1/X cards are separate from the level 2-9 cards, and that you’ve inputted the correct number of rows and columns for each card spread.

Once this is done, there is one extra step needed, that normally would be done for you. This is naming all the cards for import into TTS. Next to each image of the card spread, you’ll see a large input box. This is where you need to input the name of the card. This should be the name of the card, followed by the initiative value in brackets, and then the level of the card, in square brackets. For example, "Mighty Attack (48) [1]". This should just be in a list, with each card on a new line, similar to the perk list.

Other than having to manually link all the images, and name all the cards, the process is the same as if you were using the site to create your class.