8th Wall Blog

Behind the Build: Sushi Beat Drops

Catching sushi to the beat—how WebAR brings rhythm games to life.

8th-wall
Mar 13, 2025 . 4 min read . Community
Behind the Build: Sushi Beat Drops

Sushi Beat Drops is an interactive WebAR rhythm game that challenges players to catch falling sushi in perfect sync with the music. Built in Niantic Studio, the game utilizes face-tracking mechanics to let players control the action by tilting their heads left or right to catch sushi as it lands on plates. For an alternative input method, a tap-to-play mode allows players to tap the screen to catch sushi on the correct side.

Inspired by classic rhythm games like Taiko no Tatsujin and Osu!, the game blends fast-paced music-based gameplay with real-world interaction, creating a fun and immersive experience.

We caught up with creators Saul Peña Gamero and Mackenzie Li to learn about their process and the lessons they learned along the way.

3-Mar-13-2025-12-43-01-8051-AM
What inspired you to create Sushi Beat Drops?

Our project builds on work we started during a previous Niantic competition, where we explored creative AR mechanics using face filters. The inspiration came from Niantic Studio’s This or That sample project, which showcased how face-tracking could be used as an input mechanic. We thought this concept was really fun and saw an opportunity to expand on it with a rhythm-based experience.

As longtime fans of rhythm games, we wanted to create a game where physical movement played a key role, rather than just tapping a screen. Adding head tilts as a control input made the game feel more interactive and engaging.

How did Niantic Studio help bring your vision to life?

Face-tracking was the core mechanic of our game, and Niantic Studio made it simple to implement. The platform’s built-in FaceTracking component allowed us to detect head movement accurately and integrate it into our gameplay.

Since rhythm games rely heavily on precise timing, we leveraged Niantic Studio’s physics system and collision handling to ensure accurate detection of player input. The platform’s event-driven architecture allowed us to sync in-game actions with the beat of the music efficiently.

The ability to iterate quickly using Niantic Studio’s visual editor was also a huge help. Being able to tweak values in real time and immediately see how the game felt made a big difference in refining the mechanics.

What challenges did you face, and how did you overcome them?

Adapting to Niantic Studio’s Entity Component System (ECS)
Coming from a Unity background, transitioning to Niantic’s ECS framework required a shift in thinking. Unlike Unity’s object-based approach, ECS is data-oriented, meaning we had to structure our game logic differently.

To overcome this, we studied sample projects, engaged with the developer community, and leaned on Niantic’s documentation. Once we understood the ECS flow, we found it efficient and well-suited for WebAR experiences.

Synchronizing music and gameplay

A rhythm game is only fun if the gameplay syncs perfectly with the beat. To achieve this, we implemented a timestamp-based spawning system that dictated when sushi pieces would appear on screen.

We also tested different physics collider settings to ensure sushi landed precisely on the plates, making player interactions feel responsive and satisfying.

Balancing head tracking with accessibility
While face-tracking controls were fun, we realized some players might find head tilts tiring over long play sessions. To make the game more accessible, we introduced a tap-to-play mode, allowing players to simply tap the left or right side of the screen to catch sushi.

Key Steps in Building Sushi Beat Drops

  1. Creating the core gameplay loop – Developed a timestamp-based sushi spawning system to align with the beat of the music.
  2. Implementing face tracking – Niantic’s FaceTracking component was used to detect head tilts and control sushi-catching mechanics.
  3. Refining physics & timing – Fine-tuned colliders and object speeds to ensure sushi hit the plates at the right moment.
  4. Adding alternative input methods – Introduced tap-to-play mode for accessibility and player comfort.
  5. Enhancing visuals & UI – Designed hand-drawn assets and animations to create an engaging aesthetic.

What advice would you give other developers interested in building WebAR experiences with Niantic Studio?

  • Start with sample projects – Niantic Studio provides great examples to learn from. Modify them and experiment!
  • Understand how ECS works – Coming from Unity or another engine? Take time to adjust to Niantic’s data-driven approach.
  • Test with real players – WebAR plays differently than traditional games—get feedback early and iterate.
  • Join the developer community – The Niantic Studio Forum was a huge help in overcoming technical challenges.

Where do you see the future of AR going, and how does Niantic Studio fit into that vision?

AR gaming is evolving to be more interactive and physically engaging. We see real-world interactions and spatial computing becoming a bigger part of the gaming experience.

Niantic Studio’s VPS and face-tracking tools are a great step toward making AR gaming more immersive and accessible. As hardware like AR glasses becomes more common, Niantic Studio’s cross-platform WebAR support will help developers create engaging experiences for both mobile and headsets.


Top Features in Sushi Beat Drops

  • Timestamp-based spawning system – Ensures sushi appears in sync with the music.
  • Face-tracking gameplay – Players tilt their heads to catch sushi in real time.
  • Tap-to-play accessibility mode – Alternative input method for player comfort.
  • Custom 3D assets & animations – Handcrafted sushi models and animations enhance the experience.
  • Gacha reward system – Players unlock bonus rewards for maintaining high combos.

2-Mar-13-2025-12-43-01-4184-AM

Pro Tips for WebAR Game Developers

  • Use physics colliders to make object interactions feel natural.
  • Leverage global events to manage game states efficiently.
  • Optimize WebAR performance by keeping assets lightweight.
  • Iterate quickly using Niantic Studio’s real-time editor.
  • Engage with the community – Learning from others can speed up your development process.

Start Your Own WebAR Project
Sushi Beat Drops showcases how Niantic Studio can power fun and interactive AR rhythm games. Want to explore the mechanics behind the game? Start experimenting today!

Interested in building your own WebAR game? Get started with this Niantic Studio sample project:

Create your free Niantic Studio account and start building!

8th-wall

Written by 8th Wall

Niantic's 8th Wall platform is equipping developers, agencies and brands with a complete set of tools to create web-based augmented reality. 8th Wall's WebAR works across iOS and Android devices with an estimated reach of 5 billion smartphones worldwide - all with no app required to download. 8th Wall has powered thousands of commercial experiences for top brands which have engaged millions of users around the world.

Explore More Topics

Visit URL

on a phone or tablet

or
  1. Open Camera
  2. Scan Code