Example with deck editor - ArnoldSmith86/virtualtabletop GitHub Wiki

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.

1. Start in a blank room. Go into Edit Mode (ctrl-J or Edit Mode on the left menu bar). Click the deck editor button (third from the right; the one next to the tutorial cap).

2. Near the top left, click the blue “Add New Deck” button. On the overlay the opens, chose the "Square tile 100 x 100" option, enter “demoDeck” as the id, and then press the green “Create Empty Deck” button. The new deck starts with 2 faces. The back (face 0) is blue and the front (face 1) is white.

3. In the upper right, there is a series of tabs. Under “All Cards”, which already should be the active tab, are properties that apply to all cards. The width and height should already be set here to 100 x 100. All cards will be 100 pixels square.

4. Now click the “Card Type” tab. Change the name from “type 1” to “Blue 1”. All cards of this type (there could be more than one) will have this for their cardType property.

5. Click the “Face” tab. Properties here apply to this face, but only this face, of every card. Typically, this is used for borders and enlarging when a user hovers over the card. Move the mouse over the “new property” field and use the down arrow expander to add a border and change the value type from text to number, then click Add. A new field has been created. Change the 0 to a 1. If you are in light mode you will see the border added; if in dark mode, you cannot see the black border. Now do the same thing and use the down arrow expander to add a radius, change the value type to number, and click Add. Then change the value to 8.

6. On the left side, if “Face 0 (back)” is not expanded to show a blue area, then click on “Face 0.” Click on the blue rectangle under that. This selects that rectangle, which is a face object, or in other words, individual components that are layered to create the visual appearance of the card. On the right side, the tab has changed to “Object.” Change the color to white (#ffffff) by typing the value or using the color picker button. Properties in the top section where it says “Face object 1 (image)” will apply the same on all cards.
7. Properties in the amber “Dynamic properties” section will be different per card type. You can add properties here just like before. For example, this would be a good place to add how much a card is worth in points, or what suit it is. Just give the property an appropriate name. We will not be using that in this demo. If you want to add something visual to a card like text, icon, image, or a block of color, that is done on the left side. We will get to that shortly.

8. Now to add the image we want, on the left side, make sure that the white square below “Face 0 (back)” is selected. Then click the blue “+” button directly above “demoDeck” to add a face object, or click the blue "+" button on the right side directly above "Face object 1 (image)." They both do the same thing. On the sub menu that appears, leave the radio button on “All Cards” because we want this image to be the same on every card. Then click the blue “Icon” button. An icon picker will appear in the middle of the screen. Look at 5th category of icons called “VTT Icons – Internal UI” and select the first one (the meeple popping up through the screen).

9. The previous step added the VTT logo image. Now we need to adjust it. To change the color, on the right under the “Face object 2 (icon)” use the text value field to enter “#1f5ca6”. Then you can change the position by entering 0 for “x” and “y” or by dragging the icon in the center of the screen by the drag handle (the last icon on the blue toolbar attached to the icon) until it reaches 0,0. Then you can use the increase size handle (the middle one on the toolbar) until it reaches 100 or type 100 in the “size” property. The back face of the card is complete.

10. On the left side, click on “Face 1 (front)”. On the right side, the “Face” tab should be highlighted. Create a 1px border with radius 8 like you did for the front.

11. On the left side, click on the first face object under “Face 1 (front).” This is a blank white color area that comes as the front of a new blank deck. We will change the color to use dynamic properties to allow each card type to show different things. At the bottom of the right side, use the drop down arrow expander to choose “color" for the “Object property” (or type “color”). In the “Card property” field, type “shade”. Then click the amber "Link" button. Notice that the “color” property was moved from the “Face object 1 (image) section to the “Dynamic properties” section. In this way, when we are done, each card type will have a shade property on it that specifies the color of the base (face object 1) of the card.

12. Now to create the shade/color we need for this card type, click on the “Card Type” tab at the top of the right side. You can see the linked property “shade” with the value #ffffff for white. Erase the hex color value and enter “blue.”

13. Now we need to add more face objects. Make sure that the light gray checkerboard pattern below “Face 1 (front)” is selected. Above “demoDeck” click on the blue “+” button to add a face object, or click on the "+" button above "Face object 1 (image)" on the right side. This time, click the “Card Type” radio button. The color changes to amber indicating the deck will be using “dynamic properties” to allow each card type to show different things.

14. Click on the blue “Icon” button and in the overlay that opens, type “egg” into the search bar and select the large, black, solid color egg. On the right side under “Face object 2 (icon), resize and position the egg so that it is at 0,0 and size 100. The icon (value) that will appear on each card type is already linked to the card property (icon) listed under the “Dynamic properties” section on the right side. We want the color to be a semi-transparent white, so change the “color” property to “#ffffff80”. This lets some of the blue background show through and creates a nice contrast between the background and the icon without having to figure out exactly which color to make the icon. And this will apply to all icons of this face object since the color is in the “same on every card type” section.

15. Now one more face object. On the "+" add face object button, the correct selections should already be in place. Just click the blue “Text” button to add a text area that will differ per card. Use the following property values: x:0, y:18, width:100, height:60, fontSize: 50, textAlign: center.

16. Then click the “Card Type” tab. Change the value of the “text” property from “Text” to 1. The first card is complete.

17. Now we need to use this card template to make more cards. In the bottom strip, directly above the one card type showing are several buttons. Click the 3rd one (two overlapping squares) three time to copy this card type and create 4 total cards. Since we used a number at the end, the card type value incremented automatically as well. Below the new card type it shows we have 0 cards. Do not worry about that for now. We will come back to that later. The only thing we need to change is the text property.

18. Select Blue 2. Make sure the right-side tab is on “Card Type” and then change the text value to 2. Do the same for Blue 3 and 4.

19. Make sure Blue 4 is selected because copying inserts to the right of the selection. Use the copy card type button one more time to create a 5th card. Make sure the “Card Type” tab is selected. Change the name to “Red 1”. Change the shade to “red”. Change the text to 1. Click on the small icon picker button to the right of the icon property. A smaller icon picker is displayed embedded in the right side toolbar. Type “hearts” into the search bar and select the solid single heart.

20. Use the copy button to make 3 more copies of this card type, changing the text value to show 1-4 again.

22. Make a 5th copy of the red cards. Change the name to Green 1. Change the shade to “green.” Change the text to 1. Click the icon picker, and search for “circle” and select the large, black, solid color circle. Make 5 copies and change the text as before. For the last suit, use orange and search for “plain-arrow”. Repeat the process to make 4 cards.

22. The last thing to do is to add the cards to the room. In the bottom left, above the cards is a “Card Count” area. Click the blue “- All”. This removes the one existing card of type Blue 1. It was added when the deck was created but adding new card types does not automatically add cards. Click the blue “+ All” button to add 1 card of every type. Exit out of the editor by clicking on the “X”, the 6th icon on the top row, or press ctrl-J. Now you are in the room where your cards have been put in a holder. Congratulations!

Instead of starting from an empty deck as above, the "Add New Deck" overlay can generate a whole suit-and-rank deck for you: open the Create a custom deck section and choose Suits and ranks.

You get one row per suit, each with its own icon, name, color and ranks. The icon picker is the same one used elsewhere in the properties sidebar, so any icon can be a suit: game-icons.net, Material Symbols, emoji, VTT symbols or an image you upload — use the search, the library filters or "Browse more" for the full symbol picker. Nine common suit icons are offered as one-click chips next to "Add a suit:". Because the suits are a list, the same icon can be used more than once (red hearts and purple hearts); each suit's name is what its card types are named after, e.g. 7 of purple hearts.

Ranks are separated by commas (spaces after the commas are fine) and 2-10 is short for the whole range. Tick "Same ranks for each suit" to edit one rank list for all suits. The deck gets one card per suit and rank.

Finally, at the bottom, choose one of nine card designs — each preview tile is labelled, and selecting it shows a short description:

• Playing cards – the classic look: pips in the middle, a picture for J, Q and K
• Rainbow – card in the suit color, suit icon in a white circle, rank in two corners
• Bold color – card in the suit color with a big white rank and a faint suit icon
• Skinny – narrow 80 wide card: rank on top, suit icon below
• Icon shape – no card frame, the suit icon itself is the card, rank on top
• Minimal – plain white card with the rank on top and the suit icon below
• Corner index – rank and suit in two corners, works with any rank names
• Round token – round chip in the suit color with the rank on it, for counters
• Square tile – square tile framed in the suit color, rank top left, suit bottom right

Each design only writes the card type properties it actually uses; the pip layout and the court card pictures belong to Playing cards, every other design just gets suit, suitColor and rank.

Once you are satisfied with the options, click the green + Add to Game button. The deck and its cards are created just like any hand-built deck, so you can keep editing suits, ranks, faces and card types in the deck editor afterwards.

A print-and-play sheet that holds a whole grid of cards is turned into a deck by One picture with all the cards on it in the Create a custom deck section. (One picture per card next to it is the other case: one image file per card.)

Upload the sheet, then say how many cards it holds across (columns) and down (rows). The preview draws those cut lines onto the picture and says what will be created (20 cards of 200 × 300 pixels, 107 × 160 on the table), so a wrong grid is visible before anything is added — click the picture to see it, with the cut lines, at window size. Each cell becomes a card type named after the file and its position (fronts.png 1,1), and the card size is taken from the picture: one cell is scaled so that its longer side is 160, which is why cards cut out of a landscape sheet come out landscape instead of squeezed into the default 103 × 160.

Several sheets can go into one import, and they do not have to have the same shape — the first one sets the deck's cardDefaults and every card type cut from a differently shaped sheet carries its own width/height. Copies of every card says how often each cell is added.

Under Card backs, choose where the backs come from:

• The same back on every card – pick one from the gallery or upload it, as for one picture per card
• A second sheet with one back per card, cut with the same grid – upload a sheet of backs with Upload sheet of backs...; both sheets are read with the same offsets, so a card's back is the cell its front came from. The two sheets only have to share the grid, not the resolution. With several sheets of fronts, upload one sheet of backs per sheet of fronts; they are paired in upload order, and deleting a sheet of fronts deletes the sheet of backs paired with it.

A status line next to Add to game reports what will be created and keeps the button disabled while something is missing — a sheet still set to 1 × 1, 0 copies, or fewer sheets of backs than of fronts. A deck with paired backs has the same shape as one imported from Tabletop Simulator: each card type gets image and backImage plus the shared offsetX/offsetY/deckWidth/deckHeight that pick its cell out of the sheet.

The One picture per card and One picture with all the cards on it options give the whole deck one shared back image (the sheet mode can also pair it with a second sheet of backs). If every card has its own back and you have one image file per card, choose A front and a back image per card in the same Create a custom deck section instead.

Upload all card fronts with one button and all card backs with the other. Both lists are sorted by file name (numbers are compared numerically, so front2 comes before front10) and then matched up by position, so front1.jpg gets back1.jpg. Both lists are shown numbered in exactly that pairing order, each row with a thumbnail, the file name and a delete button, so you can check the pairing before adding anything. A status line next to the button reports what will be created and, if the two lists have different lengths, says so and keeps Add to game disabled. Uploading a single back image is allowed and uses it for every card.

You can also set how many copies of each card to create. Each card type carries its own image and backImage property, which the two faces render through dynamic properties, and the card width is taken from the aspect ratio of the first front image.

Text cards builds a deck of plain text cards, the way the Cards Against Humanity decks in the public library work. Type or paste the texts into the textarea and pick how they are cut into cards: one card per line (right for a pasted list) or a blank line between cards, which lets a single card's text span several lines.

The design options are the card color, the text color, the font size, the card width and height, the number of copies of each card and an optional deck label — a textarea, so it can be shown across several lines large on the card backs; on the fronts it is flattened into a small footer along the bottom edge. A live preview of the first card updates as you type.

Every text becomes a card type whose text property holds it, rendered on the front face through a dynamic property, so you can keep editing the wording, the layout and the faces in the deck editor afterwards. Card type names are derived from the text, with a running number for a line that has no usable characters.