Broncode van een ritmespel: noten, timing en nummers toevoegen

Broncode van een ritmespel bestaat eigenlijk uit twee dingen: de code die de timing beoordeelt, en de data die zegt wanneer elke noot aankomt. Kopers willen bijna altijd het tweede veranderen, want nieuwe nummers maken een ritmespel van jou. Riffvolt, ons rockritmetemplate met vier banen, houdt de nummerlijst in één manifestbestand en elke notenkaart in een eigen bestand. Een nummer toevoegen is daardoor een datataak met een duidelijke checklist.

Deze gids loopt het pakket langs: wat het speelt, waar timing en scoring zitten, hoe je een nummer toevoegt, hoe je opnieuw bouwt en hosts, wat de licentie toestaat en wat de editie niet bevat. De bestandsnamen komen uit de kopersgids die bij het spel zit.

Een feit om vanaf het begin in gedachten te houden: anders dan sommige van onze templates heeft Riffvolt een nieuwe build nodig nadat je de broncode hebt gewijzigd of nummers hebt toegevoegd. Het geleverde spelmap hosten heeft alleen een statische webhost nodig.

Wat deze broncode van een ritmespel speelt

Riffvolt is een af rockritmespel met vier banen voor de browser. Spelers raken de noten op tijd, houden lange noten vast tot het eind, buigen ze met de whammy-hendel en vullen een ROCK-meter die de overdrive start, een lichtshow die geen punten geeft en eindigt bij elke misser. De nauwkeurigheid van de timing bouwt score en combo op.

• 12 volledige nummers, elk met de moeilijkheden Easy, Normal en Hard, plus Rock God, dat opent na de tour: 48 notenkaarten in totaal.
• Een tour langs vier locaties (Garage, The road, Festival en Arena), elk met drie nummers. De sterren uit de eerste twee openen het toegift, en wie het toegift afrondt, opent de volgende locatie, met verhaalscènes en cosmetische beloningen zoals sporen en kaders.
• Vrij spelen: elk nummer op elke moeilijkheid, met persoonlijke records die per nummer in de browser worden opgeslagen.
• Besturing: standaard D, F, J en K, tikken op de banen op een touchscreen, of een gamepad. Toetsinstellingen staan in Instellingen.
• Comfort: audiokalibratie voor de offset, wat helpt bij Bluetooth-koptelefoons, verminderde beweging en een fotogevoelige modus die flitsen en bliksem dempt.
• 14 interfacetalen.

Bekijk de Riffvolt-vermelding, de demo en de handleidingen

Hoe de bestanden zijn ingedeeld

Het download bevat game/ (de bestanden om te plaatsen), source/ (het TypeScript-project), documentation/ (geïllustreerde handleidingen in het Engels en Portugees) en licenses/ (vermeldingen van derden). Binnen source/ is de scheiding tussen nummerdata en spellogica helder.

• public/manifest.json: de nummercatalogus, met de duur, de audioversie en de paden naar de kaarten van elk nummer.
• public/charts/: de 48 notenkaarten.
• public/audio/: de opnames van de nummers.
• src/core/chartValidate.ts: schema- en timingvalidatie van de kaarten.
• src/core/judge.ts: de timingbeoordelingen.
• src/core/scoring.ts: de regels voor score en combo.
• src/game/campaign.ts: de voortgang door de tour.
• src/game/session.ts: de levenscyclus van een nummer en de berekening van het resultaat.
• src/i18n/locales.ts: de 14 interfacewoordenboeken.
• src/net/localRecords.js: lokale persoonlijke records.
• src/ui/style.css: interface en responsive lay-out.

Omdat de beoordeling en de scoring in aparte bestanden staan, kun je de timingvensters strenger of toleranter maken zonder de puntentelling te raken, en andersom. Dat is de scheiding die je in elke ritmecode moet zoeken.

Stap voor stap een eigen nummer toevoegen

Dit is de wijziging waar kopers van ritmespellen als eerste naar vragen. Het pakket heeft geen notenbewerker, dus de kaarten worden als data geschreven, en de handleiding somt precies op wat elk bestand nodig heeft.

1. Zet de opname in public/audio/. Gebruik alleen audio waarvan je de rechten hebt voor je eindproduct.
2. Maak één kaart per ondersteunde moeilijkheid in public/charts/. Elke kaart heeft de bijpassende songId, difficulty, audioVersion, offset en de noten in volgorde nodig.
3. Voeg het nummer toe aan public/manifest.json met een unieke id, duur, BPM, thema, audioVersion en de paden naar de kaarten.
4. Controleer elke kaart met de validator in chartValidate.ts.
5. Speel het hele nummer op elke moeilijkheid om de synchronisatie te bevestigen. De validator controleert structuur en timingregels, niet of een noot goed aanvoelt.
6. Bouw opnieuw en upload de nieuwe build.

Wil je een volledig nieuw soundtrack in plaats van één extra nummer, plan het werk dan per kaart: 12 nummers op vier moeilijkheden zijn 48 kaarten, en elk daarvan verdient een volledige doorspeelbeurt vóór de release.

Opnieuw bouwen en wat je verder aanpast

