Wireloop AR Game
The second AR game from The New York Times, Wireloop is a game of dexterity. Easy to play, hard to master, Wireloop utilizes the best of AR’s spatialized format to have users use a floating ring to light up a wire and reveal the hidden shape at the end of the game. Simple in its execution, but complex in its development.
Final hidden shapes for versions 1-5
Art Direction & Design Explorations
Mood Boards
Material explorations
Animated instructional tokens
Final assets for intro screen, UI pickers, and effect icon
UX & Interaction Design
Playtesting
Final onboarding instruction sequence
Game Play
Instruction logic
Prototyping to Final Product
Production Tools
Wire Generation Tool
To build Wireloop, the team developed a custom web-based tool using Three.js to generate anamorphic 3D wire meshes from any vector graphic.
It adds empty checkpoints along the wire that helps us monitor user’s progress and score.
Blender Script
After a new wire is generated, we processed it with a custom Python script. It adds an animation clip to the asset so that we can easily grab the transforms at any point of the wire given the frame number.
Raycast.js Library
The team has been creating reusable components for effects, and for Wireloop we used the Raycast module to test if the ring was on the wire.
We run the Raycast function for all segments to detect the active segment and monitor game progress.
It returns:
whether or not the ring is on the line
normalized progress
closest point on wire from ring
Credits
Production: The New York Times, R&D
Lead Technical Producer: Paula Ceballos
3D/Immersive Editor: Noah Pisner
Project Manager: Justin Baek
AD / Product Designer: Lian Chang
Lead Engineer: Ellen Lo
Supporting Engineers: Nicholas Bartzokas, Fabio Piparo
Designers: Evan Grothjan, Daniel Mangosing
Creative Technologist/Interaction Designer: Lydia Jessup
UX Researcher: Emily Saltz