A Gift for the Holidays: Creating A Facebook AR Game
This holiday season, we set out to create a gamified AR experience in Facebook’s Spark AR Studio. To do this we had to take into account all the limitations and qualities of the platform to balance and coordinate a coherent experience.
Working with Mobile AR
Augmented reality, unlike virtual reality, is a platform where the user has complete control of the camera through which they see and interact with “augmented” on screen experiences. Therefore, the experience must be considered from all different angles whether it be top down, over the shoulder, or just floating around in space. This creates a unique set of challenges for any experience, as the camera “frame” is in the hands of the user. With this in mind, when planning the layout of the scene, not only do we have to consider every camera angle, we also had to consider the input schema for interactions within the scene.
The Sandbox of Spark AR
In Spark AR Studio we are limited to a few different input controls. There is tap, long press, pinch, rotate and pan. Intuitively, users have gotten used to how these controls interact with objects on screen so we took this into account when planning our controls. Our game only required the tap feature to place the scene and interact with the game environment. Instead of panning, users control the camera by rotating the phone. Keeping to these two mechanics ensured an intuitive user experience.
Design and Iteration
Following the decision to only use the tap touch gesture, the actual mechanics of the experience had to be fleshed out. Our initial concept was interaction with a 2D overlay over the screen with elements such as buttons and animated visual effects. However, this removed the user from the augmented reality aspect of the experience too much, so we pivoted to another model of taps in the 3D world as well as a 2D overlay with buttons. Several iterations later, we still felt that any 2D overlay presented a distraction from our augmented reality experience and we went for interactions only within our 3D scene during gameplay. Although this limited us to fairly simple mechanics, we ran into the problem of scene layout again as now we needed to make sure the interactable elements were prominent and easy to tap as well as provided feedback.
Reaching a Solution
Our solution involved scaling and changing the placement of 3D objects as well as animations and audio feedback to engage and guide the user. Our goal for the experience was to create a table top game that users can place in a relatively small space. At the same time, we did not want the objects to appear too small where would be lost. Through trial and error, we came to an acceptable balance between the scale and placement of the objects such that the objects appear large enough but don’t take up too much space in the real world.
The result was a fairly simple interactive augmented reality game that showcases some of the qualities of the Spark AR Studio platform. Although we had to simplify our concept to adhere to some of the limitations presented by the Spark AR Studio platform, our learnings from this project will definitely be extremely useful in future AR experiences, whether they be on another social platform or native ARCore or ARKit systems.
