In our last post, we talked a little about W&W’s origins. Today, I’ll post a little bit on how the graphics were created for Wind and Water: Puzzle Battles!

As we all know, the resolution of the GP2X is 320*240 pixels, and though it may sound like a very limited resolution by today’s standards, it houses no less than 76800 dots of pure workload. The reason is that sprite graphics have dots hand placed carefully to make everything look pretty and well animated.

For the graphics, as always, everything goes by the “rule of eights” with me. I already knew that the “Elements” in the game would be 16×16, so all I needed was to make them colorful and to include the appropriate Chinese character inside. Chinese characters are pretty complicated compared to letters in say, English, and sometimes squeezing the whole ideogram in a limited space can be quite a challenge!

At first, they were going to be more “classic” in style. The characters were more calligraphic and the blocks much flatter. Later, I imagined them as cubes, so I had to play with the lighting to give them volume. I wanted the blocks to fade according to the element they represented, so I drew the bursting animations.

After drawing “sprite sketches” of the first characters (which are Hao and me!), and some needed props, I had the first (mockup) screen of the game! Now all you need is to imagine it finished and animated in top quality! (Okay, I admit it requires a lot of imagination.)

But after drawing some more elements and improving the quality of others, things looked much more promising (in mockup mode, of course…)! The character size I decided upon was 48×48. They looked much better after I worked more on them. Now, they only had to move to be ready!! (SIGH…What a pain…why do sprites have to move? Just drawing them is complicated enough!)

I also started to work on the dreaded “press” graphics. If you notice, the beta “screenshots” of the game have a silver colored press, while the final one turned out raven. Here are some of the concepts I explored. The black “dents” in found in one of them are actually the ancient Chinese “Bagua” trigrams, also linked to the Ancient Elements.

As a bonus, here are the dummy blocks Hao drew to make the test engine! It is funny that the cursor you see there was kept for the GP2X Software Contest, the Teaser Demo, the Final Demo, and was replaced by a new one merely days before the official worldwide release of Wind and Water! We considered keeping it as a memento, but it was very different from the overall quality of the final game, so we had to retire it as a veteran warrior!

In future workshops I’ll detail more on sprite rendering and animation. Stay tuned!

This entry was posted on Monday, April 14th, 2008 at 1:27 pm and is filed under Sprite, W&W. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.