Tuesday, August 13, 2013

Tracewords Makeover

I'll be releasing Tracewords shortly.  This is a casual word game written with codeheart.js that is designed for one-handed (one-thumb, really) play on mobiles. I implemented the mechanics a year ago. To prepare for release I needed three major features:


  1. Graphic overhaul
  2. Sounds
  3. Localization in English and Spanish
I also wanted to add high scores and tracking of things like longest words and most obscure words, but decided that I only could afford eight hours of polish on the game total. I've already completed the Spanish localization. That was somewhat tricky because this is a game about language. The basic mechanics of letter probability and scoring had to be re-tuned. I used Spanish scrabble as a frequency guide and pulled a dictionary from words appearing in Spanish TV closed-captioning. I also read a lot about double letters and different Spanish dialects while tuning the mechanics.

Tonight I made the graphic overhaul. I didn't want a typical busy and gaudy look with jewels or flashy coins. Instead, I was seeking something clean and modern that was very slightly to the "feminine" side of gender neutral.
PrototypeReskin #1
I began with the design language and palette of the iOS 7 betas, and then added texture to the background and allowed some bold color gradients in (it is a game, after all). I use a sans serif ultralight font on the instructions screen (not shown here), but used a handwriting font (from Google fonts) to play up the "trace" and "game" aspect and kept the Times New Roman black font for the letters and words to reference the "word" and dictionary aspect of the game, and to maintain readability.

After seeing the graphic redesign, the publisher (Softgames) found that it didn't fit the look of their other games and asked for a more gaudy Flash-game style. I then reskined again for that, added the sound effects and then ship the code to Softgames for integration with their API. I'm thinking about releasing my more aesthetically "refined" version as an iOS app as well. Here's the final version for the web:

Reskin #1Reskin #2



Morgan McGuire is a professor of Computer Science at Williams College and a professional game developer. He is the author of The Graphics Codex, an essential reference for computer graphics that runs on iPhone, iPad, and iPod Touch.