After playing games such a MTG, Hearthstone and Slay the Spire for quite some time, I wanted to create a board game taking some of the ideas behind those games. Deck building, in particular, has been an enjoyable aspect for me.
I initially crafted a prototype featuring a crew of pirates (players) engaging in battles against monsters, inspired from Slay the Spire. However, the gameplay turned out to be sluggish and devoid of enjoyment.
I decided to start from scratch, placing my focus on a streamlined deck builder. I salvaged some artwork and the small engine used to create the cards themselves, which I will explain further in this post.
Tooling
Initially, I began designing the cards using the free tool Vectr, believing that vector editing was the optimal approach. However, I soon realised that manually altering the colour and position of numerous icons across 30 distinct card designs is the shortest way to the loony bin. It became clear that I required a scriptable system to streamline the process.
HTML & JavaScript to the rescue
I started to devise a solution based on web technologies. The browser after all is a perfectly capable rendering engine. Here if what I got from a JSON definition:
The description for each card looks something like this:
const cards = [{
'title': 'Useless Totem',
'text': 'Reveal this card: Change its ... per turn.',
'img': 'structures/totem.png',
'type': 'structure',
'victory_points': '2',
'cost': '1',
},
]Then the JavaScript code used to generate the HTML looks like so:
cards.forEach((c) => {
let icons = ""
if(c['type'] == "structure") {
icons += `<img class="structure-icon-1" src="icons/structure.svg" />
<img class="structure-icon-2" src="icons/structure.svg" />`
}
if(c['victory_points'] != undefined) {
icons += `<span class="hook">${c['victory']}</span>
<img class="hook-icon" src="icons/hook.svg" />`
}
if(c['cost'] != undefined) {
icons += `<span class="cost">${c['cost']}</span>
<img class="cost-icon" src="icons/chest.svg" />`
}
// some more conditionals
var template = `<div class="card" id="card-${j}" title="${c['title']}">
<div class="inner">
<div class="front type-${c['type']}">
<div class="frame"><div></div></div>
<img src="${c['img']}" class="bg" />
<span class="title">${c['title']}</span>
<span class="text">${c['text']}</span>
${icons}
</div>
</div>
</div>`
// add card to the page
}You’ve grasped the concept, so I’ll spare you the remaining details. However, for those interested in utilising the source code for their own projects, I’ll provide a link to access it.
Rendering the HTML to images
In order to print the cards, high-quality, high DPI images are required. But how can one achieve this using web technologies? While one option is to zoom the design to desired pixel size and take screenshots, this approach is laborious and yield imprecise results. To tackle this challenge, I used rasterizeHTML, a tool that enables the transformation of a webpage element into an image.
Play testing
The quality of a game is primarily determined by the fun it offers rather than its appearance. Therefor, extensive play testing is crucial to ensure enjoyable and balanced cards, as well as coherent interactions. Adopting an iterative approach, I initially introduced simple cards to the deck, stabilising and refining them before gradually incorporating new, more complex cards.
The first version was designed be play tested using a standard 52-card deck. Each card number was associated with a specific design, and players would refer to a computer screen for gameplay guidance. While this approach initially facilitated quick iteration and immediate design adjustments between games, it eventually proved to be overly confusing and lacking the necessary flexibility.
Printing the first prototype
MakePlayingCards is an good choice for printing prototypes, offering a range of options. However, I also wanted to explore European printers and decided to give MB Print a try. Both providers delivered high-quality prints, but MPC stands out due to its extensive range of offerings. For instance, MPC can print custom tuck boxes and booklets, providing a neat packaged solution when shipping the game.
Getting the rules down
After conducting additional play testing, the rules for DeckHand were largely finalized. However, upon sharing the rule book with the Reddit community /r/tabletopgamedesign I received valuable suggestions that I incorporated to clarify the end-game conditions.
The rules for the game are managed within the HTML page, similar to the rest of the cards.
Some more play testing
Moving forward with players, we found that printing updated designs and inserting them into plastic sleeves in front of the original cards was the most effective and economical way to modify the game.
While this method allowed us to seamlessly introduce minor adjustments by using pieces of paper or crossing out words as needed, the design choice of white text on a dark background posed challenges when attempting to make additions with a pen.
Packaging: Tuck Box
I also required a design for the box housing the cards and rule booklet. For this task, I used Photopea, an impressive and free online photo editor developed by by Ivan Kutskir. I can’t recommend it enough.
This package includes a set of cards, a booklet, and a visually appealing box with a pirate theme. Everything is neatly wrapped and ready to be enjoyed for gameplay.
Card Illustrations
Once again, Photopea played a significant role in the process. While I contributed quite a bit of illustration work, the majority of the heavy lifting was accomplished by Midjourney, and the dark art of prompt crafting which I learned through trials and errors. Midjourney has undergone remarkable evolution in the last year, yielding high-quality images that often necessitate minimal post-processing. However, when faced with intricate compositions, such as scenes featuring two individuals engaged in interaction, the tool proves to be largely incapable.
One of the challenges faced with the full art design is that the bottom part of the image is partially obscured, necessitating a composition that prioritises the top portion of the artwork. If you’re interested in seeing more, I have shared some illustrations here.
The Game itself
With just a few minor adjustments and some final play testing, DeckHand is nearing completion. It provides engaging sessions that typically span 25 to 30 minutes for two players. Prepare to construct an exciting deck, but beware of the possibility that your opponent may outpace you by a significant margin, or luck may simply not be in your favour today.
Its compact size and straightforward rules is perfect for casual gaming occasions. If you you wish to express your interest in obtaining a print sheet or purchasing a copy, simply fill out the the single field form. This commitment-free action will assist me in determining the print run size.
>>> Visit the website to manifest your interest. Thanks in advance! <<<
In any case, I had an absolute blast creating this game, and it has the potential to become my new favorite hobby.
Design reflexions and discoveries
Allow me to delve into some design peculiarities that make DeckHand a unique experience:
- While players can attempt to keep tabs on victory points, the true winner often emerges unexpectedly, adding an element of intrigue to each game.
- With diversity in card selection and light player interactions, DeckHand offers a dynamic environment, enticing players to come back for more.
- DeckHand embraces luck, making it a casual and enjoyable experience for all.
- DeckHand is in spirit a bit of a Cube Draft experience. However, its compact size, approachability, and simpler mechanics make it manageable for those new to the genre.
- The end game might lack some variety as the main focus revolves around acquiring cards for victory points, even though they might not see play — an issue common in many deck builder formats.
The Card Game Creator
As promised, here is the code that I believe you will find valuable. Let it be your next card game skeleton:
If you want to see a running version first: Card Game Creation Template
If you are interested and wish to know more:
DeckHand — A Pirate Deck Builder Game
