ITP Blog

Animation - Week 7

December 10, 2018

For my proof of concept/demo Vuforia Unity AR project, I created Cupid Tinder. Cupid Tinder is a little, Cupid-like creature that sits on top of your phone while you play Tinder. This demo version used screenshots from the Tinder app as the different image targets for Vuforia to project the Cupid character in an AR space.

Testing Vuforia And Unity

We used the game engine Unity as our primary tool for composing 3D animations. This is because there are pre-existing assets we could use in our animations and because of its built-in support for AR/VR experiences. The Vuforia plugin allowed us to target and track images to use as our AR reference point. Below is a screenshot of me testing out Vuforia using a Bed, Bath, and Beyond coupon as the AR image target and rendering a Unity GameObject cube on top of that image target.

cube test

Gabe emphasized how an image target with many unique points and minimal repeating patterns produce the best image targets since it makes tracking the image and its dimensions easier. So I thought about potential image targets to use in this demo project and decided on the Tinder UI.

Swiping Right On Assets

To the people who haven’t experienced the wonderful world of Tinder and are unfamiliar with the dating application’s UI, here is an example screenshot I took of the Tinder application:

tinder target

I then imported the Tinder screenshots as Vuforia image targets in a Unity project and tested them with a GameObject cube.

tinder targets

tinder cube

I used multiple image targets because I could have different AR animations play on each profile (screenshot). Next, I used Adobe Fuse to generate a 3D model character to be the Cupid creature.

fuse

Fuse, however, does not include a skeleton or animations, so I exported the Fuse model to Mixamo for animating.

mixamo

After downloading a few .fbx Unity files of the Cupid creature performing sitting animations, I imported the model into Unity.

mixamo import

I placed the models slightly above each image target to account for the space between my phone screen and case. They also sit on top of the image target plane, utilizing Vuforia’s ability to project AR elements beyond the image target itself, to give a 3D effect (similar to Gabe’s DESCENT piece).

transform

However, the character’s textures weren’t being rendered in Unity. This short Unity Mixamo YouTube video refreshed my mind on how to import the materials. I did end up repeating this process on each of my Cupid models (one Cupid GameObject per profile), which didn’t seem to be the most efficient approach.

texture import

I was then able to test the AR experience after all the Cupid models were loaded with their materials into their respective image targets and had their animations set to loop.

Cupid Tinder (video demo)

Future Thoughts

Some thoughts I have as I continue to iterate on this AR project:

  • Find a more efficient, programmatic way to re-use the Cupid Mixamo model and materials, having 9 separate Cupids with 9 separate material imports and 9 separate animation controllers feels like an egregious violation of DRY
  • Incorporate virtual buttons on top of the existing Tinder UI buttons for more interactivity
  • Use an image target that is only the Tinder UI chrome, so that the AR experience can work on any Tinder screen regardless of the profile picture
  • One of the feedback suggestions I received in class that I’d like to pursue is developing this into a multi-AR user experience — one user plays Tinder on their phone while another user watches the Cupid creature randomly react to each profile, effectively making a decision on whether to swipe right or left

Adrian Bautista

NYU ITP documentation blog.
Words are my own.