Rhythm Game Source Code: Note Chart, Timing at Pagdagdag ng Kanta
Paano iniimbak ng Riffvolt ang 12 track at 48 chart, saan napagpapasyahan ang timing at scoring, at ano ang kailangan para magdagdag ng sarili mong kanta.
Dalawang bagay talaga ang rhythm game source code: ang code na humuhusga sa timing, at ang data na nagsasabi kung kailan dumarating ang bawat note. Halos palaging gusto ng buyer na baguhin ang ikalawa, dahil ang mga bagong kanta ang nagpaparamdam na sa iyo ang rhythm game. Ang Riffvolt, ang four-lane rock rhythm template namin, ay nag-iingat ng listahan ng kanta sa iisang manifest file, at ang bawat note chart ay sa sarili nitong file, kaya ang pagdaragdag ng kanta ay trabaho sa data na may malinaw na checklist.
Tatalakayin ng gabay na ito ang package: ano ang tinutugtog nito, saan nakatira ang timing at scoring, paano magdagdag ng kanta, paano i-rebuild at i-host, ano ang pinapayagan ng lisensya, at ano ang wala sa edition. Galing ang mga pangalan ng file sa buyer guide na kasama ng laro.
Isang bagay na dapat tandaan mula sa simula: hindi tulad ng ilan sa template namin, kailangan ng Riffvolt ng rebuild pagkatapos mong baguhin ang source o magdagdag ng kanta. Ang pag-host ng ibinigay na game folder ay nangangailangan lang ng static web host.
Ano ang tinutugtog ng rhythm game source code na ito
Tapos nang four-lane rock rhythm game para sa browser ang Riffvolt. Pinipindot ng player ang mga note sa tamang oras, hinahawakan ang mahahabang note hanggang dulo, binabaluktot ang mga ito gamit ang whammy (pag-bend), at pinupuno ang ROCK gauge na nagsisimula ng overdrive, isang light show na walang dagdag na puntos at natatapos sa anumang miss. Ang katumpakan ng timing ang bumubuo ng score at combo.
- 12 buong track, bawat isa may Easy, Normal at Hard na chart, kasama ang Rock God na nagbubukas pagkatapos ng tour: 48 note chart sa kabuuan.
- Tour sa apat na venue (Garage, The road, Festival at Arena), tatlong kanta bawat isa. Ang mga bituing nakuha sa unang dalawa ang nagbubukas ng encore, at ang pagtapos sa encore ang nagbubukas ng susunod na venue, na may story scene at cosmetic na gantimpala gaya ng trail at frame.
- Free play: anumang kanta sa anumang hirap, na may personal na record na naka-save kada kanta sa browser.
- Mga kontrol: D, F, J at K bilang default, pag-tap sa lane sa touch screen, o gamepad. Nasa Settings ang key bindings.
- Ginhawa: audio calibration para sa offset, na nakakatulong sa Bluetooth headphones, reduced motion, at photosensitive mode na nagpapahina sa kislap at kidlat.
- 14 na wika ng interface.
Tingnan ang Riffvolt listing, demo at manual
Paano nakaayos ang mga file
Nasa download ang game/ (ang mga file na ide-deploy), source/ (ang TypeScript project), documentation/ (illustrated na manual sa English at Portuguese) at licenses/ (mga third-party notice). Sa loob ng source/, malinis ang paghahati ng song data at game logic.
- public/manifest.json: ang catalogue ng kanta, kasama ang tagal ng bawat kanta, audio version at path ng chart.
- public/charts/: ang 48 na note chart.
- public/audio/: ang mga recording ng track.
- src/core/chartValidate.ts: schema ng chart at validation ng timing.
- src/core/judge.ts: mga hatol sa timing.
- src/core/scoring.ts: mga patakaran sa score at combo.
- src/game/campaign.ts: pag-usad sa tour.
- src/game/session.ts: buhay ng isang kanta at pagkalkula ng resulta.
- src/i18n/locales.ts: ang 14 na diksyunaryo ng interface.
- src/net/localRecords.js: mga lokal na personal record.
- src/ui/style.css: interface at responsive layout.
Dahil magkahiwalay na file ang judge at scoring, puwede mong gawing mas mahigpit o mas maluwag ang timing window nang hindi ginagalaw kung paano nadadagdagan ang puntos, at kabaligtaran. Iyon ang paghahating dapat hanapin sa anumang rhythm code.
Pagdaragdag ng sarili mong kanta, hakbang-hakbang
Ito ang pagbabagong unang itinatanong ng buyer ng rhythm game. Walang chart editor sa package, kaya isinusulat ang mga chart bilang data, at eksaktong nakalista sa manual ang kailangan ng bawat file.
- Ilagay ang recording sa public/audio/. Gumamit lang ng audio na may karapatan ka para sa end product mo.
- Gumawa ng isang chart bawat sinusuportahang hirap sa public/charts/. Kailangan ng bawat chart ang katugmang songId, difficulty, audioVersion, offset at mga note nang nakaayos.
- Idagdag ang kanta sa public/manifest.json na may natatanging id, tagal, BPM, tema, audioVersion at mga path ng chart.
- I-check ang bawat chart gamit ang validator sa chartValidate.ts.
- Laruin ang buong track sa bawat hirap para kumpirmahin ang sync. Sinusuri ng validator ang istruktura at mga patakaran sa timing, hindi kung tama ang pakiramdam ng isang note.
- I-rebuild, saka i-upload ang bagong build.
Kung buong bagong soundtrack ang gusto mo sa halip na isang dagdag na kanta, planuhin ang trabaho kada chart: 12 kanta sa apat na hirap ay 48 chart, at bawat isa ay nararapat ng buong pagpapatakbo bago ilabas.
Rebuild at iba pang babaguhin
Inirerekomenda ang Node.js 24 LTS. Sa loob ng source/, patakbuhin ang npm ci, saka ang npm run typecheck at npm run build, at i-publish lang ang laman ng dist/. Inihahain ng npm run preview ang lokal na build para sa pagsusuri. Huwag i-upload ang node_modules/. Gumagamit ang Vite ng relative base, kaya gumagana ang build sa subfolder. Nakaayos ang runtime para mabasa; hinihingi ng manual na panatilihin ang minify:false at cssMinify:false kapag nag-rebuild ka, para mabasa pa rin ito ng susunod na tao.
- Brand: kulay at layout sa src/ui/style.css, kasama ang logo mo. Puwede ang white label, kaya ang brand mo ang papalit sa amin.
- Mga teksto: src/i18n/locales.ts, para sa mga wikang ilulunsad mo.
- Tour: ang pagkakasunod ng mga venue at kung ano ang nag-a-unlock ng ano, sa campaign.ts.
- Hirap: timing window sa judge.ts, saka ang patakaran sa score at combo sa scoring.ts.
- Mga kanta: huli, dahil bawat bagong chart ay nangangailangan ng buong pagpapatakbo.
Mag-back up bago mag-edit, baguhin ang isang feature sa isang pagkakataon, at subukan ang menu, isang kanta, pause, result screen at reload pagkatapos ng bawat pagbabago. Panatilihing pareho ang item id at save key para mapanatili ng mga umiiral na player ang kanilang record.
I-host ito, o i-embed sa portal
I-upload ang laman ng game/ sa isang folder sa HTTP(S) host mo, panatilihin ang relative path, at buksan ang address. Walang kailangang PHP, database o account. Huwag buksan ang index.html gamit ang file://; para sa lokal na test, patakbuhin ang python -m http.server 8765 sa loob ng game/.
- Kailangan ng browser ang JavaScript, ES modules, Canvas 2D at Web Audio.
- Nagbubukas lang ng audio ang mga browser pagkatapos ng unang tap o click, kaya normal ang tahimik na unang screen.
- Sa iframe, payagan ang fullscreen at autoplay.
- I-serve ang .js na may JavaScript MIME type, hindi kailanman bilang text/plain.
- Nasa loob ng build ang lahat ng runtime asset, font at library. Walang kinakailangang CDN, pero hindi ito installable na offline app.
Nakakabit sa browser origin ang mga save, kaya kapag inilipat ang laro sa ibang domain, magsisimula ulit sa wala ang mga player. Sariling save key ang edition na ito, hiwalay sa mga portal edition namin. Hindi kasama ang native app project; hiwalay na trabaho ang store release.
Ano ang wala sa edition
Lokal na browser edition ang Riffvolt. Wala itong online room o multiplayer, walang online ranking o shared leaderboard, walang advertising SDK o account, walang chart editor, walang native app at walang hosting. Nananatili sa browser ng player ang personal record at progress sa tour.
Kung angkop sa catalogue mo ang isang music game, may dalawa pang timing-based na template namin na puwedeng tumabi rito.
Pinloop: isang one-button timing arcade game na may 30 target
Ricopop: isang ricochet arcade game na may 50 level
Lisensya at presyo
$49 ang list price ng Riffvolt. Hanggang 30 Nobyembre 2026, may 15% diskuwento ang Black Friday promotion, kaya $41.65 ito, at ang pagbili ng dalawa o higit pang template sa iisang order ay may dagdag na 5% hanggang 20% bundle discount. Perpetual at non-exclusive ang lisensya, para sa isang end product, sa iyo o sa isang kliyente. Puwede mong baguhin ang code, art at audio, palitan ang brand namin ng sa iyo, at ialok ang laro nang libre o may ads. Gamitin ang kasamang track bilang bahagi ng end product na iyon; hindi mo puwedeng i-resell ang template, ang code o ang mga asset nito nang mag-isa. Kasama ang anim na buwang support, o labindalawa kung may extension; ang mga bagong kanta, integration at hosting ay may hiwalay na quote.
Mga madalas itanong
Puwede ba akong magdagdag ng sarili kong kanta sa rhythm game source code?
Oo. Idagdag ang audio, isang chart bawat hirap, at entry sa public/manifest.json, i-validate ang mga chart, laruin ang mga ito mula simula hanggang dulo, saka mag-rebuild. Hindi kasama ang chart editor.
Kailangan ko ba ng Node.js para magamit ang Riffvolt?
Hindi para i-host ang ibinigay na game folder. Inirerekomenda ang Node.js 24 LTS para lang mag-rebuild pagkatapos baguhin ang TypeScript o magdagdag ng kanta.
Gumagana ba sa touch screen at gamepad?
Oo. Puwedeng i-tap ng player ang mga lane o gumamit ng gamepad, at nakatakda ang mga kontrol sa Settings. Nakadepende ang performance sa device, kaya i-test ang mga device na target mo.
Paano ang Bluetooth headphones at latency?
May audio calibration sa Settings na nagtatakda ng audio offset, at nakakatulong ito sa Bluetooth headphones.
May online leaderboard ba?
Wala. Nae-save ang personal record kada kanta at hirap sa browser ng player. Walang remote na kalaban o shared ranking.
Sino ang dapat bumili nito
Bagay ang Riffvolt sa portal o site na gustong magkaroon ng music game sa catalogue, sa studio na maghahatid ng branded na rhythm game sa isang kliyente, at sa developer na gustong basahin kung paano humuhusga ng timing ang laro sa Canvas 2D at Web Audio sa TypeScript. Mas mahina ang bagay nito kung kailangan mo ng visual chart editor para sa hindi developer, o online na kompetisyon; parehong custom na trabaho ang dalawang iyon.