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 it’s 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 4 more buttons, "Show properties", "Show color properties", "Change base card", and "Elements". Clicking on any of these will show the respective section, which can be closed by clicking the button again. If it doesn’t seem like clicking a button is showing anything, try scrolling down, as the section may be below another section.

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.

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.

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.

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.

There exists 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 are able to 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:

Any icon that has been inserted also has some special modifiers that can be applied to it. These modifiers are:

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. An example of this would be:

In this example, we have a move 3 ability with an optional block that allows the consumption of 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.

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

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:

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.

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:

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:

This section will be dedicated to more advanced styling, to achieve the desired look for your cards. This includes things like the ability to create a banner, or a group of actions that are all part of the same action.

The main block we care about here is the "group" block. This block is used to group actions together, allowing horizontal stacking, or easy positioning of multiple actions at once. One of the easiest examples to show this off is the aforementioned banner. On official cards, there are sometimes a group of actions at the top of the card in a separate "banner" area. Here’s an advanced example of how we can recreate something like that using the group block:

In this example, we have a group block that contains two actions, an attack and a AoE hex pattern. Group blocks default to a flexDirection of row, so the two actions will be placed next to each other. The group block also has a marginTop of -40px, which will pull the group up into the top area of the card. The paddingTop of 20px will add some space between the top of the group and the top of the card, allowing the darker background to extend seamlessly to the edge of the card. Finally, you can see the Named Ability block at the top, which is used to create the iconography in the corner of the banner group we’ve just created.

The principles shown here can be applied to many different scenarios, and using a combination of everything shown so far, there is a lot of freedom available to you to create the card you want. Remember, you are able to access the example syntax class to see some examples of how to use these blocks, and how they can be combined to create the desired effect. Otherwise, experiment a little with the blocks, and see what you can come up with!

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.