Today I’m going to recap a fairly major step in the game development: I updated how the cards look. Originally, I had all the cards with their resource costs, stats and names on the top of the card like this.

I think this layout is not bad, but I felt like I made the cards look like this because that’s what every other card game has for their layouts. It also did not scale so well with cards that had more expensive costs, since the resource symbols spilled into the card image.

The other, bigger problem with this is that the resource symbols would sometimes blend into the background art. In particular with darker colors like the red colors. (The art piece below won’t end up in the game, but its a decent example of what sort of problems can arise with this design. The red resource symbols are almost the same color as the dragon, and things are a little hard to interpret).

This layout also tended to make the images feel a little crowded to me, as it would often cover up important regions of the art that I wanted to showcase in the images. Look at Sudden Bloom below, we lose a real feeling of height in the card image because right when the flower meets the sky, we have a title overtop of it.

Because our focus is drawn to the middle instead of the top of the card, the effect of the art on the card is substantially different than the effect of seeing the card art on its own. Because I want this to be an art-forward game design, this was not something I really enjoyed.

Open Top Design

As I was going through all of this and looking for a solution, Maxwell in my discord shared this image with me:

And thus the open top art layout idea was born. I really loved how you could preserve the effect that the art was trying to convey while also moving all of the card information so that it was located in one place.

The above image was my first test of this concept (I literally just went into photoshop and moved all the corresponding elements down), and I really liked the effect of the art. But clearly the layout needed some more work.

The mana cost still had the same problem as before, where it could blend in with the art, and the designs felt fairly cramped down at the bottom. So I started looking into design layouts where everything fit inside of the text box.

There were a lot of intermediate steps between the above image and this one, but this was the first major milestone in the design process.

Offset Textbox

First, I moved the bottom of the text box slightly off of the bottom of the card. This was done for two reasons.

1: When printing cards, you need a bleed region outside of the range of your design to allow for errors in the cutting process. With the textbox at the bottom, things would look strange if there were any misalignments in the cut, or the bottom of the textbox would always look like it got cut off. I could solve this problem with a black border around the bottom of the card, but then I’m having to offset the textbox anyway.

2: It opens up the card design and makes the textbox feel like it is part of the card instead of two separate ideas. This floating look also makes the art feel bigger (at least to me).

Super-Heading

I absolutely love Zelda games and during this design process I realized I had the opportunity to utilize the super-headings that are used in the bosses for these games in my cards!

I had been looking for a way to blend the two separate textboxes that I previously had on the cards, and this felt like an awesome way to do it. Not only does it provide spacing at the top for the mana cost, but it adds a unique flair to the card design that really brings the creatures to life.

Threshold vs Total Cost

Previously, my cards used the idea that the Total Cost was simply the total number of resource symbols in the cost. For example, Sudden Bloom above had a total cost of 2 because it had one colorless symbol and one plant symbol.

Since I had moved the costs inside of the card, I wanted to cut down on the total space that the costs would take up. So I implemented a “total cost symbol”. That 5 on the left side of the above image denotes the total cost of the card, while the resource icons on the right denote the threshold cost.

Basically, in order to cast a card, you need to expend resources equal to the total cost. But you can only do so if you have resources equal to the threshold cost. One is a payment and the other is a requirement.

The cool thing about this new layout is the total cost is no longer bound to the number of symbols in the threshold cost. In the above image I have a total cost of 5 but only 3 symbols. Previously I would have added 2 more colorless symbols in order to achieve this.

Cool New Possibilities

However, I now have the freedom to make the total cost LESS than the threshold cost! For example, on this card I have a threshold cost of 4 but a total cost of 3. This means you can only cast the card if you have 4 plant resources, but only need to spend 3 resources in order to cast it.

This decoupling of total cost and threshold cost opens up some really interesting possibilities, like a 5 color card that costs 0, or a two colored card that costs 1. I’m really excited to see where this goes!

Stat Box Change

The shield icon worked for the stats when they were floating by themselves, but it looked a little off to me when on cards when it was somewhat linked to the textbox. So for now I am just going with a simple rectangle that drops down from the textbox.

Previews

With these changes, I wanted to see how the cards looked in various layouts. So I have these previews to share 🙂 Sorry about the poor quality of my printer/images.

What’s Next

Anyway, that’s all I have for today! There are still quite a few things I need to improve about the card designs. Notably I want a slightly different border design than the harsh neon outline, as well as some professionally made icons. I also think I need to do a bit more re-alignment and sizing of items to make sure everything fits. (For example, there is a bit of overlap between the leaf icons and the title in “All-Consuming Blight” above).

Follow Algomancy’s development

If you’re interested in following the development of Algomancy, I’ll be posting more blog updates here as well as sending out email notifications for playtesting, polls and release dates on the email list, which you can sign up for here: