Tool collaborated with GSD&M and Pizza Hut to bring to life the classic Bandai Namco arcade game PAC-MAN® using WebAR.
Two of the biggest challenges and opportunities were to:
1) Re-imagine a world-renowned game using modern technology.
2) Create an Augmented Reality version of the game that is easy to use and can work for millions of Pizza Hut customers.
Customers received a special edition pizza box that served as the AR marker, allowing them to activate PAC-MAN® via their mobile browser and have the PAC-MAN® map and characters animate and play on top of the box.
Ultimately, we created 3 levels of the game and now millions of Pizza Hut customers are vying for supremacy on the leaderboard.
AR and PAC-MAN®...let’s go!!!
The Customer Experience
After a customer has their pizza delivered, they can use the top of their pizza box as the AR marker for activating the game. Using a QR code integrated into the design of the box, a customer points their phone at the QR code and this reveals a message to open their web browser. Upon doing this, customers are welcomed into our experience on a web landing page. They are asked to point their camera at the top of the pizza box and shown an instructional .gif that helps show how to activate the AR game.
The Gameplay
The mechanic of the game replicated the original. Players can use a touch joystick on the screen to control PAC-MAN®. To give the users the best experience while playing in AR, we decided to create 3 different difficulty levels for the game for casual and hardcores gamers. We rewarded players with a Pizza Hut x PAC-MAN® leaderboard that allowed them to input their initials (just like the classic arcade game).
The Design
The UI was designed with retro 80’s gaming in mind with a pixel art look & feel. We were given source art from Banda-Namco and used a combination between original art from the game as well as custom animated gifs.
The Tech
To bring this project to life, we used three.js, A-Frame for the 3D rendering and the 8TH-Wall platform for the AR. The project uses Image recognition to detect and track the position of the box in real time, while three.js and A-Frame handles the physics, collisions, lighting and rendering of the 3D assets. This was built for WebAR so that no downloads were required and there was a limited barrier to entry to play the game.
Try it yourself!
