After the last gameplay prototype of my high-fantasy dating game, it was time to start bashing out some graphics I could use to represent traits on the game’s Hero Cards. Having represented traits through coloured sticky circles on the last test, I started making 10 coloured gems to represent the traits in a more appealing way.

I wanted them to be bright enough to see easily from the other side of the table, maybe a little bit kitsch/tacky looking, and to look somewhat 3-dimensional. Think of the blue mana gems on Hearthstone cards in 10 different colors. The first pass was just done using 3D/bevelled shapes in PowerPoint. Then I ran them through the really helpful color-blindness checker in Coblis and got the following readout;

I knew from the get-go that there might be some trouble differentiating red and green, but until you’ve loaded your graphics into something like Coblis, it’s easy to underestimate how hard it might be for a colour-blind person to engage with something that uses colour-coding so heavily.

So I returned to an older plan of using icons as well as colours. To be honest, I had been avoiding this mainly because of my own lack of drawing skills. There are some great packs out there like this collection of 700+ vector icons for RPGs but I wanted something that reminded me of classic late 90s cRPGs, to go with the eventual direction of the character portraits. I didn’t wanna use jRPG style pixel-art objects either, because that would be a mix-up with the portraits.

So I trudged back to Inkscape (the poor dev’s Illustrator) bashed together some new hexagons and started sketching out my own vector images, ending up with the three samples below. Just to reiterate, the items were chosen to represent the following traits;

red / shield = mighty
green / leaf = outdoorsy
brown / tankard = drunkard
purple / skull = brooding
grey / tool = technical
yellow / pouch = wealthy
blue / tome = studious
white / crown = influential
orange / lute = artistic
pink / mask = refined

Still not happy. I preferred the sense of 3D-ness in the second two (I manually added the light/dark trapezoids to the gems to give them a 3D relief effect) and I’d also added a subtle texture to each gem by the third image, but the icons weren’t doing what I wanted.

What I really wanted was something like the icons in Baldur’s Gate or Icewind Dale (see left of following pic). These are bit more ‘painterly’ and required jumping back into GIMP where I could draw pixel-by-pixel.

It also occurred to me that I’d made this style of icon before, with moderate success, by tracing over photographs and other drawings in gimp in 3 stages (base, shading and highlight) to give the sort of “made of bronze” effect of the UI in those Infinity Engine games.

Above are 7 never-used icons from my 2014 #PROCJAM entry about running a potion shop. They are meant to represent; gut, ‘hairiness’, mind, cheerfulness, skin, awareness and chest – all things that might be modified by a potion at a dodgy 1800s apothecary shop.(I include these mainly as a reflection on how important it is to go back to previous work you’d thrown away and dismissed as evidence that; yes, I can do this thing, at least sort of, I’ve done it before).

So I ferried the vector gems across from Inkscape into GIMP and began importing images from photographs etc. which I could scale down and turn into icons.

Each image was shrunk down, high-contrasted, oversharpened, colorised and given a shadow. I decided to make each one a sort of bronze colour (bottom right) as this fitted with the jewellry theme of having gems, provided better readability and also looked a bit more like the Baldurs Gate UI style that I was going for.

Finally I bumped up the icon:gem size ratio a little and here they are in action;

Heroes with 5 gems will probably have to have one row of 3 and a row of 2 below. Luckily heroes like Drexxel (below) who have an additional rule to fit on the card, never have more than 4 trait gems.

It occurred to me that these still weren’t massively ‘readable’ especially taking into account colour-blindness. So I looked at the way gemstone items were modelled in late 90s cRPGs and had a go at drawing some differently shaped gemstone objects, using these trait icons as a sort of base, to continue the theme of jewellery.

I’m happy with how these turned out; they’re pretty! But they also take up a lot of space on the cards and trying to have 10 different distinct gemstone shapes ended up with some odd-looking ones like the orange triangle and the brown gem.

In the end I went back to what I always kinda had in my head anyway – the elemental icons from Pokemon and Magic: The Gathering. Because my previous attempts at doing vector art had been so shoddy, I just made sillhouttes from photographic images and then transposed these onto a textured/colored background with a black border.

First I tried cascading them down the right-hand side of the card (see Drexxel, below) but it made more sense to keep them on the light-colored text-box so that they would stand out more (as in the Amariel picture below).

Now the cards have space to include a little bit of flavour text; maybe a quote from the character – the sort of greeting they might give if you clicked on them in a videogame. Maybe something flirtatious.

This is great, because the fiction layer is really important for a subset of players like myself who tend toward the “what if I made my MtG deck entirely out of fungus?” type questions rather than solely trying to win. It also adds a little sparkle in terms of the “imagine this couple actually together” element which should be key to the experience of the game to some players.