My workflow for creating custom decks for playing cards online
I’ve been creating tabletop games for a good long time, and recently I’ve been using playingcards.io to prototype and playtest some new decks for various projects. If you’re not familiar, playingcards.io is a free site that lets you play real-time multiplayer games with other people on the internet. It’s been a go-to of mine for things that use regular 52-card decks (and tokens, and dice, etc) for a while—it does a lot of things really well out of the box, but my designs don’t always rely on a regular deck of cards (although they often do!). Fortunately, playingcards.io is really flexible, and lets you upload and manage decks with custom text and images on them! It can be a tedious process to do by hand if you’ve got a lot of cards, though, so I’m going to walk through the process I’ve been using to make it all a bit easier.
Playingcards.io Setup
To set up a card room, go to playingcards.io, scroll down and hit the Custom Room button then hit Start Blank Room. (You can try a sample room if you like to see everything that’s on offer, but we want to start from scratch, here.) It’ll generate a room with a code that you can use to share it, and you can just Enter that. Now you’ve got a nice blank canvas—in the upper left, hit the second icon down labeled Edit Table. Now on the right you should see all the widgets—again, feel free to play around, but we’re looking for the Custom Card Deck one. Click that, and you’ll see the deck on the table.
Let’s set up a few things first—bump up the size to 200 by 280 pixels so the cards are easier to see. I like to switch the Enlarge Objects setting to Enlarge (on mouseover), and for now, at the bottom, set it to Do Nothing instead of Shuffle.
With that out of the way, let’s take a look at our actual cards! Back up top, click on the Template for your new Cards Collection. That’ll bring up one of the cards (a Joker, in this case) that you can edit to set the layout for all the cards in your custom deck. Underneath, you see where the dropdown says “DIFFERENT P…” That’s Different Per Card, which is what we want. To make it easier to understand later, change the ‘Card Data’ Field where it says “image” to “face”—you’ll see why in a minute. Back up top, click on the View dropdown to see the card Back. It’s got a red image, and you can see at the bottom that the backs are ALL THE SAME—we don’t want that for this project. Go ahead and set that to Different Per Card, and set the card data field to “back”. I’m also going to set the background color chip to white instead of maroon, but that’s just me being picky.
Hit “DONE” there at the bottom, and take a look at the list of Cards, right next to the Template button. This should be a list of standard playing card faces—we’re going to replace all those, so scroll all the way down to the bottom and Remove Everything. We’re going to import a CSV (Comma Separated Values) file for our cards in a minute, but we’re all set here for now.
Custom Deck Images
Okay, now we’re going to need a deck that we want to get up there. I’ve recently been working on a scenario about a doomed solar research project called Toffet Station for Bully Pulpit’s game Desperation, which uses a 65-card deck with a bunch of different backs. Perfect! I use the Affinity suite for most of my creative projects, so I’ve made a deck of cards in Publisher—a hundred and thirty “pages” representing individual card backs and fronts. (This is the format that the card printers that I generally use require, so that’s what we’re going with for now.)
Normally I would print the deck file to a PDF to send to the printers, but we want each card back and face in a separate image file. Fortunately, Affinity Publisher lets you do that pretty easily. Go to File->Export and at the top select PNG. Default settings are probably fine, so you can hit the Export button and then create a new folder somewhere to drop all of your images—I just called it “Toffet Station Cards”. Give it a minute to churn, and you’ll have a bunch of image files named “Toffet Station Cards_1.png”, “Toffet Station Cards_2.png”, and so on, all the way up to 130.
So now that we have our images, we need to do a couple of other things—we need to put them somewhere playingcards.io can access them, and we need to create our CSV file to tell it where everything is. For the first step, I like to use GitHub. I’ll create a new public repo for the project, drop all the images in there, do the add-commit-push dance, and there they are! Now I know that each image has a URL for the raw image that looks like this:
https://raw.githubusercontent.com/marcmajcher/Toffet-Station-Cards/refs/heads/main/Toffet%20Station%20Cards_1.pngGross, right? But we don’t care how pretty it is for delicate human eyes, because we’re going to dump it into a spreadsheet and never look at it again after it’s all set up.
(If you’re not familiar with GitHub, first off, I envy you. You can use any image upload site that you like, and grab the URLs from there. I like GitHub because I’m a computer nerd, and it lets me easily update and keep different versions of the images, but if that’s not you, do whatever works!)
Setting Up Card Data
All right, one more bit and we’ll be good to go. Let’s open up a new Google Sheet and make two columns: “back” and “face”. If you remember, that’s what we gave the custom deck template for the front and back Card Data Field on playingcards.io. We’re not going to type all those in by hand, though! Looking at our image files, we see that all the backs are odd numbered, and all the faces are even numbered, so we can use this to our advantage.
In a new column, make a list of odd numbers by putting 1 and 3 in the first two cells. Selecting them both then grab the bottom right corner (it should look like a little + when you do) and drag down—it should fill in all the odd values, down to 129. Now do the same thing in the next column, starting with 2 and 4, dragging all the way down to 130. Got it?
Okay, remember that gross long URL up there? We’re going to use that and those two columns to build our data for the fronts and backs. There are a few ways to do this, but I’m going to do it this way: paste that URL into a new cell somewhere and remove the “1.png” at the end. (For reference, my “back” and “face” columns are A and B, my odd and even numbers are in C and D starting in the second row, and I’m pasting the URL stub into cell C1.)
Now we’re going to use the Google Sheets CONCATENATE function to build out a new URL. In the first empty cell under “back”, you can enter something like this:
==CONCATENATE($C$1, C2, “.png”)What this is doing is taking the value of the cell C1 where we put the beginning of the URL (the $ before the letter and number lock it into that cell for later), the first odd number (1) and adding “.png” on the end. You should see in that cell the full URL for the image, and you can go ahead and click on it to make sure that it shows your image correctly. (If it doesn’t work the first time, don’t worry—It’ll often take me a few times to shake the bugs out before I get it right.) You can do the same thing for the cell under “face”, like this:
=CONCATENATE($C$1, D2, “.png”)Where D2 is the first even number that we’re sticking in between the URL and “.png”. Go ahead and check it again to make sure it’s working by clicking on the generated URL before moving on.
Now here’s where the magic happens. Select both of those generated URL cells (for me it’s A2 and B2) and drag down on the right corner again—if everything’s set up correctly, it will fill in all the URLs for you with the correct numbers!
The last thing we need to do before we export is to clean up the sheet—if we do it as is, we’ll get the number data that we used to build everything in there. It’s not a disaster, but it’s better to err on the side of neatness here. Before you delete those numbers, select the first two columns, hit copy, then under the edit menu do Paste Special->Values Only (or hit ⌘-⇧-V). Since we’re building those URLs with a formula, if we delete the stuff we’re building them with, they’ll all break, and we don’t want that. When that’s done, go ahead and delete columns C and D, then go to File->Download and save the sheet as Comma Separated Values (.csv).
Uploading Our Deck
Last step, for real! Go back to playingcards.io and in the Cards window of our custom deck hit the “IMPORT CSV FILE” button. Select the file we just created, and the page should update with a list of all of our new cards with our uploaded images!
Hit the Done button and we’re done! If you’d like to free up some table space, you can delete the Hand window at the bottom of the table. Otherwise, exit the Edit Mode by clicking that toolbox icon on the left side, and you should see your deck on the table.
If you’d like to share your new table with your custom cards, set everything up the way you’d like it to be set up when someone opens it, and go back to the Edit Mode by clicking the toolbox on the left side. From there you can select Room Options at the bottom and hit the Export to File button to get a .pcio file that has the whole configuration. If you like, you can test it out by setting up a new room then bringing it in with the Import from File button in the same section.
You did it!
I hope this was useful—it took me a while to get the whole process down and work out all the kinks, so if I save you some time with this writeup, let me know! I’ll be posting a video walkthrough on my youtube channel soon, so keep an eye out for that. (EDIT: here you go!) I also recently learned that you can add custom backgrounds to your playingcards.io room, so that’s going to be extra fun in the near future…
If you don’t have a project of your own to play around with, or you just want to see another example, I’ve uploaded a low-res version of my game La Brea to GitHub—grab these files and see how it goes! There are only eight cards, so it’s a nice size to mess around with.
Okay, that’s it—get out there and make some games!
