No money for graphics? Clipart saves the day!
To achieve the Victorian aesthetic of WordWhile, I used graphics based on vintage woodblock engravings. Most of the clipart came from graphics bundles available in the Premium Membership Site of The Graphics Fairy. What an amazing resource! Images from “Eclectic Steampunk”,“Steampunk Images #2”, “Vintage Everyday Objects”, “Vintage Gentleman” and other bundles went into the game’s buttons, player profile avatars and Achievement badges. Without getting too technical, I’d love to share some of the details of the design and programming of this literary game app with readers who might be thinking of using clipart in video games and other digital projects. It’s a great way to build creative games and apps on a low budget.
Layering and Tinting Clipart to Build Buttons
This image is a screenshot showing buttons for choosing between various games modes (Zen, Timed and Virtuoso Race) and challenge styles (Silly or Tricky) in WordWhile. Each button consists of a frame (from the “Monogram Creation Kit” bundle) and a suitable image on a white ground. There is also a separate drop shadow image which animates when you tap the button. It is worth noting that when the player selects a button, the colour of the frame and image change from black to crimson. To build the crimson version, I used a grayscale image built with the original clipart as a mask on a layer filled with the crimson color.
Cut up clipart and build textures procedurally
Another image from the “Monogram Creation Kit” (the flourish frame) is the basis of some of the buttons in the game, such as the “Play” button in the above screenshot. However, I needed to be able to resize the button without distorting the beautiful corner flourishes.
The “buttons” at the heart of the game have especially complex geometry. The player taps these decorative panels to choose with which word/phrase to fill a given blank (for example, “Romeo” or “so cute” in the feature image of this post). Several of the button’s dimensions depend on the dimensions of the screen on which the app is displayed.
The inset shows a sketch in which I am working out how to build the button graphic out of pieces of the original clipart, only some of which can be duplicated or deformed. The app builds these buttons as needed and can even animate changes in button geometry! I am most proud of this creative remixing of the clipart images.
Making clipart is a lot of work—buying them is worth it!
There are vast catalogues of images from the Victorian era available in the public domain online. Have a look at the British Museum’s Flickr stream and you’ll get an idea of the wealth of resources available. When I last checked, there were over a million images and all of them in the public domain. So why not just use these? After all, they’re free.
The problem is that the are also all different colours on different colour backgrounds. I needed grayscale images on transparent backgrounds, i.e. clipart, so that I could layer, tint and manipulate them. Taking an image and transforming it into quality clipart is very time consuming. Admittedly, I’m not very experienced in these techniques, but it took me at least 30-45 minutes to turn this image from the British Library into a clipart image:
Here’s the final result (on a white background):
I’m perfectly happy with the final result, but not with the amount of time it took!
The Graphics Fairy site is fantastic and the vintage clipart available there is very reasonably priced. These resources were absolutely key to the success of this app project. I get to spend my time designing and programming WordWhile, a very unique and fun mobile word game (if I do say so myself), rather than converting images to assets I can use. Creatively using clipart in video games is a great way to keep costs down while achieving the look you want, in my case a Victorian or playful Steampunk aesthetic.