Rhythmusspiel-Quellcode: Notencharts, Timing und eigene Songs
Wie Riffvolt 12 Tracks und 48 Charts ablegt, wo Timing und Punkte entschieden werden und was ein eigener Song kostet.
Der Quellcode eines Rhythmusspiels besteht eigentlich aus zwei Teilen: dem Code, der das Timing bewertet, und den Daten, die festlegen, wann jede Note kommt. Käufer wollen fast immer den zweiten Teil ändern, denn neue Songs machen ein Rhythmusspiel erst zu ihrem eigenen. Riffvolt, unsere vierspurige Rock-Rhythmus-Vorlage, hält die Songliste in einer einzigen Manifest-Datei und jedes Notenchart in einer eigenen Datei. Einen Song hinzuzufügen ist damit Datenarbeit mit klarer Checkliste.
Dieser Leitfaden geht das Paket durch: was das Spiel bietet, wo Timing und Punktewertung liegen, wie man einen Song ergänzt, neu baut und hostet, was die Lizenz erlaubt und was die Edition weglässt. Die Dateinamen stammen aus dem Käuferhandbuch, das dem Spiel beiliegt.
Eine Tatsache sollten Sie von Anfang an im Kopf behalten: Anders als manche unserer Vorlagen braucht Riffvolt einen Rebuild, wenn Sie den Quellcode ändern oder Songs hinzufügen. Für das Hosting des mitgelieferten Spielordners genügt ein statischer Webhost.
Was dieser Rhythmusspiel-Quellcode bietet
Riffvolt ist ein fertiges vierspuriges Rock-Rhythmusspiel für den Browser. Die Spieler treffen Noten im Takt, halten lange Noten bis zum Ende, verbiegen sie mit dem Whammy und füllen eine ROCK-Anzeige, die den Overdrive startet: eine Lichtshow, die keine Punkte bringt und beim ersten Fehler endet. Präzises Timing baut Punkte und Combo auf.
- 12 vollständige Tracks, jeweils mit Charts für Easy, Normal und Hard, dazu Rock God, das nach der Tour freigeschaltet wird: insgesamt 48 Notencharts.
- Eine Tour durch vier Locations (Garage, The road, Festival und Arena) mit je drei Songs. Sterne aus den ersten beiden öffnen die Zugabe, und wer die Zugabe schafft, öffnet die nächste Location, mit Story-Szenen und kosmetischen Belohnungen wie Spuren und Rahmen.
- Freies Spiel: jeder Song auf jeder Stufe, mit persönlichen Rekorden, die Song für Song im Browser gespeichert werden.
- Steuerung: standardmäßig D, F, J und K, Antippen der Spuren auf Touchscreens oder ein Gamepad. Die Tastenbelegung liegt in den Einstellungen.
- Komfort: Audio-Kalibrierung für den Versatz, hilfreich bei Bluetooth-Kopfhörern, reduzierte Bewegung und ein Modus für Lichtempfindliche, der Blitze und Gewitter abschwächt.
- 14 Sprachen in der Oberfläche.
Riffvolt ansehen: Angebot, Demo und Handbücher
Wie die Dateien organisiert sind
Der Download enthält game/ (die Dateien zum Veröffentlichen), source/ (das TypeScript-Projekt), documentation/ (bebilderte Handbücher auf Englisch und Portugiesisch) und licenses/ (Hinweise zu Drittanbietern). In source/ sind Songdaten und Spiellogik sauber getrennt.
- public/manifest.json: der Songkatalog mit Dauer, Audioversion und Chart-Pfaden jedes Songs.
- public/charts/: die 48 Notencharts.
- public/audio/: die Aufnahmen der Tracks.
- src/core/chartValidate.ts: Chart-Schema und Timing-Prüfung.
- src/core/judge.ts: die Timing-Bewertung.
- src/core/scoring.ts: Regeln für Punkte und Combo.
- src/game/campaign.ts: Fortschritt der Tour.
- src/game/session.ts: Lebenszyklus eines Songs und Berechnung des Ergebnisses.
- src/i18n/locales.ts: die 14 Wörterbücher der Oberfläche.
- src/net/localRecords.js: lokale persönliche Rekorde.
- src/ui/style.css: Oberfläche und responsives Layout.
Weil Bewertung und Punktewertung in getrennten Dateien liegen, können Sie die Timing-Fenster strenger oder großzügiger machen, ohne anzufassen, wie sich Punkte addieren, und umgekehrt. Nach dieser Trennung sollte man in jedem Rhythmus-Code suchen.
Einen eigenen Song hinzufügen, Schritt für Schritt
Danach fragen Käufer von Rhythmusspielen als Erstes. Im Paket gibt es keinen Chart-Editor, die Charts werden also als Daten geschrieben, und das Handbuch listet genau auf, was jede Datei braucht.
- Die Aufnahme in public/audio/ ablegen. Nur Audio verwenden, an dem Sie die Rechte für Ihr Endprodukt haben.
- In public/charts/ ein Chart pro unterstützter Schwierigkeit anlegen. Jedes Chart braucht passende Werte für songId, difficulty, audioVersion und offset sowie die Noten in Reihenfolge.
- Den Song in public/manifest.json eintragen, mit eindeutiger id, Dauer, BPM, Thema, audioVersion und den Chart-Pfaden.
- Jedes Chart mit dem Validator in chartValidate.ts prüfen.
- Den ganzen Track auf jeder Stufe spielen, um die Synchronität zu bestätigen. Der Validator prüft Struktur und Timing-Regeln, nicht, ob sich eine Note richtig anfühlt.
- Neu bauen und dann den neuen Build hochladen.
Wollen Sie statt eines zusätzlichen Songs einen komplett neuen Soundtrack, planen Sie die Arbeit pro Chart: 12 Songs auf vier Stufen sind 48 Charts, und jedes verdient vor dem Release einen kompletten Durchlauf.
Neu bauen und was sich sonst ändern lässt
Empfohlen wird Node.js 24 LTS. Führen Sie in source/ npm ci aus, dann npm run typecheck und npm run build, und veröffentlichen Sie nur den Inhalt von dist/. npm run preview stellt den lokalen Build zur Kontrolle bereit. Laden Sie node_modules/ nicht hoch. Vite nutzt eine relative Basis, daher funktioniert der Build auch in einem Unterordner. Die ausgelieferte Laufzeit ist lesbar formatiert; das Handbuch bittet darum, beim Neubauen minify:false und cssMinify:false beizubehalten, damit auch die nächste Person sie lesen kann.
- Marke: Farben und Layout in src/ui/style.css, dazu Ihr Logo. White Label ist erlaubt, Ihre Marke darf also unsere ersetzen.
- Texte: src/i18n/locales.ts, für die Sprachen, die Sie ausliefern.
- Tour: Reihenfolge der Locations und was was freischaltet, in campaign.ts.
- Schwierigkeit: Timing-Fenster in judge.ts, danach Punkte- und Combo-Regeln in scoring.ts.
- Songs: zuletzt, denn jedes neue Chart braucht einen kompletten Durchlauf.
Vor dem Bearbeiten sichern, immer nur eine Funktion ändern und nach jeder Änderung Menü, einen Song, Pause, Ergebnisbildschirm und ein Neuladen testen. Halten Sie Artikel-ids und Speicherschlüssel stabil, damit bestehende Spieler ihre Rekorde behalten.
Hosten oder in ein Portal einbetten
Laden Sie den Inhalt von game/ in einen Ordner auf Ihrem HTTP(S)-Host, behalten Sie die relativen Pfade bei und öffnen Sie die Adresse. PHP, Datenbank oder Konto sind nicht nötig. Öffnen Sie index.html nicht über file://; für einen lokalen Test führen Sie python -m http.server 8765 in game/ aus.
- Browser-Anforderungen: JavaScript, ES-Module, Canvas 2D und Web Audio.
- Browser geben Audio erst nach dem ersten Tippen oder Klick frei, ein stummer erster Bildschirm ist also normal.
- Im iframe Vollbild und Autoplay erlauben.
- .js mit einem JavaScript-MIME-Typ ausliefern, nie als text/plain.
- Alle Laufzeit-Assets, Schriften und Bibliotheken stecken im Build. Ein CDN ist nicht nötig, es handelt sich aber nicht um eine installierbare Offline-App.
Spielstände gehören zum Browser-Origin; zieht das Spiel auf eine andere Domain um, beginnen die Spieler von vorn. Diese Edition nutzt eigene Speicherschlüssel, getrennt von unseren Portal-Editionen. Native App-Projekte sind nicht enthalten; eine Veröffentlichung in den Stores ist eine eigene Arbeit.
Was die Edition nicht enthält
Riffvolt ist die lokale Browser-Edition. Sie hat keine Online-Räume und keinen Multiplayer, kein Online-Ranking und keine gemeinsame Bestenliste, kein Werbe-SDK oder Werbekonto, keinen Chart-Editor, keine nativen Apps und kein Hosting. Persönliche Rekorde und Tourfortschritt bleiben im Browser des Spielers.
Wenn ein Musikspiel in Ihren Katalog passt, können zwei weitere timingbasierte Vorlagen von uns danebenstehen.
Pinloop: ein Ein-Knopf-Timing-Arcade-Spiel mit 30 Zielen
Ricopop: ein Abpraller-Arcade-Spiel mit 50 Levels
Lizenz und Preis
Riffvolt kostet regulär $49. Bis zum 30. November 2026 gibt die Black-Friday-Aktion 15 % Rabatt, der Preis liegt also bei $41.65, und wer zwei oder mehr Vorlagen in einer Bestellung kauft, erhält zusätzlich 5 % bis 20 % Paketrabatt. Die Lizenz ist unbefristet und nicht exklusiv, für ein Endprodukt, Ihres oder das eines Kunden. Sie dürfen Code, Grafik und Audio ändern, unsere Marke durch Ihre ersetzen und das Spiel kostenlos oder mit Werbung anbieten. Die enthaltenen Tracks nutzen Sie als Teil dieses Endprodukts; die Vorlage, ihren Code oder ihre Assets für sich allein weiterzuverkaufen ist nicht erlaubt. Sechs Monate Support sind dabei, mit Verlängerung zwölf; neue Songs, Integrationen und Hosting bieten wir separat an.
Vollständige Lizenzbedingungen lesen
Häufig gestellte Fragen
Kann ich dem Rhythmusspiel-Quellcode eigene Songs hinzufügen?
Ja. Audio, ein Chart pro Schwierigkeit und einen Eintrag in public/manifest.json ergänzen, die Charts validieren, komplett durchspielen und dann neu bauen. Ein Chart-Editor ist nicht enthalten.
Brauche ich Node.js, um Riffvolt zu nutzen?
Nicht, um den mitgelieferten Spielordner zu hosten. Node.js 24 LTS wird nur empfohlen, um nach Änderungen am TypeScript oder neuen Songs neu zu bauen.
Funktioniert es mit Touchscreens und Gamepads?
Ja. Spieler können die Spuren antippen oder ein Gamepad nutzen, die Steuerung wird in den Einstellungen festgelegt. Die Leistung hängt vom Gerät ab, testen Sie also die Geräte Ihrer Zielgruppe.
Was ist mit Bluetooth-Kopfhörern und Latenz?
Die Einstellungen enthalten eine Audio-Kalibrierung, die den Audioversatz festlegt und bei Bluetooth-Kopfhörern hilft.
Gibt es eine Online-Bestenliste?
Nein. Persönliche Rekorde werden pro Song und Schwierigkeit im Browser des Spielers gespeichert. Es gibt keine entfernten Gegner und keine gemeinsamen Ranglisten.
Für wen sich der Kauf lohnt
Riffvolt passt zu einem Portal oder einer Website, die ein Musikspiel im Katalog möchte, zu einem Studio, das einem Kunden ein gebrandetes Rhythmusspiel liefert, und zu Entwicklern, die nachlesen wollen, wie ein Spiel mit Canvas 2D und Web Audio das Timing in TypeScript bewertet. Weniger geeignet ist es, wenn Sie einen visuellen Chart-Editor für Nicht-Entwickler oder Online-Wettbewerb brauchen; beides ist Individualarbeit.