This one’s a note-to-self post and a note to fellow game designers.
One way to increase resolution of TCG card art images:
First, assemble a big pile of [placeholder AI-generated] artwork for your game. TCGs and CCGs need hundreds to thousands of images and AI ‘art’ is… passable as a placeholder until real human artists can get lined up, art-directed, and paid properly.
I’m using a combination of https://diffusionbee.com (Stable Diffusion XL front end) + https://civitai.com/ (diffusion models) versus OpenAI’s ChatGPT4 + Dall-E 3 to generate concept arts by the thousands, hoping to find a passable 10% of them to use as placeholder art.
Typically Stable Diffusion generates image variations at 512×512-pixels. At 300 ppi print resolution, those are tiny or blurry/pixelated if you try to scale them up.
Sort and keep passable images
It’s a lot of decision fatigue to sort through thousands of images looking for distorted faces and hands to signal trashing an image. For example, this is a pretty common problematic output at the standard 512×512 pixels resolution:
So,
Run a face/hands AI-fixer
I use https://github.com/TencentARC/GFPGAN (human rights concerns of CCP-controlled companies like Tencent aside…….!) to scan for and fix common AI distortions to faces. You’ll need to hammer out a bit of a userscript in Python, similar to the bundled example to munch through however many hundreds of images you want fixed. The script will look something akin to:
Run an AI image upscaler
I use RealEsrgan x4: https://github.com/xinntao/Real-ESRGAN
Here’s a MacOS zsh (z-shell: text terminal interface/commandline interface “CLI”) script I use to do that:
To be clear, this takes 512×512 images and scales them up to 4096×4096, while correcting for upscaling distortions pretty well! Just collect the images into sorted folders, then run this on the parent directory (~/RealEsrgan_upscaler/inputs/ in my example script above).
Automate downsampling to print resolution and masking images for pretty rounded corners
4096×4096 px images, at 300 pixels per inch (ppi) makes for 13.6-inch printed images. That’s overkill for printed card artwork but useful for bigger playmats, marketing banners and standees, etc. So, save a copy of all the 4096 stuff for marketing– it’ll occupy gigabytes!
Next, I use ImageMagick (https://imagemagick.org/), another commandline image processing tool for any operating system, to automate downsampling to 300 ppi resolutions and also apply alpha (transparency masks) to make image corners look rounded and beautiful against background images or colors, or for die cutting (remember to account for bleed!):
To make that, I use GIMP (https://www.gimp.org) to make a free, nice-looking, infinitely reusable alpha mask image:
Get ImageMagick free by installing Homebrew, then typing brew update && brew upgrade && brew install imagemagick into a fresh terminal window.
I use a zsh shell script similar to this for Imagemagick to automate the downsizing and masking in a couple ‘simple’ commands.
Explanations of how to use ImageMagick for masking are on their excellent site: https://www.imagemagick.org/Usage/masking/#masked_compose
Automating this is key. It frees me up to focus on design and playtesting by fully processing these two steps in less than one second per image, in the background of my computer. A real game company has staff or contractors and a real budget to do this, so I must work smart instead of getting buried under working hard.
Automate generating printsheets
The last step in my process to get big sets of cards into playable cardstock paper prototypes is generating on-the-fly PDFs that collate the database of card texts, values, and art URLs into a basic (ugly but functional) minimum viable product (MVP) format that I can print off, cut or Cricut, and playtest.
This is probably worthy of its own post, but I’m using PDF-lib.js (https://pdf-lib.js.org) to automate around a thousand cards into big PDFs by card type. Here’s an example PDF:
lexid_card_printsheet-39 (PDF example download)
It’s 44MB and is not optimized for efficiently using all the space available, but this is just for rapid prototyping. Time enough later for optimization.
The code to layout all these cards into their various formats is super janky but it runs “good enough” for prototyping. I’m doing it client side, so it’s not secure and I’ll hit memory limits early if I use proper print-resolution card art images. No worries, we’re just prototyping here.
Here’s an example HTML/JavaScript code block that depends on PDF-lib.js:
What have we accomplished today?
- Automated art generation
- Automated art AI artifact fixing
- Automated art upscaling at quality
- Automated art downscaling
- Automated art masking
- Automated live formatting into hundreds of prototyping and playtesting cards for printing at home
What have we not accomplished today?
Everything that still needs the human touch:
- Spark of inspiration
- Concept
- Game design
- Deeper meaning
- Wisdom
- Protecting human artists’ livelihoods
- The actual playtesting and insight discovery