NIDELVEN RUSH
– Et teamdrevet spillutviklingsprosjekt –
Utfordringer og løsninger
Prosess og utvikling
Resultat
Tidlig støtte vi på utfordringer med bildestier og skalering. Løsningen ble å samle alle png-filer i én strukturert mappe og laste dem konsekvent derfra.
Brukte for mye tid på å forstå CSS-animasjon med keyframes, og erfarte hvor lett det er å bli for detaljfokusert. Selv om det var nyttig erfaring å forstå bruk av spritesheets, førte det til tydeligere prioriteringer videre i prosjektet.
Oversikt
Nidelven Rush er et pikselert endless-runner-spill der trønderen skal padle nedover Nidelven i kajakk, og unngå hindringer på veien for å samle poeng.
Utvikle et spill i team innenfor en stram tidsramme. Utfordringen var å finne et konsept som var realistisk å gjennomføre, samtidig som det ga rom for læring og samarbeid.
Bygge et enkelt, spillbart nettleserspill og samtidig lære grunnleggende frontend-utvikling gjennom praksis. Prosjektet skulle resultere i et fungerende produkt med både nettside og innebygd spill – ikke bare en prototype.
Vi avgrenset teknologistacken for å sikre gjennomførbarhet, og bygget spillet i ren HTML, CSS og JavaScript. Spillet ble forenklet til én tydelig kjernehandling: å hoppe for å unngå hindringer.
Oppgave
Hovedmål
Løsning
Tidlig prototype brukt til å teste spillflyt og grunnleggende logikk som gravitasjon, kollisjoner og poengberegning.
Figma ble brukt til å definere strukturen, flyt og visuell retning før implementering av nettsiden som skulle inneha spill-grensesnittet. Prototypen fungerte som et felles referansepunkt i teamet.
Bootstrap ble brukt tidlig i kodingen for å opprettholde en responsiv layout, og løsningene ble videreutviklet og kvalitetssikret ut fra Figma-prototypen tilpasset ulike skjermstørrelser.
Filhåndtering
Tidsprioritering
Avgrensninger
Mobilprototype – planlagt løsning
En begrenset teknologistack førte til utfordringer knyttet til både animasjon og lagring av poengscore. Dette ble løst ved å forenkle funksjonaliteten og implementere en lokal highscore-tabell ved hjelp av JSON og localStorage.
Eksempel på spritesheet-animasjon, en indistristandard for å kode datasparende animasjoner. Prosessen ga innsikt å muligheter og begrensninger ved bruk av CSS-keyframes – men var samtidig en klar tidstyv i retrospekt.
Hvem skulle tro at det å få en figur til å hoppe over hindringer på en skjerm ville ta rundt 300 timer med arbeid, men så mye lå faktisk bak noe som kan virke så enkelt.
Resultatet kan spilles enkelt på noen minutter. Det mest verdifulle lå i arbeidet med å forstå begrensningene og ta riktige beslutninger underveis i teamprosjektet Nidelven RUSH.
Spritesheet av en måke med 6 animasjons-frames i ett sammenhengende sheet.
Implementert mobilgrensesnitt
