Arimaa Icon Set

Last updated at June 11th, 2011

In a departure from my usual code n’ chips, I have indeed created something creative (for some value of the word creative). An icon set. Well, “icon set” may be a bit misleading: it’s more of a set of pieces for a game. The motivation for this is somewhat convoluted, so if you’re not interested in why I decided to make the pieces, you should skip down to the Pieces section, or you can just skip directly to the Downloads.

There’s also a discussion of the set over at the Arimaa forums: if you have comments on the set, you should probably raise them over there.

A guy handled as rabbits integrated my pieces into their Arimaa interface. Sweet.

Arimaa

In A.D. 2011, Watson was beginning.

If you were around February 2011, and self-identified as a geek, then Watson was kind of a big deal, unless you knew some NLP or the difference between strong and weak AI or just how much firepower was connected to that podium, but I digress. Watson was cast as this generation’s Deep Blue, the new conquering robotic overlord that now had reverse questions down pat in a display of wizardly NLP. And with this casting, I of course had to refresh my memory on our last conquering robotic overlord Deep Blue, as any self-respecting geek could not be asked arcane questions about Deep Blue and not have ready answers at hand.

While reading, I found that Deep Blue was somewhat of an anomaly: most chess machines ran on generic hardware, but still competed fairly well. Now a days, chess champions can be matched by laptop computers. Of course, some of this is due to things like Moore’s law, but it also has to do with the fact that chess is pretty straightforward, and amendable to search techniques that you learn in an undergraduate AI course. This means that if the point of Deep Blue and related machines was to push forwards AI research, then it is an abysmal failure: outside of chess playing, Deep Blue has not helped us closer to strong AI (Watson somewhat rectifies this, as it is useful outside of its original game-playing domain. However, it’s still not progress towards strong AI).

Someone else agreed that this was pretty silly, and decided that to motivate true AI would require a harder game. Surely, if we made a harder problem to solve with standard AI techniques, we would have to develop new techniques that hopefully have use outside the realm of game-playing. Hence, Arimaa was born: a game that posed difficulty to standard AI techniques, but could be groked by your random layperson.

Well, I think the folks over at the Singularity Institute have a better shot at getting progress in AI, but Arimaa is, if nothing else, an interesting game. However, with Go masters still unbested by computers, the position of Arimaa might not be strictly necessary. Nevermind…

Then I sat down and played some games, where I found there were more hurdles to playing than strictly necessary. Is that piece a horse or a dog? Can I push this rabbit here? Am I stuck, and who’s keeping this piece stuck? While there are other interface issues that should be worked out, I decided that the fact I couldn’t easily tell pieces apart without studying the board for a few moments was the most bothersome of all, and that it presented a very big hurdle for people that Arimaa are looking to just get in the door and check out the game.

Hence, I designed some new pieces.

Motivation

First, let’s take a look at the original Arimaa pieces in use at the time, as used in the online interface (source-ish):

If you haven’t played Arimaa before, you might want to read a quick introduction. Don’t have time? The pieces go Elephant, Camel, Horse, Dog, Cat, Rabbit from left to right, in both gold and silver. The funky background color is the average color of the standard Arimaa game board used in the online interface.

You’ll notice that the camel, horse, dog and cat all look very similar to each other: the cat is essentially the dog with a blunter nose, the camel is essentially a horse with a knobbier nose and thinner neck. Hence, these four pieces are distinguishable in the details, but not in the underlying structure. Even the details do not stand out terribly well, as the details should serve to enhance differentiation, not drive it. When you scale these pieces down, distinguishing between the pieces becomes much harder.

Contrast this with a couple of studies of character design in TF2. Now, TF2 is a fast-paced 3D shoot-em up, not at all like the contemplative board game Arimaa. However, some design considerations apply across the board (ha), especially the principle that each of the characters (pieces) should be easy to recognize and differentiate.

Now let’s apply that thought to something familiar: chess pieces. Chess icons have been around for a very long time, and seem to have been optimized to be easily distinguishable and recognizable. I reproduce them here for reference (pieces from Wikimedia, Wikimedia user Colin M.L. Burnett):

The first thing to note is that all the pieces are obviously recognizable, and furthermore easily distinguishable from one another. Each piece has a unique general shape that is far from the others in shape-space, and each has unique set of embellishments that serve to further set it apart from the other pieces. Another important hallmark of the pieces is the fact that there is some sort of visual hierarchy: the king has plenty of curvy lines flying every as visual ornamentation with a little cross plopped on top, while the pawn lacks any special marks, just serving as a squat shape.

An important thing to note is that complete beginners can pick out which piece is which. Kings, queens, castles, and horses all map extremely well into the mind of your average person immersed in anglo-saxon culture, and by making it obvious which piece maps to which concept with cartoon-ish simplicity exploits that familiarity successfully.

Pieces

First, I’ll just hit you with the 2 piece sets I created in the standard row configuration, first in black and white:

And now gold and silver:

Now presented and contrasted in a real world situation, the 2011 World Championships Round 11, Adanac vs. chessandgo, Turn 14 (right before any of the pieces get taken). We’ll do it with original pieces:

then the new gold-silver pieces:

and then black-white:

Hopefully, it’s obvious that the pieces in my piece set are obviously different from one another, and hence obviously better. And that’s the first principle I’ll be talking about.

Generally, I followed the WAYK principle of Obviously! (for some reason, a grown man imitating a 12-year old valley girl (2 minutes in) has stuck with me and informed everything from making these pieces to leading workshops): I tried to make it as obvious as possible which piece is which.

