I want to make a rhythm game but I don't know how

# .title[I want to make a rhythm game but I don't know how ]

[lislis](https://lislis.de) - [GodotCon 24](https://conference.godotengine.org/2024/) -  October 2024

---

# $ whoami

---

class: middle
      background-image: url(assets/ed2.gif)
      background-size: 10%
      background-position: 75% center

# $ whoami

lislis

Background in webdev

Making small hobby games since ~2015

First heard of Godot with 3.x

Now trying to get serious with it

---

## Once upon a time

---

background-image: url(assets/berlinminijam.png)
      background-size: 50%
      background-position: 90% center

## Once upon a time

## at the Berlin Mini Jam

## one of the themes was

## *Ducks* 🦆

---

# 🦆🦆🦆

**Nobody:**

**Me: How about a rhythm game based on the German children's song "Alle meine Entchen"?**

---

# Quick facts on "Alle meine Entchen"

- German equivalent to "Mary had a little lamb"

- Cmajor scale, very easy for piano beginners to play

- lyrics translate roughly to

*All my little ducklings*

*Swimming on the lake (2x)*

*Heads go underwater*

*Tails up in the air*

---

background-image: url(assets/Gründelnder_Stockentenerpel.jpg)
      background-size: 40%
      background-position: 95% center

# Quick facts on "Alle meine Entchen"

- German equivalent to "Mary had a little lamb"

- Cmajor scale, great for piano beginners

- Lyrics translate roughly to

*All my little ducklings*

*Swimming on the lake (2x)*

*Heads go underwater*

*Tails up in the air*

---

# 🦆🦆🦆

**Nobody:**

**Me: How about a rhythm game based on the German children's song "Alle meine Entchen"?**

**Also me: \*never made a rhythm game before, still kinda new to Godot\***

---

# 🤔
      # How hard could it be?

**Spoiler: a lot harder than I thought**

---

background-image: url(assets/duckies1.png)
      background-size: 55%
      background-position: center

[github.com/lislis/allmylittleduckies](https://github.com/lislis/allmylittleduckies)

---

background-image: url(assets/duckies1-highlight.png)
      background-size: 55%
      background-position: center

[github.com/lislis/allmylittleduckies](https://github.com/lislis/allmylittleduckies)

---

background-image: url(assets/og-duckie.png)
      background-size: 78%
      background-position: center

---

# 🧐
      # I should at least make a playable version

---

![Alice falls down the rabbit hole](assets/alice.webp)

---

# What's a rhythm game?

.right.small[[from Wikipedia](https://en.wikipedia.org/wiki/Rhythm_game)]

- music-themed action video game that challenges a player's sense of rhythm

- typically focus on dance or the simulated performance of musical instruments

- and require players to press (or step on) buttons in a sequence dictated on the screen

---

class: middle
      layout: true
      background-size: 50%
      background-position: 90% center

# Notable examples

---

- [PaRapper The Rapper (1996)](https://en.wikipedia.org/wiki/PaRappa_the_Rapper)

---

- [Dance Dance Revolution (1998)](https://en.wikipedia.org/wiki/Dance_Dance_Revolution_(1998_video_game)

---

- [Guitar Hero (2005)](https://en.wikipedia.org/wiki/Guitar_Hero)

---

layout: true
      class: middle
      background-size: 50%
      background-position: 90% center

# Rhythm hybrids

---

- [Geometry Dash (2013)](https://store.steampowered.com/app/322170/Geometry_Dash/)

---

- [Crypt of the NecroDancer (2015)](https://store.steampowered.com/app/247080/Crypt_of_the_NecroDancer/)

---

- [BPM: Bullets Per Minute (2020)](https://store.steampowered.com/app/1286350/BPM_BULLETS_PER_MINUTE/)

---

- [Hi-Fi RUSH (2023)](https://store.steampowered.com/app/1817230/HiFi_RUSH/)

---

layout: true
      class: middle
      background-size: 50%
      background-position: 90% center

# Honorary mentions

---
      ---

- [Trombone Champ (2022)](https://store.steampowered.com/app/1059990/Trombone_Champ/)

---

- [Cats on Mars (2020)](https://jontopielski.itch.io/cats-on-mars)

(Made with Godot, [play on itch.io](https://jontopielski.itch.io/cats-on-mars)!)

---

- [A Dance of Fire and Ice (2019)](https://store.steampowered.com/app/977950/A_Dance_of_Fire_and_Ice/)

([Play on itch.io](https://fizzd.itch.io/a-dance-of-fire-and-ice))

- Also [Rhythm Doctor (2021)](https://store.steampowered.com/app/774181/Rhythm_Doctor/)

---

# 💻💪
      # Let's get to making!

**But how?**

---

background-size: 80%
      background-position: center
      background-image: url(assets/reddit1.png)

---

background-size: 80%
      background-position: center
      background-image: url(assets/reddit2.png)

---

background-size: 80%
      background-position: center
      background-image: url(assets/reddit3.png)

---

background-size: 80%
      background-position: center
      background-image: url(assets/reddit4.png)

---

# There are two approaches

- Conductor-based

- MIDI-based

---

# Conductor-based

- One class / node ("Conductor") for keeping track of timing

- Calculations depend on the song's BPM (Beats per minute), eg

- Beats per second

- Time duration of beat

- Time to next/ previous beat

- Everything time-related references the Conductor

- Takes delay of audio processing into account

---

# Quick, I don't know the BPM of my song

- There is online BPM analysing tools that can figure this out for you

## or I want to let the user pick a random song

- Then you need to analyse the audio yourself, that's another rabbit hole (search for FFT, beat- or onset-detection)

---

# Resources for Conductor-approach

- Unity

- [article] [How To Make A Rhythm Game (Technical Guide) (2014, 2020)](https://fizzd.notion.site/How-To-Make-A-Rhythm-Game-Technical-Guide-ed09f5e09752451f97501ebddf68cf8a)

- [article] [Music Syncing in Rhythm Games (2017)](https://www.gamedeveloper.com/programming/music-syncing-in-rhythm-games)

- [article] [Coding to the Beat - Under the Hood of a Rhythm Game in Unity (2019)](https://www.gamedeveloper.com/audio/coding-to-the-beat---under-the-hood-of-a-rhythm-game-in-unity)

- Godot

- [video] [Complete Godot Rhythm Game Tutorial (2020)](https://www.youtube.com/watch?v=_FRiPPbJsFQ) ([repository](https://github.com/LegionGames/Conductor-Example)) (Godot 3.2)

---

# MIDI-based

- MIDI (Musical Instrument Digital Interface) is a protocol, interface and connectors for describing music electronically

- MIDI files contain lot of info, eg. time signatures, tracks, notes and more

- You need a .mid file and the rendered song

- Read MIDI info into a buffer, then play the MIDI and the song at the same time

- Compare the timestamps from the .mid file and the timestamps of gameplay events

---

# Quick, where do I get a .mid file from?

- You can export it from a DAW (Digital Audio Workstation) (where you can make your own songs, too!)

- Sometimes friendly internet strangers write down MIDI files for popular songs and put them on the internet. Mostly piano versions, though

---

# Resources for MIDI-approach

- [video] [Making a rhythm game with Godot & Midi (2021)](https://www.youtube.com/watch?v=owbRRxrIp14) ([repository](https://github.com/samsface/godot-tutorials/tree/master/midi)) (Godot 3.2)

- [plugin] [Godot MIDI Player by arlez80](https://bitbucket.org/arlez80/godot-midi-player-g4/src/master/) (I used this)

- [plugin] [Godot Midi by nlaha](https://github.com/nlaha/godot-midi) (pretty new?)

---

# 🤷
      # So, which approach do you choose?

**Depends**

---

## Conductor

- Just needs a song and the BPM

- Most flexible in game design

- Useful for "open-ended" music

## MIDI

- Need .mid and song

- But can also encode non-musical behaviour (eg. animations)

- Best for a song with an end

---

# I also couldn't choose

That's why I made two versions

---

<video controls>
         <source  src="assets/duckies-conductor2.m4v" />
         download <a href="assets/duckies-conductor2.m4v" download></a>
      </video>

---

<video controls>
          <source  src="assets/duckies-midi2.m4v" />
          download <a href="assets/duckies-midi2.m4v" download></a>
      </video>

---

# 🦆🦆🦆

---

# Image references

- [Gründelnder Stockentenerpel by Ulrich Prokop (CC-BY-SA)](https://commons.wikimedia.org/wiki/File:Gr%C3%BCndelnder_Stockentenerpel.jpg)

- [PaRapper screenshot (fair use)](https://en.wikipedia.org/wiki/PaRappa_the_Rapper#/media/File:PaRappa_the_Rapper_gameplay_screenshot.jpg)

- [DDR by Georges Seguin (CC BY-SA 3.0)](https://en.wikipedia.org/wiki/Rhythm_game#/media/File:Festival_du_jeu_video_20080926_033.jpg)

- [Guitar Hero screenshot (fair use)](https://en.wikipedia.org/wiki/Guitar_Hero#/media/File:Guitarhero-screen.jpg)

- [Geometry Dash screenshot (fair use)]()

- [NecroDancer screenshot (fair use)]()

- [BPM screenshot (fair use)]()

- [Hi-Fi Rush screenshot (fair use)]()

- [Trombone Champ screenshot (fair use)]()

- [Cats on Mars screenshot (fair use)](https://jontopielski.itch.io/cats-on-mars)

- [ADOFAI screenshot (fair use)]()

---

.no-bullets[
        - 📧 mail@lislis.de
        - 🦣 [@lislis@toot.cat](https://toot.cat/@lislis)
        - 🌐 [//lislis.de/talks/godotcon-2024](https://lislis.de/talks/godotcon-2024)
        - 🦆 [//github.com/lislis/duckies2.0](https://github.com/lislis/duckies2.0)]