The Rhythm card

Make your own rhythm game! Click circles like in osu!, stomp on arrows like in Dance Dance Revolution, strum along like in Guitar Hero… anything where moving to the beat is the whole point.

What counts

A game where timing is the game. The player does something on the beat, and the game judges how close they got.

Notes falling down lanes are the classic, but it doesn’t have to look like that at all! Crypt of the NecroDancer is a dungeon crawler where you can only move on the beat, and Rhythm Heaven is a pile of silly minigames that are all secretly testing your timing.

A game that just has music playing in the background doesn’t count, and neither does a music visualizer (that sounds more like the Demoscene card!). The player has to play along.

The easiest thing that counts

One lane. Notes scroll toward a line, and you press space when one reaches it. Show “Perfect!”, “Good” or “Miss”, count a combo, and play a song. That’s a rhythm game! You can build it in a weekend with a <canvas>, Godot, LÖVE, or whatever you’re comfy with.

Add a few more lanes after that, and it starts to feel like the real thing surprisingly quickly.

An early Dance Dance Revolution machine. You play it with your feet, stomping on the arrows as they scroll up the screen! Photo by SPUI, public domain, via Wikimedia Commons.

Getting the timing right

This is the part that makes or breaks a rhythm game.

• Follow the audio’s clock, not your frame count or Date.now(). In the browser, that’s audioContext.currentTime. Godot’s docs have a page called “Sync the gameplay with audio and music” that explains exactly how to do it there. Frame rates are different on every machine, and the audio is the one thing that keeps steady time. (The Demoscene guide says the same thing!)
• Write your charts in beats, not seconds. If a song is 120 BPM, beat 8 lands at 8 × 60 / 120 = 4 seconds, plus however long the song takes to get going. Charting in beats lets you snap notes to a grid, and if you got the BPM slightly wrong, fixing one number fixes the whole chart.
• Judge with timing windows. Measure how far off each press was, in milliseconds. Something like ±40 ms for “Perfect” and ±100 ms for “Good” is a fine place to start. Then play it a lot and tweak!
• Add an offset setting. Every device has a bit of audio and input lag, so a note that’s perfectly on time on your laptop is late on someone else’s Bluetooth headphones. A calibration screen where you tap along to a beat fixes this, and pretty much every serious rhythm game has one.

Music

You’ll need songs you’re allowed to use. Please don’t grab something off Spotify, even though it’s tempting!

• Make your own. It’s your game, it can have its own soundtrack! BeepBox makes chiptunes right in your browser, and Strudel lets you write music with code.
• Creative Commons music. Kevin MacLeod’s incompetech.com and the Free Music Archive have tons of it. Just follow the licence and credit the artist.
• Ask an artist! Lots of small musicians are happy to say yes if you ask nicely and credit them properly.

Going further

• A chart editor. Placing notes by hand in a text file gets old really fast. A little editor where you tap along to the song, then drag notes around to fix them, makes charting way more fun. And then other people can make charts too!
• Auto-charting. Figure out where the notes are in a song automatically. Look up onset detection: the aubio library can do it, or you can write your own with an FFT. It won’t be as good as a chart made by hand, but it’s a really fun problem.
• Juice. Notes that burst when you hit them, a background that pulses on the beat, a combo counter that gets more and more excited… This makes a huge difference to how good it feels to play.
• Your own controller. A dance pad made of cardboard and foil, a drum made from a pizza box, a webcam watching you dance… If you make a cardboard DDR pad, I need to see a video of it.

Shipping one

• Demo: a link where we can start playing right away, with at least one whole song charted. Tell us which keys to press! Browsers won’t play sound until someone clicks, so start with a “click to play” screen.
• Screenshot: the middle of a song, with notes on the screen.
• README: how to play, where the music comes from (with credits!), and how you dealt with timing. Feel free to brag about your high score too.