Another principle I tried to follow is a notion of hierarchy: in Arimaa, there is a strict hierarchy of pieces, in which higher-up pieces can push around the lower pieces. Hence, showing that hierarchy graphically ought to speed comprehension and aid noobs in their quest for mastery.

To depict hierarchy, I used the obvious metric of size, as well as the less-obvious metrics of detail and brightness. Here, have some zoomed-in pieces:

With respect to size, note that the Elephant and Camel nearly fill their tiles, while the rabbit sits inside and has a pretty large buffer around it, with intermediate pieces scaling up along with their importance. With respect to detail, the Elephant piece is very detailed (added some battle scars), while the rabbit is a couple of curves and not much else. With respect to brightness, well… that’s pretty self-explanatory. I will note that for the portion of the population that isn’t color-blind, making the Elephant the brightest piece tends to pop it out of the board from among the rest of the pieces, and makes it easy to see where the action is happening.

Some other notes: I also tried to distinguish between similar shapes, such as the horse and the dog, by using different styles. The horse is very angular and made up almost solely of straight lines, while the dog is almost solely made of curves. This is in addition to other distinguishing features, such as the mane.

Now, going back to our earlier thoughts on the original piece set, you should recall that one of my gripes was that the silhouettes of several pieces were too similar. If we apply a similar test, we see that the silhouettes for these new pieces are very unique. Observe, the original pieces flattened to a silhouette:

As you can see, again the general shapes in the middle 4 pieces are indeed similar. This means it’s difficult to figure out exactly which piece you are looking at, and anything that takes you out of the game for even split seconds is an impediment to game play.

And now the new pieces, also flattened:

(Sometimes the border extends beyond what was originally intended, like with the while piece: we show those extended outlines here:)

Every outline is unique, and moreover, obviously the animal that it is supposed to represent, which is exactly what we want.

Making Of

Several of you may be interested in my processes. Those that aren’t can skip down to the downloads.

Soon after I worked up the motivation to actually start working on this project, I sketched out a concept drawing:

Yes, hideous. And there is solid proof that I cannot draw camels nor cats, and my cartoon rendition of a rabbit is almost unrecognizable. However, you can see the concepts used in the final piece set, and most of the pieces retained their general outline.

After doing a couple more drawings of the cat piece, I went to Inkscape and started to lay out the pieces using curves. I didn’t scan in my drawings and template my vector efforts after them, but I did start to pull images off the internet to get an idea of how animals in real life looked. And then I threw those efforts out the window, and decided cartoonish recognition was better than realism (I should say the Elephant did retain several improvements).

At first, I designed the pieces to default to a 100x100px size, but then I realized that most games would be played on much smaller boards, with the Yahoo games interface using something like 40x40px pieces. Hence, I had to monkey around a lot more with the outlines and exaggerating features, because details that stood out fine at 100×100 became inconsequential at 40×40.

One of the things I did that wasn’t so great was the fact I created the black pieces first: in this case, I was staring at only one of the four possible piece sets, designing the pieces to suit that particular color scheme, and only afterwards converting the pieces to the other colors. Looking back at the final product, I can’t say if there are any definite problems that arise because of this development process, but I have this niggling feeling in the back of my mind that it would have turned out differently (better?) had I done it with feedback on all four colors.

After finishing the pieces in Inkscape, I then imported them into the GIMP and put them in front of the colored backgrounds/boards, as shown earlier.

I did most of the work by hand: there’s very little easy automation I thought possible, which means I didn’t automate anything, which means I don’t really ever want to have to change the geometry of the piece, because then I need to propagate it to the other 3 color schemes by hand. Whew. If anyone asks me to change these pieces (say, a majority of the Arimaa community) then I probably would, but why should I? I’m giving everyone the SVG source, which is what the next section is about.

So between versions 2 and 3, I decided that spending 30 minutes manually propagating a geometry change to all 4 colors was getting to be a pain in the bum, and decided to automate the geometry changes. After 2 hours with python, I whipped up a script that changes the style attribute of the SVG according to how the parts are named: for instance, parts id’d as outline1, back2, and detail3 are all colored differently. The script can be had here (6k) under an MIT license, and I swear half the file is comments. You’ll need lxml and inkscape accessible from the command line. It’s been tested under Ubuntu 11.04 with Python 2.7.1. Note: you’ll need to post-process some of the whites. Since this won’t be of much use to anyone but tweakers, you’ll still want to get your hands on the SVGs themselves, which is what the next section is for…

Download

So, enough of the analysis: here are 2 zips of the pieces in SVG format, one set of traditional silver vs. gold, and one set of black vs. white. I’m releasing these under a CC-BY license, mostly because if someone does make a commercial client/book/whatever, then I want them to at least have the option of using my icons. Attribute to Nathan Hwang or The Novice Oof, or both: more visibility makes me happier, you can link back here, etc etc. Oh, right! The actual zips:

Gold versus Silver (v4.1, 25k)

White versus Black (v4.1, 25k)

All icons are individually saved in Inkscape SVG format at 40×40 pixels, which should be readable by any random SVG viewer you may happen to point at it (note the 40×40 pixel size means nothing: you can scale up and down as far as you want, it’s just the default size most viewers will display the SVG at). The Icon name schemas go from color (b – black, w – white, g – gold, s – silver), to piece rank (1 – Elephant, 6 – Rabbit), to rank name, so that the gold elephant has the filename “g-1-elephant.svg”, and the silver horse has the filename “s-3-horse.svg”.

So, I hope this is helpful: as usual, send me bug reports, ideas, thoughts, and alerts that you’ve made a derivative work (derivative work? I love derivative work!) all to the usual place.