Node.js 24 LTS wordt aanbevolen. Voer in source/ npm ci uit, daarna npm run typecheck en npm run build, en publiceer alleen de inhoud van dist/. npm run preview serveert de lokale build om te bekijken. Upload node_modules/ niet. Vite gebruikt een relatief basispad, dus de build werkt ook in een submap. De geleverde runtime is opgemaakt om te lezen; de handleiding vraagt je bij het opnieuw bouwen minify:false en cssMinify:false te houden, zodat de volgende persoon hem nog kan lezen.

1. Huisstijl: kleuren en lay-out in src/ui/style.css, plus je logo. Witlabel is toegestaan, dus je eigen merk mag het onze vervangen.
2. Teksten: src/i18n/locales.ts, voor de talen die je levert.
3. Tour: de volgorde van de locaties en wat wat ontgrendelt, in campaign.ts.
4. Moeilijkheid: timingvensters in judge.ts, daarna regels voor score en combo in scoring.ts.
5. Nummers: als laatste, omdat elke nieuwe kaart een volledige doorspeelbeurt nodig heeft.

Maak een back-up voordat je wijzigt, verander één functie tegelijk, en test na elke wijziging het menu, een nummer, pauze, het resultaatscherm en een herlaadbeurt. Houd item-id's en opslagsleutels stabiel, zodat bestaande spelers hun records behouden.

Hosten, of insluiten in een portal

Upload de inhoud van game/ naar een map op je HTTP(S)-host, houd de relatieve paden aan en open het adres. Er is geen PHP, database of account nodig. Open index.html niet via file://; voor een lokale test draai je python -m http.server 8765 in game/.

• De browser heeft JavaScript, ES-modules, Canvas 2D en Web Audio nodig.
• Browsers ontgrendelen audio pas na de eerste tik of klik, dus een stil eerste scherm is normaal.
• Sta in een iframe fullscreen en autoplay toe.
• Serveer .js met een JavaScript-MIME-type, nooit als text/plain.
• Alle runtime-assets, lettertypen en bibliotheken zitten in de build. Er is geen verplicht CDN, maar dit is geen installeerbare offline-app.

Opslag hoort bij de browseroorsprong, dus als je het spel naar een ander domein verhuist, begint de speler opnieuw. Deze editie gebruikt eigen opslagsleutels, los van onze portaleditities. Native appprojecten zijn niet inbegrepen; een release in een winkel is apart werk.

Wat de editie niet bevat

Riffvolt is de lokale browseredities. Er zijn geen online kamers of multiplayer, geen online ranglijst of gedeeld scorebord, geen advertentie-SDK of account, geen notenbewerker, geen native apps en geen hosting. Persoonlijke records en tourvoortgang blijven in de browser van de speler.

Past een muziekspel in je catalogus, dan passen daar misschien twee andere op timing gebaseerde templates van ons naast.

Pinloop: een arcadespel met één knop en timing, met 30 doelen

Ricopop: een stuiterend arcadespel met 50 levels

Licentie en prijs

Riffvolt heeft een lijstprijs van $49. Tot 30 november 2026 geldt de Black Friday-actie van 15% korting, dus het kost $41,65. Twee of meer templates in één bestelling krijgen daarnaast een bundelkorting van 5% tot 20%. De licentie is eeuwigdurend en niet-exclusief, voor één eindproduct, van jou of van één klant. Je mag de code, kunst en audio wijzigen, ons merk door het jouwe vervangen en het spel gratis of met advertenties aanbieden. Gebruik de meegeleverde nummers als onderdeel van dat eindproduct; je mag het template, de code of de assets niet op zichzelf doorverkopen. Zes maanden support zijn inbegrepen, of twaalf met de extensie; nieuwe nummers, integraties en hosting worden apart geofferd.

Lees de volledige licentievoorwaarden

Veelgestelde vragen

Kan ik mijn eigen nummers aan de broncode van het ritmespel toevoegen?

Ja. Voeg de audio toe, één kaart per moeilijkheid en een item in public/manifest.json, valideer de kaarten, speel ze door en bouw daarna opnieuw. Een notenbewerker zit er niet bij.

Heb ik Node.js nodig om Riffvolt te gebruiken?

Niet om de geleverde spelmap te hosten. Node.js 24 LTS wordt alleen aanbevolen om opnieuw te bouwen na het wijzigen van de TypeScript of het toevoegen van nummers.

Werkt het met touchschermen en gamepads?

Ja. Spelers kunnen op de banen tikken of een gamepad gebruiken, en de besturing staat in Instellingen. De prestaties hangen af van het apparaat, dus test de apparaten waarop je mikt.

Hoe zit het met Bluetooth-koptelefoons en vertraging?

In de instellingen zit audiokalibratie, die de audio-offset instelt en helpt bij Bluetooth-koptelefoons.

Is er een online ranglijst?

Nee. Persoonlijke records worden per nummer en moeilijkheid in de browser van de speler opgeslagen. Er zijn geen tegenstanders op afstand en geen gedeelde ranglijsten.

Voor wie het geschikt is

Riffvolt past bij een portal of site die een muziekspel in de catalogus wil, bij een studio die een gebrandd ritmespel voor één klant levert, en bij een ontwikkelaar die wil lezen hoe een Canvas 2D- en Web Audio-spel timing beoordeelt in TypeScript. Minder geschikt is het als je een visuele kaarteditor voor niet-ontwikkelaars nodig hebt, of online competitie; beide zijn maatwerk.

Speel de Riffvolt-demo en koop de licentie

Nieuwe nummers of een gebrandde versie? Vraag een offerte aan