Rhythm Royale

• 

  Title Page

• 

  Lobby Page

• 

  Listening

• 

  Playthrough

• 

  UI Design

Inspiration

We love video games and over the pandemic, we've noticed two trends in the popular video games. Firstly, games that facilitate mass competition (called battle royale games) such as Fall Guys and Fornite became extremely popular. Secondly, games that were simplistic such as Wordle, Garticphone, and Skribble.io were much more accessible to a broad audience allowing them to gain rapid traction.

We decided to combine these two concepts into a fun audio-based multiplayer game - Rhythm Royale!

What it does

A player joining our website is placed into a lobby with players around the world. The game starts soon after and, in each round, an autonomously generated rhythm is played to all participants. They must then replicate this rhythm using their space bar. We visualise the results of all the players and eliminate those that couldn't copy the rhythm accurately enough. We gradually whittle away players in this way, leaving one winner standing!

How we built it

This a webapp built entirely in Typescript. The frontend uses React.js and the backend uses Node.js. We make use of socket.io for websockets.

Challenges we ran into

• Translating musical concepts like beats, notes, and holds, into a digital representation that could be parsed computationally was a difficult challenge that required significant reading into digital sound generation.
• Visualising the rhythms in real time was difficult due to the strict latency requirements for this kind of game. Traditional animation libraries did not suffice due to the complexity of the higher order components that they expose.
• Matchmaking and synchronous data transfer was also a significant challenge. A traditional REST API would simply not be fast enough for this purpose.

Accomplishments that we're proud of

• Designing our own internal representation for rhythms that allows for rapid comparison between hundreds of players while also being easy to translate back to a digital sound.
• Creating real-time visualisations entirely from scratch using HTML and CSS.
• Utilising websockets to matchmake players effectively - minimising wait-time and maximising play-time.

What we learned

• Signal generation to program oscillating waves to be converted into sound through web audio APIs.
• Websocket programming to facilitate multiple players and multiple lobbies simultaneously

What's next for Rhythm Royale

• Scale up to support hundreds of players at once
• Increase difficulty between rounds using more instruments or different pitches
• A single-player mode with popular songs so players can attempt to learn and win difficult songs

Built With

• node.js
• react.js
• typescript