Here’s a project I completed for WeeWorld at the tail end of last year. WeeMoji is an app for iOS and Android that lets you make your very own customised emojis and stickers featuring you!
At its core is a fun avatar creator where you make a little WeeMee that looks just like yourself. The app then generates a series of emoticons featuring your WeeMee that you can share with friends via your device’s messaging app.
There were several technical challenges that we had to overcome for this project. One of the requirement was that the app would have support for thousands of items of clothing and assets for your WeeMee to wear. Those items also had to be colourable along with the WeeMee’s hair, eyes, and skin tone.
We also wanted the user to be able to zoom into their WeeMee’s face without any loss of fidelity. In addition, the WeeMee was to be animated rather than simply standing static in the centre of the screen. And of course, it had to be cross-platform, be within app store binary size limits, and work without the need for any lengthy additional data downloads after installation. Easy-peasy!
Some of WeeWorld’s previous apps had similar technical challenges. They had been written natively in Objective-C (so were iOS only) and had gone for a traditional bitmap approach to handle the rendering of the WeeMee avatars. However this approach meant that the actual avatar fell somewhat short of the original vision. In those apps, the users were presented with a non-animated version of the WeeMee that was static and also had limited colouring options.
For WeeMoji we were determined to overcome these issues. After a few initial prototypes using Objective-C and SpriteKit, we decided to start prototyping in Adobe AIR, and that made all the difference for this project.
Adobe AIR’s vector rendering API really did save the day. We were able to import vector artwork created in Adobe Animate CC and scale that artwork up across any screen resolution. Gone was the need to generate multiple versions of each graphical asset for different target resolutions. Also, being vectors, the actual file size of each asset was tiny compared to the bitmap equivalent. The first release of the app went out with just over a thousand assets, which in total came in at around 12MB! Tiny! And that included animation in much of the content too!
Of course, all that vector goodness also came in handy for the app’s face & makeup editing mode. We were able to effortlessly zoom into the WeeMee’s face and show it off in even greater detail. In addition, we were able to apply some fairly complex animation to the WeeMee’s mouth and eyes, which really helped add a sense of personality to the user’s little avatar. All things that would have been difficult if we’d gone with bitmaps.
It was a fun project to work on and I’m happy with the end result. you can check out WeeMoji here.