I’ve been working with an artist called Lee Goater on an app as part of his latest awesome exhibition. The exhibition’s called Faces: The Anatomy of Autonomy, and it’s a collection of Lee’s distinctive black-and-white characters. Each little face is a simple but characterful little chap or lady-chap created from a variety of painstakingly drawn features and accoutrements. Make a Face is available now on iOS and Android, for free!

This slideshow requires JavaScript.

About The app

The app is called Make a Face. It lets you – you guessed it – make a face. Lee’s broken his faces down into their constituent hair, eyes, mouths and fun extras like beards and glasses, and the app lets you create your own faces by putting the bits back together however you like. Once you’ve made a face you can save it, share it and use it for things like avatars or contacts on a mobile.

It’s quick, fun and simple but effective – half the people in my phonebook are now represented by cute little black-and-white versions of themselves. Give it a go and see for yourself (it’s free!) or even better, come along to the exhibition. It’s at Leeds Gallery between the 29th of September and the 21st of October. See you there!

The Tech

Make a Face was developed in Flash and exported for iOS and Android using AIR. It’s a really powerful combination, and one that I’d definitely use again – especially after my current recurring nightmare that is developing an HTML game for mobile and desktop. Back in those halcyon days before Apple spiked it, one of the best things about Flash was the way it was so consistent across different browsers, and the same is true now: you develop the app once and export it twice, and there’s very little extra work involved. Compared to the enormous amount of work to optimise HTML and JS content across browsers (and get it working in the first place in IE7/8) this is a dream.

The one stumbling block I hit was performance, especially when it comes to vectors. While none of the artwork is very complicated in terms of paths and points, there’s a lot of it and mobile hardware sometimes struggled to move smoothly between screens. After some tests I ended up converting all the artwork to PNGs in order to make use GPU acceleration on modern devices. There are still a few moments of framerate drop that I’d want to fix if this was a game and performance was top of the list, but for an app like this and with really limited time, I had to prioritise content and functionality over optimisation.

The iOS version uses the Social ANE by Vitapoly, which is great. It’s super-easy to set up and uses the built-in activity sheet in iOS, which taps into any social networks the user has allowed the OS to use. The Android version uses an extension by Small Screen Design. This was a little more work to get set up and doesn’t let you share bitmapData as easily, so the sharing action isn’t as smooth on Android – I had to make the app save the image to the camera roll, then load that image in order to share it. Slightly torturous, for me and the end user, but still much, much less hassle then doing anything in HTML5!