WarPath Art and Graphics

This post will focus on some of graphic design and art direction decisions that have gone in to our first iPad app, WarPath. Thus it is written by Paul. Hello!

Stuart made the brief to me pretty clear that the game was to be top-down and cartoon style. So, no isometric or false perspective “top-side” views, and no realistic textures and detail.

WarPath tank

Key to the project was the design of the tanks. I used images online and even some photos of real tanks I saw at a local air show as inspiration to draw simplified top-down tanks. I decided that the essence of a tank is in the colour, turret, chunky panels and the tank tracks, and tried to distill these elements into the tiny pixel-space available. So, I chose to put the team colours as military-inspired stripes rather than colouring the whole tank to keep the important main tank colouring. I made the gun quite long so it would show up in the silhouette of the tank. I drew the tank shape out of boxes split into panels. I made the tank tracks visible from above, even though they would normally be shielded.

a few different approached to drawing tank damage

Drawing the different damage levels of the tanks proved a little difficult while staying within the brief. At first I experimented with deforming the shape of the tanks, then with applying real damage textures, but both of these proved unsatisfactory to the desired cartoonish-cuteness look. I settled on a technique of applying jagged shading to the tanks which looks much more graphic in style.

Next I looked at the screen layout and worked on making it a bit more fitting to the style of the game. Drawing on my tank research, I decided to split the elements into riveted panels as if they had been affixed to the metal surface of a tank. To keep the cartoon style I had to avoid textures, simplify details and concentrate on bold shapes. Later, I drew a camouflage pattern based on a tank silhouette to better invoke the military style and add visual interest.

WarPath metalwork screenshot

delicious red start buttonDrawing the explosion in a fittingly cartoon style also proved challenging. I avoided gradients and translucency effects in the chosen design. Drawing avatars, buttons and switches was more straightforward and fun. The big red start button is designed to look like the engine start button found in some cars and the large buttons found on industrial machinery which are so satisfying to press.

WarPath Military badgeFor the title screen, I made a first attempt with an italic sans-serif which was a bit yawn-inducing. Looking for military-themed inspiration, I found a catalogue of US regimental badges which are full of amazingly simple graphic design and lots of variation while still adhering to a familiar template and style rules. I drew the WarPath badge after this style, copying the colour-palette directions and typography; inventing a simple icon for the concept of touch-and-target with the name in the scroll, and showed it to Stuart. He showed me some more ornate shield designs that he preferred so I incorporated wings and a name plaque to make the whole design more triumphant and impressive. I came up with a punning slogan for the scroll (“Tactical iPad Command” as if this is an actual regiment, yet also describing the nature of the game in a militaristic style) and added a symbol of a thistle to tie in with the Scottish theme of Whisky Biscuit. Technically the hardest part of this was separating the yellow outline into it’s own shape in Illustrator to apply a slight 3D emboss effect, which I hope makes it look more like an embroidered badge. Stylistically, I had to strike a balance between the ornate and simplified in order to keep the theme. The result is a lot more fun than the previous title screen.

WarPath WayPoint mockupThe biggest departure from the cartoon style was probably in the design of the way-point system, described earlier. I imagined the style as a high-tech touchscreen tank command system, drawing everything in translucent whites for high-contrast with the tanks and background. I created a series of mock-ups and a story board to work through the user interaction and to demonstrate to Stuart how it ought to be implemented, delivered with the component assets. He got something working quickly and I played with a partly-working version using desktop sharing in iChat and then later with a build running in the iPad simulator, and only found a couple of changes necessary. I think it turned out to be really great in implementation.

Lastly I should mention the design of the Whisky Biscuit logo, used as a splash screen in the game and on this very website. It’s concept is to be as Scottish as possible and involve Stuart’s favorite colour, orange. Therefore, an orange tartan stag stands proudly atop the words Whisky Biscuit carved from the very highlands themselves. The bold colouring, iconic plunder and absurd juxtaposition attempts to both prepare you for and demonstrate the humour, joy and charm that Whisky Biscuit wants to create and share.

About Paul

UX designer who makes music, software and art over at apfrod.com.
This entry was posted in Development and tagged , , , , . Bookmark the permalink.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>