Källkod till rytmspel: notkartor, timing och hur du lägger till låtar
Hur Riffvolt lagrar 12 spår och 48 notkartor, var timing och poäng avgörs och vad som krävs för att lägga till en egen låt.
Källkod till rytmspel är egentligen två saker: koden som bedömer timingen och datan som säger när varje not kommer. Köpare vill nästan alltid ändra det andra, eftersom nya låtar är det som gör ett rytmspel till deras eget. Riffvolt, vår rockrytmmall med fyra banor, håller låtlistan i en manifestfil och varje notkarta i en egen fil, så att en ny låt blir ett datajobb med en tydlig checklista.
Den här guiden går igenom paketet: vad det spelar, var timing och poäng finns, hur du lägger till en låt, hur du bygger om och lägger ut spelet, vad licensen tillåter och vad utgåvan utelämnar. Filnamnen kommer från köparguiden som följer med spelet.
Ett faktum att ha i minnet från början: till skillnad från några av våra mallar behöver Riffvolt byggas om när du ändrar källkoden eller lägger till låtar. Att lägga ut den medföljande spelmappen kräver bara en statisk webbhosting.
Vad källkoden till rytmspelet spelar
Riffvolt är ett färdigt rytmspel för webbläsaren med fyra banor och rockmusik. Spelarna träffar noter i rätt tid, håller långa noter ända till slutet, böjer dem med whammy (tonböj) och fyller en ROCK-mätare som startar overdrive, ett ljusspel som inte ger några poäng och tar slut vid varje miss. Träffsäkerheten i timingen bygger poäng och combo.
- 12 hela låtar, var och en med Easy, Normal och Hard (lätt, normal och svår), plus Rock God, som öppnas efter turnén: 48 notkartor totalt.
- En turné genom fyra arenor, Garage, The road, Festival och Arena, med tre låtar i varje. Stjärnor från de två första öppnar extranumret (encore), och när extranumret är klart öppnas nästa arena, med berättelsescener och kosmetiska belöningar som spår och ramar.
- Fri spelning: vilken låt som helst i vilken svårighetsgrad som helst, med personliga rekord sparade per låt i webbläsaren.
- Kontroller: D, F, J och K som standard, tryck på banorna på en pekskärm eller använd en gamepad. Tangentbindningarna finns under Settings (inställningar).
- Komfort: ljudkalibrering av offseten, vilket hjälper med Bluetooth-hörlurar, reducerad rörelse och ett photosensitive mode (fotosensitivt läge) som dämpar blixtar och blinkningar.
- 14 gränssnittsspråk.
Se Riffvolt-sidan, demon och manualerna
Hur filerna är organiserade
Nedladdningen innehåller game/ (filerna som läggs ut), source/ (TypeScript-projektet), documentation/ (illustrerade manualer på engelska och portugisiska) och licenses/ (tredjepartsnotiser). Inne i source/ är uppdelningen mellan låtdata och spellogik tydlig.
- public/manifest.json: låtkatalogen, med varje låts längd, ljudversion och sökvägar till notkartorna.
- public/charts/: de 48 notkartorna.
- public/audio/: inspelningarna av låtarna.
- src/core/chartValidate.ts: schema och timingvalidering för notkartor.
- src/core/judge.ts: timingbedömningen.
- src/core/scoring.ts: regler för poäng och combo.
- src/game/campaign.ts: turnéns förlopp.
- src/game/session.ts: en låts livscykel och resultatberäkningen.
- src/i18n/locales.ts: de 14 gränssnittsordböckerna.
- src/net/localRecords.js: lokala personliga rekord.
- src/ui/style.css: gränssnitt och responsiv layout.
Eftersom bedömningen och poängsättningen är separata filer kan du göra timingfönstren strängare eller mer förlåtande utan att röra hur poängen räknas, och tvärtom. Det är den uppdelningen du ska leta efter i all rytmkod.
Lägg till en egen låt, steg för steg
Det här är ändringen som köpare av rytmspel frågar efter först. Paketet har ingen notkarteditor, så notkartorna skrivs som data, och manualen listar exakt vad varje fil behöver.
- Lägg inspelningen i public/audio/. Använd bara ljud som du har rättigheterna till för din slutprodukt.
- Skapa en notkarta per stödd svårighetsgrad i public/charts/. Varje karta behöver matchande songId, difficulty, audioVersion, offset och noterna i ordning.
- Lägg till låten i public/manifest.json med ett unikt id, längd, BPM, tema, audioVersion och sökvägarna till kartorna.
- Kontrollera varje karta med validatorn i chartValidate.ts.
- Spela hela låten i varje svårighetsgrad för att bekräfta synken. Validatorn kontrollerar struktur och timingregler, inte om en not känns rätt.
- Bygg om och ladda upp det nya bygget.
Vill du ha en helt ny ljudbild i stället för en extra låt, planera arbetet per karta: 12 låtar i fyra svårighetsgrader är 48 kartor, och var och en förtjänar en hel genomspelning före lansering.
Bygg om och övriga ändringar
Node.js 24 LTS rekommenderas. Inne i source/ kör du npm ci, sedan npm run typecheck och npm run build, och publicerar bara innehållet i dist/. npm run preview serverar det lokala bygget för granskning. Ladda inte upp node_modules/. Vite använder en relativ bas, så bygget fungerar i en undermapp. Det levererade körbara programmet är formaterat för läsning. Manualen ber dig behålla minify:false och cssMinify:false när du bygger om, så att nästa person fortfarande kan läsa det.
- Varumärke: färger och layout i src/ui/style.css, plus din logotyp. White label är tillåtet, så ditt varumärke kan ersätta vårt.
- Texter: src/i18n/locales.ts, för de språk du levererar.
- Turnén: ordningen på arenorna och vad som låser upp vad, i campaign.ts.
- Svårighet: timingfönstren i judge.ts, sedan reglerna för poäng och combo i scoring.ts.
- Låtar: sist, eftersom varje ny karta behöver en hel genomspelning.
Säkerhetskopiera före redigering, ändra en funktion i taget och testa menyn, en låt, paus, resultatskärmen och en omladdning efter varje ändring. Behåll objekt-ID:n och sparnycklar stabila så att befintliga spelare behåller sina rekord.
Lägg ut det eller bädda in det i en portal
Ladda upp innehållet i game/ till en mapp på din HTTP(S)-hosting, behåll de relativa sökvägarna och öppna adressen. Ingen PHP, databas eller konto behövs. Öppna inte index.html via file://. För ett lokalt test kör du python -m http.server 8765 inne i game/.
- Webbläsaren behöver JavaScript, ES-moduler, Canvas 2D och Web Audio.
- Webbläsare låser upp ljud först efter det första trycket eller klicket, så en tyst första skärm är normalt.
- I en iframe, tillåt fullskärm och autoplay.
- Servera .js med en JavaScript-MIME-typ, aldrig som text/plain.
- Alla körtidstillgångar, typsnitt och bibliotek finns i bygget. Det finns inget obligatoriskt CDN, men det är inte en app som kan installeras för användning offline.
Sparade data hör till webbläsarens ursprung, så att flytta spelet till en annan domän startar spelarna från början. Den här utgåvan använder egna sparnycklar, separata från våra portalutgåvor. Native-appprojekt ingår inte; en publicering i butik är ett separat arbete.
Vad utgåvan inte innehåller
Riffvolt är den lokala webbläsarutgåvan. Den har inga onlinerum eller multiplayer, ingen onlineranking eller gemensam topplista, ingen annons-SDK eller något konto, ingen notkarteditor, inga native-appar och ingen hosting. Personliga rekord och turnéframsteg stannar i spelarens webbläsare.
Om ett musikspel passar din katalog kan två andra timingbaserade mallar av oss passa bredvid det.
Pinloop: ett arkadspel med timing och en knapp, med 30 mål
Ricopop: ett ricochet-arkadspel med 50 nivåer
Licens och pris
Riffvolt har listpriset 49 USD. Till och med 30 november 2026 ger Black Friday-kampanjen 15 % rabatt, så den kostar 41,65 USD. Om du köper två eller fler mallar i samma order läggs ett paketrabatt på 5 % till 20 % till. Licensen är evig och icke-exklusiv, för en slutprodukt, din eller en kunds. Du får ändra koden, grafiken och ljudet, ersätta vårt varumärke med ditt och erbjuda spelet gratis eller med annonser. Använd de medföljande låtarna som en del av den slutprodukten. Du får inte sälja mallen, dess kod eller dess tillgångar för sig. Sex månaders support ingår, eller tolv med tillägget. Nya låtar, integreringar och hosting offereras separat.
Vanliga frågor
Kan jag lägga till egna låtar i källkoden till rytmspelet?
Ja. Lägg till ljudet, en karta per svårighetsgrad och en post i public/manifest.json, validera kartorna, spela igenom dem och bygg sedan om. En notkarteditor ingår inte.
Behöver jag Node.js för att använda Riffvolt?
Inte för att lägga ut den medföljande spelmappen. Node.js 24 LTS rekommenderas bara för att bygga om efter att du ändrat TypeScript eller lagt till låtar.
Fungerar det med pekskärmar och gamepads?
Ja. Spelarna kan trycka på banorna eller använda en gamepad, och kontrollerna ställs in under Settings. Prestandan beror på enheten, så testa på de du riktar dig till.
Hur är det med Bluetooth-hörlurar och fördröjning?
Settings innehåller ljudkalibrering, som ställer in ljudoffseten och hjälper med Bluetooth-hörlurar.
Finns det en onlineranking?
Nej. Personliga rekord sparas per låt och svårighetsgrad i spelarens webbläsare. Det finns inga fjärrmotståndare eller gemensamma rankningar.
Vem som ska köpa den
Riffvolt passar en portal eller sajt som vill ha ett musikspel i sitt utbud, en studio som levererar ett varumärkt rytmspel till en kund och en utvecklare som vill läsa hur ett Canvas 2D- och Web Audio-spel bedömer timing i TypeScript. Den passar sämre om du behöver en visuell notkarteditor för icke-utvecklare eller onlinetävlan. Båda är skräddarsytt arbete.