mirror of
https://github.com/ArnoldSmith86/virtualtabletop.git
synced 2025-02-17 00:51:53 +08:00
30
Step by Step Example to Build Deck
96LawDawg edited this page 2025-02-01 08:35:15 -06:00
This page contains step-by-step demonstrations of how to build a basic deck of cards from scratch and how to use the deck editor with its 5 default configurations.
Deck from scratch
Let's assume you want a deck of square cards that has 4 solid color backgrounds with a symbol for each color/suit. Each color/suit will also have a card valued from 1 to 4, so this deck will have 16 cards. If you have not already done so, review Cards and Decks for an overview of the various parts that make up a deck widget.
- Open the JSON Editor (ctrl-J or Edit Mode on the left menu bar). Make sure you are viewing the JSON by pressing the {} JSON toolbar option on the far right of the screen. It will show just
{}on some screens and is third from the top. It will show{} JSONon wider screens. - On the top toolbar, press the + button to add a new widget. Then click the blank deck (the one with a holder and recall button with 0 cards in it - middle of the far-left column).
- Select the deck by moving the mouse over the holder and the deck circle and clicking on the circle. Or move the mouse over the circle and look for the F-key at the top right of the screen and press it. Or click on the TREE toolbar item on the right (directly below the {} JSON) and find the deck and click on it (then click on {} JSON again). Any of these methods work. They are just demonstrated here to help you get familiar with the JSON Editor.
- Your cursor should already be in a good location for the next step, but make sure your cursor is on a line in the JSON in the editor that is not inside the lines with cardTypes or faceTemplates (lines 15+).
- Click the blue button on the right "cardDefaults".
- A new property is created and your cursor is placed there. You also get a new button option for height and width. Click that button to make the JSON look like this:
"cardDefaults": {
"width": 160,
"height": 103
},
- Comments: Recall that "cardDefaults" is where you would put any properties that you want on all cards. Width and height are the most common things to include in "cardDefaults" since you want at least those properties to be identical on all cards in most decks. (The width and height that are in gray on the deck are the width and height for the deck itself, which is essentially useless because players do not interact with decks). For more complicated cards, you could also put custom pile handle information, clickRoutines, etc. here.
- Manually change the values for height and width to 100 because we are going to be making square cards.
- Place your cursor on the "cardTypes" row.
- Click the blue button "card type template."
- You get a random 4 digit name for a cardType. Change the name of the card type to something meaningful like "Blue 1".
- Comments: This is just a reference for this type of card; it can be anything. It is not displayed on the card (unless you want it to be). It is not the "id" of a card (those are randomly generated 4 digits when the card is added using buttons as described below).
- We want each card to have customizable face with color, shape, and number, so change it so it looks like this:
"cardTypes": {
"Blue 1": {
"shade": "blue",
"shape": "/i/game-icons.net/sbed/big-egg.svg",
"text": 1
},
- Comments: the parameters "shade", "shape"," and "text" are just convenient labels being used. They could be changed to anything you want. The values will be specified on each card using those names. The values provided in "cardTypes" are defaults that will take effect if not overridden by a particular card. For shade, "blue" is the color. You could use hex color values, RGB, etc. For shape, this is a link to a game-icons.net SVG that is available in VTT. You can also upload your own images or select different ones. To try that, in the JSON Editor, with your mouse and cursor, select the entire "shape" line and you should see two new buttons appear. One is to choose a symbol from within VTT and one is to upload your own. For the "text" property, this is a numerical value; if you want a string, put it in quotes like
"text": "Blue"
- In the "faceTemplates" area, there will be two faces to this card. We are going to change what is added by default. Face 0 (listed first) is the back of the card. By default, it has an image of a card back on it. We want to make it an image of the VTT logo on a white background. Make the first face JSON look like this:
{
"border": 1,
"radius": 8,
"objects": [
{
"type": "image",
"width": 100,
"height": 100,
"color": "white",
"value": "/i/icons/vtt_logo.svg",
"svgReplaces": {
"currentColor": "logoColor"
}
}
]
},
- Comments: This adds a border 1px wide. It rounds the corners (radius) 8px. Those 2 settings apply to the entire face. After that are the objects (think "layers" of either images or text) that are on the face. This is an image type of object that is 100 x 100 (the same size as the card). The background of the image is white. The "value" is what we want the image to be; in this case it will be the VTT logo on all the cards. And it uses a VTT feature "svgReplaces" to change the color of the logo (called "currentColor") to another color to be specified on the cards (called "logoColor"). "currentColor" is the name of the color used in the SVG file. It renders as black unless changed by "svgReplaces." "logoColor" is just the label used to refer to the new color to be assigned.
- Now is a good time to add a card so we can see what we are doing in the room. Put the cursor on a line somewhere inside the brackets of "Blue 1". Click the "add card 1" button. You should see the card with a back appear. If you click it to flip it over, it will disappear because nothing is on the other face yet, but you can click it again and the back will reappear.
- Because we are using an SVG file that we want to recolor on every card in the deck, we put that information on the "cardDefaults" property of the deck. Add this new line into the "cardDefaults":
"logoColor": "#1f5ca6".
- Now we want to work on the main face (face 1). This is going to have 2 objects. The first is a background color with its associated shape and the second is the text. More complicated cards may have as many object layers that you need. So change that face to look like this:
{
"border": 1,
"radius": 8,
"objects": [
{
"type": "image",
"width": 100,
"height": 100,
"svgReplaces": {
"#000": "shapeColor"
},
"dynamicProperties": {
"color": "shade",
"value": "shape"
}
}
]
}
- Comments: This sets the same border and rounded corners. This is another image type object that is the same size as the card. An image color is also being replaced. This time, we are replacing #000 instead of currentColor. The reason is because the VTT icons use currentColor and the game-icons.net symbols use #000. Those are common ones, but the values could be anything for symbols from other sources so you may have to view the SVG in a text editor offline to find the colors to be replaced. This time, the new color will be specified as "shapeColor". And this object layer uses "dynamicProperties" which will be set on each card in "cardTypes". The color of the image will be referred to as its shade and the value (the image link itself) is being called its shape, but those labels could be anything.
- Position the cursor in the objects area of this face. Click the blue button "text template" to add another object layer. Change the "y" and "fontSize" properties and add a "color" property so it looks like this:
{
"type": "text",
"x": 0,
"y": 18,
"color": "black",
"fontSize": 50,
"textAlign": "center",
"width": 100,
"dynamicProperties": {
"value": "text"
}
}
- Comments: This layer will be made up of text. It is being positioned at 18px down the y axis so it will be centered on the card based on our chosen font size. The color of the text is black. The default color is black, so you could just delete this line; or you could make it different on each card by putting color in the dynamicProperties area using something like
"color":"textColor"and then specify the textColor value on each cardType. The size of the font is 50px. The text will be aligned horizontally in the center of its width. The width of the text area is 100px, the full width of the card (which is why we don't need to change the x value). And there is one dynamic property: the value of the text (what text will be displayed on the card) will depend on what is listed in each cardType for the parameter "text" (but again, you could make that anything, such as "value" or "display" or whatever). The order of the layers is important; they build up from bottom to top. So, for example, if you put the text layer first in the object list, it will be "behind" the colored background and shape and not visible.
- Flip the card onto its main face and make sure it looks like you want. Changes you make on the faceTemplates will show up as you make them on the card. You cannot see the text number yet because it is black on black. That is fixed in the next step. Note that the buttons you see on the right side of the screen may differ from what is in the image. Those buttons are context sensitive and change based on where the cursor is.
- We added another new svgReplaces color. That needs to be added to the "cardDefaults":
"shapeColor": "#ffffff80". This is the color white with transparency added so it will let the card background color show through some.
- Now go back and make a cardType for each card. You can use the blue button "card type template" or copy and paste your Blue 1 card and then change the card type, shade, shape, and text. Repeat. This deck has blue cards with eggs, red cards with a heart, green cards with a circle, and orange cards with an arrow, like this:
"cardTypes": {
"Blue 1": {
"shade": "blue",
"shape": "/i/game-icons.net/sbed/big-egg.svg",
"text": 1
},
"Blue 2": {
"shade": "blue",
"shape": "/i/game-icons.net/sbed/big-egg.svg",
"text": 2
},
"Blue 3": {
"shade": "blue",
"shape": "/i/game-icons.net/sbed/big-egg.svg",
"text": 3
},
"Blue 4": {
"shade": "blue",
"shape": "/i/game-icons.net/sbed/big-egg.svg",
"text": 4
},
"Red 1": {
"shade": "red",
"shape": "/i/game-icons.net/skoll/hearts.svg",
"text": 1
},
"Red 2": {
"shade": "red",
"shape": "/i/game-icons.net/skoll/hearts.svg",
"text": 2
},
"Red 3": {
"shade": "red",
"shape": "/i/game-icons.net/skoll/hearts.svg",
"text": 3
},
"Red 4": {
"shade": "red",
"shape": "/i/game-icons.net/skoll/hearts.svg",
"text": 4
},
"Green 1": {
"shade": "green",
"shape": "/i/game-icons.net/delapouite/plain-circle.svg",
"text": 1
},
"Green 2": {
"shade": "green",
"shape": "/i/game-icons.net/delapouite/plain-circle.svg",
"text": 2
},
"Green 3": {
"shade": "green",
"shape": "/i/game-icons.net/delapouite/plain-circle.svg",
"text": 3
},
"Green 4": {
"shade": "green",
"shape": "/i/game-icons.net/delapouite/plain-circle.svg",
"text": 4
},
"Orange 1": {
"shade": "orange",
"shape": "/i/game-icons.net/delapouite/plain-arrow.svg",
"text": 1
},
"Orange 2": {
"shade": "orange",
"shape": "/i/game-icons.net/delapouite/plain-arrow.svg",
"text": 2
},
"Orange 3": {
"shade": "orange",
"shape": "/i/game-icons.net/delapouite/plain-arrow.svg",
"text": 3
},
"Orange 4": {
"shade": "orange",
"shape": "/i/game-icons.net/delapouite/plain-arrow.svg",
"text": 4
}
},
- The last step to making the deck is to add cards. There are two ways to do that, but first you should delete the sample card in your room. Select it in the room by clicking on it. Then you can either press the Delete button on your keyboard, or click white x on a trashcan icon on the top toolbar. The next steps are either/or depending on your preference.
- (20a). JSON method: Select the deck again. Then put your cursor anywhere in the "cardTypes." On the right, click the blue button "add one card of all 16 cardTypes".
- (20b). Properties method: Select the deck. Click on the Properties button at the top of the Menu on the right-hand side. This will show a graphical representation of each card with the number of each card in the room. You can add cards individually or collectively. A disadvantage of doing it this way is that initially, the pile structure is very messed up. The image below shows what this looks like after adding one card of each type.
- If you want to make the holder the correct size for the cards, change the width and height of the holder to 108.
- When you are done, the complete deck widget will look like this (of course the name of your deck and your parent will be different randomly generated characters):
{
"type": "deck",
"id": "r4zjD",
"parent": "r4zj",
"x": 12,
"y": 41,
"width": 86,
"height": 86,
"movable": true,
"movableInEdit": true,
"cardDefaults": {
"height": 100,
"width": 100,
"logoColor": "#1f5ca6",
"shapeColor": "#ffffff80"
},
"cardTypes": {
"Blue 1": {
"shade": "blue",
"shape": "/i/game-icons.net/sbed/big-egg.svg",
"text": 1
},
"Blue 2": {
"shade": "blue",
"shape": "/i/game-icons.net/sbed/big-egg.svg",
"text": 2
},
"Blue 3": {
"shade": "blue",
"shape": "/i/game-icons.net/sbed/big-egg.svg",
"text": 3
},
"Blue 4": {
"shade": "blue",
"shape": "/i/game-icons.net/sbed/big-egg.svg",
"text": 4
},
"Red 1": {
"shade": "red",
"shape": "/i/game-icons.net/skoll/hearts.svg",
"text": 1
},
"Red 2": {
"shade": "red",
"shape": "/i/game-icons.net/skoll/hearts.svg",
"text": 2
},
"Red 3": {
"shade": "red",
"shape": "/i/game-icons.net/skoll/hearts.svg",
"text": 3
},
"Red 4": {
"shade": "red",
"shape": "/i/game-icons.net/skoll/hearts.svg",
"text": 4
},
"Green 1": {
"shade": "green",
"shape": "/i/game-icons.net/delapouite/plain-circle.svg",
"text": 1
},
"Green 2": {
"shade": "green",
"shape": "/i/game-icons.net/delapouite/plain-circle.svg",
"text": 2
},
"Green 3": {
"shade": "green",
"shape": "/i/game-icons.net/delapouite/plain-circle.svg",
"text": 3
},
"Green 4": {
"shade": "green",
"shape": "/i/game-icons.net/delapouite/plain-circle.svg",
"text": 4
},
"Orange 1": {
"shade": "orange",
"shape": "/i/game-icons.net/delapouite/plain-arrow.svg",
"text": 1
},
"Orange 2": {
"shade": "orange",
"shape": "/i/game-icons.net/delapouite/plain-arrow.svg",
"text": 2
},
"Orange 3": {
"shade": "orange",
"shape": "/i/game-icons.net/delapouite/plain-arrow.svg",
"text": 3
},
"Orange 4": {
"shade": "orange",
"shape": "/i/game-icons.net/delapouite/plain-arrow.svg",
"text": 4
}
},
"faceTemplates": [
{
"border": 1,
"radius": 8,
"objects": [
{
"type": "image",
"width": 100,
"height": 100,
"color": "white",
"value": "/i/icons/vtt_logo.svg",
"svgReplaces": {
"currentColor": "logoColor"
}
}
]
},
{
"border": 1,
"radius": 8,
"objects": [
{
"type": "image",
"width": 100,
"height": 100,
"svgReplaces": {
"#000": "shapeColor"
},
"dynamicProperties": {
"color": "shade",
"value": "shape"
}
},
{
"type": "text",
"x": 0,
"y": 18,
"color": "black",
"fontSize": 50,
"textAlign": "center",
"width": 100,
"dynamicProperties": {
"value": "text"
}
}
]
}
]
}
And the cards will look like this:
Customized default decks
To use the deck editor to add a new deck, when the JSON Editor open, click anywhere there is not a widget. Then click on the PROPERTIES toolbar on the far right and then the radio button for a Custom deck of cards.
After clicking on the radio button, you will get areas for choosing the suit symbols. You can choose from 9 (but you can manually change them later).
You also have an area to select suit properties including color and the available ranks.
Finally, at the bottom, choose from one of these 5 default card designs:
Once you are satisfied with the options, click on the green + Add to Game button. The deck will be added to the upper left hand corner (probably behind a card) and the cards will be spread out in rank order by suit. At this point, if you want to change the suit symbols, click on the {} JSON button on the right toolbar. Select the deck (remember, it is in the upper left corner, so move that card and click on the deck, use the F-keys, or use the Tree. Then, for each symbol you want to change, select and highlight that entire row with your mouse and cursor and look for the blue and white button that appears in the upper right to either pick an asset from the symbol picker or to upload a different asset. You can manually replace every instance of the icon using cut and paste, or there is a search and replace tool in the TOOLBOX button the right side of the screen. Note that if you use the search and replace, you cannot use / unless you are using a regex so replace each word between the slashes in your symbol link individually.