Creating Assets with nanDECK

It has been a while since I wrote a blog post. I’m on sabbatical this academic year and I am working on a game for my sabbatical project. I’ve been posting some updates about my progress to my social media accounts but this is the first post that I have felt compelled to write documenting my learning and my progress.

I’m creating a deck-building, astrophotography-themed game for my sabbatical project. Although I have created many video games in the past, I have never published one on Steam and I have never created all of the components (called assets) myself. So I’ve been learning to use a bunch of new tools for asset creation as I’ve been developing the game’s main mechanic. Today, I spent some time learning to use nanDECK, which is a tool for building custom decks of cards.

Before I explain why I am using nanDECK and how it works, it might be useful to explain what a deck-building game is. In a typical deck-building game, players are given an initial set of low value cards. As the game progresses, players play the cards from their deck to achieve various results. Players are also given opportunities to add cards, usually of higher value, to their decks. Each player’s deck typically becomes more valuable in unique ways. Often, when I describe deck-building to someone, they will ask me if Magic: the Gathering or Pokemon is a deck-building game. These are collectible card games (CCGs), a genre that differs from deck-building games. CCGs require players to purchase their decks outside of the game itself and each player comes into any given instance of the game with a deck that is already different from those of the other players. In a deck-building game, the cards are part of the game and, typically, everyone starts with the same set of initial cards, building their deck through the gameplay of this particular instance of the game. My favorite physical deck-building game is currently Clank!: Catacombs with the original Clank! close behind. But the game that got me thinking about a deck-building video game is Slay the Spire, which was released as an early access game in 2017 with regular updates until its official release in 2019. By March 2020, it had sold 1.5 million copies. As of May of this year, the game has sold 3 million copies just on Steam but it’s available on most platforms, including mobile, so its sales are much, much higher than that. I play on the Nintendo Switch. I have played other deck-building video games and none has captured my attention like Slay the Spire. So it inspired me to try to create my own deck-building game.

One of the major challenges of creating a deck-building game is to create an interesting set of cards that allow a player to build decks focused on a variety of gameplay strategies. Creating a consistent look and feel for the cards is essential so that all of these pieces feel like a coherent set of components for the game. Let’s look at some of the cards in Clank! as examples.

Here is a single card that a player might be able to add to their deck during the game:

Each of the cards has the same set of areas with only the values in those areas being different. The lower right corner (labeled A) has a number indicating the number of blue points required to purchase the card. This card will cost the player 4 blue points. The upper left corner (labeled B) contains information about the benefits the card gives the player when they play it. This card gives the player 1 blue point and 1 sword. The upper right corner (labeled C) is either blank or has a number in green indicating the number of points the player will receive at the end of the game if they own this card. This card will give the player 2 points at the end of the game. At the top of the card in the area labeled D is the name of the card. This card is called Elven Dagger. The area labeled E contains an image representing the card. This card is represented by an image of a dagger. And the area labeled F contains some sort of instructions or descriptions that come into play at various times. When a player plays this card, they are allowed to draw an additional card from their deck.

Clank! has many, many cards. Here are some additional examples.

As the designers of Clank! were working on the game, they probably hadn’t decided exactly where each piece of information was going to be displayed on the card. They might not have even decided exactly what information was going to go on each card. And when they created their first draft of these cards, I can guarantee they hadn’t decided the exact values that were going to go into each area of each card. For example, they might originally have given the Elven Dagger a cost of 6 blue points and maybe the original number of green points at the end of the game was 5. Through play-testing, they would tweak these values to see how gameplay was affected, trying to balance the game through each successive iteration. Having to recreate the entire card by hand each time a change was made would be extremely time-consuming. There must be a better way!

That’s where a tool like nanDECK comes in. With nanDECK, the designer can create a template for the physical layout of the cards, specifying where each value should appear. They then can create a spreadsheet of the various values and merge that spreadsheet with the layout template that they had created. I started this process today. My cards are still quite ugly but I was focused on functionality rather than prettiness as I learned to use the tool.

First, I created a spreadsheet with the values of the cards I wanted to create:

The top row of the spreadsheet is the name of each value I want to use in my cards. Each card will have a Name, a Type, a Cost, a Time to Capture, and an image. Each additional row is a separate card. So using this spreadsheet I could create 15 different cards. The first card will be a Phone Camera card that costs 100, has a Time to Capture value of 100, and whose image is stored in a file called smartphone.png. I really like that it will be easy to modify the various values, including the images (by just changing the image file) as I work on balancing the game. I can also easily add more columns to the spreadsheet if I need additional values.

Here’s the nanDECK interface (which looks more complicated than it actually is):

The right side of the interface is a visual preview of the 4th card in my list. The left side contains a set of actions to do things like Build the cards and Print the cards. The middle window is the actual code that specifies the layout template and merges it with the spreadsheet I created. Luckily, I didn’t need to write all of this code by hand. There is a visual editor that allows you to easily create the card layout. It looks like this:

The left side is a set of objects that you can add to the layout. The middle is a preview layout of one of the cards that you’re building. The right side is the set of commands that build the actual cards in a particular order.

Finally, you can save individual image files for each card you have created or you can put them all together into a single document that you can print and cut out (if you were making a board game or need strips of images in your game development software). That looks like this:

I was learning to use nanDECK today so creating the draft set of cards that I have so far took about an hour as I navigated the various commands and objects I could use. Now that I know how to use the, creating this set of cards would probably take me about 5 minutes. Once the real cards are created, I will import them as a sprites into GameMaker, the game development software that I am using.

There is a ton more work to do since today I only worked on the equipment cards for my astrophotography game. None of the clip-art images that I used today will end up on the final cards that I create. Instead, I will use my own drawings and/or photos for all images. I also will create a set of enemy cards (Dr. Cloud, for example) and a set of target cards. Creating these assets will be time-consuming but less time-consuming now that I’m using nanDECK.