Chess pieces

The first thing I like to do when I start an app, particularly a game like Chess Juice,  is to create my core graphics. For Chess Juice, this mean the chess pieces. I am a horrible artist, and I cannot possibly stress horrible enough. So creating pieces from scratch was right out.

Next I searched for chess fonts, thinking I could use HTML5's web font facility to load the font to the page and then just use the font for the pieces since I could have the browser scale them to any size I wanted. Yeah, I actually thought using fonts for this was going to work. Now to realize why that was such a horrible idea if you didn't lol right away, you have to know that fonts make their little images by just specifying which dot is foreground color and which isn't. And by isn't I mean background color. But of course I need to put a white chess piece (which in a font is just a black outline and not filled in) on top of a chess board, so the color of the square just shows through. Ahem.

But I really, really liked the chess font I found, Chess Alpha 2. So I decided on an arbitrary maximum board size - 800x800 seemed like a good size - which makes the square size 100x100. I created the pieces at a size of just under 100x100 in Gimp, then filled in all the transparent areas with white. At runtime I then compute a real size for the piece based on the device the page is running within, and let the browser do all the scaling for me. Like magic, I get pretty nice looking pieces with very little work: