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.
While Adobe AIR’s API covered most of our development needs, we also utilised a handful of native extensions from the guys at Distriqt. If you haven’t already, check them out.
It was a fun project to work on and I’m happy with the end result. you can check out WeeMoji here.
What app did you use to code this in? Since it was cross platform, and Adobe Air, I know you didn’t use Xcode.
Hi Josh. It was developed using Adobe Flash Builder.
Hi Christopher, so Adobe Flash Builder and AS3?
Hi Josh. Yeah, Flash Builder and ActionScript 3.
Hi Christopher,
Have you used starling + feathers for development? Or have you bitmapped the vectors in any way at runtime?. It seems all very smooth if what you are moving on the screen are pure vectors.
Thanks
Hi Pedro. The app uses AIR’s vector renderer for most things rather than Starling and Feathers. We do render the vector backgrounds out as bitmaps and cache them locally on the device for performance reasons. On lower end devices we also drop some of the animation on the actual WeeMee and apply cacheAsBitmap to those bits. And various areas of the UI are bitmaps too. But the WeeMee itself is mostly vectors and runs at our target frame rate on anything from iPhone 5 upwards. That includes the 32-bit iPhone 5. The whole thing also runs perfectly on iPads from the iPad mini 2 upwards. I’ve found that for most modern devices, AIR’s vector renderer performs really well without much need for optimisation.
Did generating dynamic stickers require a native extension? What packaging requirements are there for adding stickers to an app built in Flash Builder?