The Lost Page är ett spel du kan spela om du råkar skriva fel adress på Bazooka.se och hamnar på vår 404-sida. Om vi ska vara helt ärliga så är det bara ett roligt spel vi gjorde för att vi gillar att göra spel och för att vi tror att du gillar att spela dem.

Har du inte testat spelet? Gör det här!

Du spelar som vår VD Petra Blixman i ett svart-gult universum där du dykt in i en slags Matrix av datorkod. Tänk lite som att filmen Tron gjort ett kärleksbarn med spelet Minit och då har du The Lost Page. Spelet är ganska enkelt och allt du behöver göra är att i sökandet efter den försvunna sidan undvika de farliga kolosserna av drivande HTML-kod och text som kommer emot dig. När du väl hittat den försvunna sidan kan du fortsätta längre för att se hur mycket poäng du lyckas samla på dig.

En snabbgenomgång av spelets utvecklingsstadier

Vi gjorde The Lost Page som en kul grej under en av våra innovationsdagar, som är en dag då vi på Bazooka pausar vårt arbete och istället riktar all vår kreativa energi på något vi själva väljer. Det kan vara för en fiktiv kund, befintlig kund eller bara något helt annat som är utvecklande och kul. Även om vi älskar våra vanliga uppdrag är det ibland spännande att utmana sig med något nytt! Den här innovationsdagen råkade dessutom sammanfalla med ett gamejam (UDGJ#1) som hölls av några utvecklare på Defold.

Defold är en spelmotor som utvecklas av spelföretaget King och som är helt gratis. Spelmotorn har en underbar och hjälpsam gemenskap runt sig och har används av några bazookianer i projekt utanför arbetet. Alltsedan flash dog har det känts lite tomt. Visst finns det javascriptlösningar att ta till, men glädjen från tiden då designers och utvecklare kunde jobba sida vid sida för att ta fram helknäppa och snygga interaktiva lösningar är svår att ersätta? Defold har återskapat den känslan, i alla fall för vår del. Och som grädde på moset har vi även fått äran att jobba med Defold och utvecklar just nu deras webbplats.

Defolds logotyp

Ett gamejam är ett tillfälle då flera personer träffas för att göra spel samtidigt. Man kan arbeta i grupp eller var för sig. Det kan sträcka sig över en dag, en vecka eller mer och kretsar ofta kring ett tema. Det finns en väldig massa gamejams och det är ofta stressigt men väldigt roligt att vara med. Många kända spel har börjat som små spel-embryon på ett jam för att sedan utvecklas vidare till riktiga produkter och ibland t.o.m storsäljare. På Defolds gamejam som vi deltog i på vår innovationsdag var temat ”Boss”. Vi valde såklart att bygga ett spel kring vår favoritboss – Petra!

En bra idé

När man gör ett spel på ett gamejam eller under väldigt kort tid, så gäller det att först komma på en rolig idé som alla i teamet tror på. Den får inte vara för omfattande, eftersom det är väldigt bråttom under ett jam. Helst ska det till och med finnas en plan B om det inte blir bra. Därför tjuvstartade vi med en lunch några dagar innan för att kasta ur oss massor av idéer. Vi startade en Trello och började samla galenskaperna där. Det här var innan temat Boss var känt för oss så därför blev det en hel del saker som vi strök senare. Men att göra det här arbetet i förväg hjälpte oss ändå eftersom det är så brainstorming funkar då den är som bäst; små fragment av idéer kastas ut och blandas och korsas med andras tankar. Det får gro ett tag och helt plötsligt börjar något unikt växa fram. Något vi kände tidigt och var överens om var att vi ville ta fram ett spel med få färger. Därför kändes det naturligt att utgå från Bazookas profil med vitt, gult och svart.

Själva spelet var tvunget att vara enkelt för att vi skulle kunna hinna klart i tid. En dag går väldigt fort och även om allt skulle gå perfekt räcker det inte långt. Därför ville vi ha ett spel som inte hade för komplicerad mekanism, som fungerar både på dator och mobil utan anpassning och inte kräver omfattande design av banor. Vi valde en ”top down scroller” i stil med det klassiska 1942, fast utan vapen. Även om vi heter Bazooka så är vi ett fredligt gäng. Spelet går ut på att ta sig så långt det går utan att krascha och det betyder att allt vi behöver göra är att öka hastigheten på spelet för att öka svårighetsgraden.

Att göra ett spel

Vi var fyra stycken i gruppen: Simon Olsson och Emil Hagbo (utvecklare) och Elias Wigert och Calle Stenfelt (design & animation). Alla började med sina olika delar direkt och det fanns redan från start en lång lista med saker att göra.

Vi behövde snabbt få en gemensam bild av vilka vyer som behövdes och vilka delar som vi behövde ta  fram. Här gick det undan med blyertspennor och whiteboards. Alla var ivriga att komma fram till en lösning så att vi snabbt skulle kunnabörja producera själva spelet.

En whiteboard med bilder

En whiteboard som visar det första konceptet

Sen var det dags för design av karaktären och att få den godkänd av spelets huvudperson – Petra. Samtidigt som Calle och Elias ägnade sig åt designen, jobbade Simon och Emil med de tekniska grunderna.

Vi märkte snart att en karaktär som flyger runt ser ganska stel ut. Därför gjorde vi lite animationer i 3D som sedan renderades ut som flip-book-animationer, alltså på samma sätt som en tecknad film fungerar med en serie av bilder efter varandra. Samma teknik användes för att ge knapparna i spelet en extra skruvad känsla.

Elias jobbade parallellt med hindren i spelet vilka består av olika tecken som trasslat ihop sig till farliga rymd-asteroider. Arbetet var förhållandevis svårt och tidskrävande men det var en så viktig del av spelet att det var värt att lägga tid och energi där. Senare under utvecklingen kom vi på att vi kunde lägga på blinkande ögon på rymd-asteroiderna, vilket gav hela spelet mer liv.

Ett blinkande öga som ska ligga på ett hinder

För att ge spelet känsla så gällde det att få så mycket “bang for the buck” som möjligt för våra timmar. I Indie-världen brukar det betyda två saker: screen-shake (att skärmen skakar till när något händer) och partiklar. I det här fallet sparade vi inte på krutet utan låter partiklarna flyga åt alla håll hela tiden. Om man krockar och dör blir det tex en rejäl stjärnsmäll som vi hämtade inspirationen till från det från det klassiska Nintendospelet Megaman.

Det gäller att passa sig för vassa hinder

Början av utveckling

Vi började med att koda upp grunderna av spelet, alltså de inflygande hindren och möjligheten att röra på Petra. Det gjorde vi för att vi skulle kunna testa spelidén så snabbt som möjligt.

Sen fyllde vi på med själva logiken (som gör att man dör om man träffar hinder), poängräkningen, parallax-effekterna (att olika föremål har olika hastigheter för att skapa känslan av djup) och en bas av spelets flöde med en startskärm och knappar för att kunna starta om spelet.

För att få spelet att kännas mer levande så bestämde vi oss för att inte bygga banor utan istället förlita oss på slumpen till viss del. Det gjorde vi genom att först skapa ett antal former som sedan skulle bytas ut till riktig grafik. På så sätt kunde vi direkt börja bygga upp hinder med de formerna innan grafiken var gjord. Vi skapade 20 olika hinder som använde formerna. Sedan speltestade vi och gjorde små ändringar längs vägen för att justera svårighetsgraden.

Skärmdump från defold som visar hinder

Skärmdump från Defolds editor som visar ett hinder bestående av två former.

Ökande svårighetsgrad

Efter att vi fått en fungerande prototyp kunde vi arbeta mer i detalj med de olika momenten. En av de viktigaste delarna var att få spelet att kännas utmanande.

Med slumpgenererade hinder blev det lätt att göra spelet oändligt, men för att få spelaren att stanna kvar länge behövde vi lägga till en större utmaning. Vi valde att öka svårighetsgraden med två olika parametrar, som båda stegrar ju längre spelsessionen fortlöper.

Den första, kanske mest uppenbara, parametern är hastigheten som alla hinder rör sig i. Det finns ett tak för hur snabbt det kan gå, men i övrigt ökar hastigheten för varje sekund spelaren överlever bland HTML-block och hinder.

När alla hinder rör sig snabbare var vi också tvungna att öka hastigheten med vilken nya hinder skapas, så att spelaren inte behöver vänta efter att ha klarat av en sektion. Med hjälp av dessa två parametrar kunde vi skapa en mer dynamisk spelupplevelse, och med hjälp av slumpgeneratorn för nya hinder blir aldrig två spelsessioner identiska.

Responsiva rörelser

Med den ökande svårighetsgraden var det tydligt att vi även behövde ge spelaren möjligheten att klara sig så länge som möjligt.

Vi hade i början en tanke om att begränsa hastigheten på rörelserna men märkte snabbt att spelet krävde mer responsivitet, då den ökade hastigheten snabbt blev för svår att hantera.

Skrämdump från Defold

Det här är skriptet som kontrollerar vår hjälte

Det var även viktigt att skapa en bra upplevelse både på mobil och desktop, då vi idag ser betydligt högre trafik från mobila enheter på bazooka.se.

Resultatet blev ett touch-baserat gränssnitt för mobil och musrörelser för desktop. Petra följer direkt spelarens rörelser för att undvika alla snäva vinklar och rasande hinder.

Ny grafik

Med en mer polerad version av de olika spelmomenten kunde vi nu fokusera på att uppdatera grafiken i spelet. Då vi tidigare arbetat med olika tillfälliga grafiska element var det dags att lägga in den “riktiga” grafiken.

Eftersom Calle och Elias hade utgått ifrån de hinder vi arbetat med som tillfällig grafik kunde vi lätt uppdatera existerande objekt och välkomna spelaren in i den dynamiska världen av HTML-kod.

Hinder i testversion och slutgiltig version

Vi introducerade även en ny funktion, så att varje hinder driver i rymden med en liten rotation. Förutom att göra världen mer levande resulterade det också i en mer dynamisk svårighetsgrad, då spelaren även behöver ta hänsyn till hur olika hinder roterar i förhållande till varandra.

Ljud och musik

Det här viktiga och tyvärr ofta nedprioriterade området skapar en stor del av upplevelsen. Det fanns helt enkelt inte tid att göra allt vi skulle vilja, men som tur är blev vi räddade av att vi har en legendar inom chip-musik här på Bazooka – Fredrik Stolpe aka Cornbeast som lånade ut musik till oss. Låten i spelet heter Ghost train och den gjordes inte i samband med det här projektet, utan råkade bara passa väldigt bra. Vi använde också några ljud från gratissajter för kollisioner och lite andra effekter.

Knyta ihop säcken

När det började närma sig slutet handlade arbetet i första hand om polering och finjustering. Den här sista biten innan målgång kan vara väldigt ansträngande, men samtidigt är det här som spelet verkligen blir roligt att spela. Känslan av ”oj, det är ju ett spel nu” börjar liksom infinna sig. En av de sista sakerna vi gjorde var vyn då man tillslut hittar sidan i spelet. Det som sker då (spoiler alert) är att man skickas vidare till vår ”Om oss”-sida. Självklart krävs det 404 poäng för att klara spelet. Det som händer i bakgrunden när man hittar sidan är att det sker en omdirigering i webbläsaren till en annan sida på Bazooka.se. Om du inte vill fortsätta samla poäng och spela vidare. Det går också bra så klart!

Snurrande knappar gjordes i 3D

Lägga upp spelet

Nu var det dags för oss att lägga in The Lost Page på vår 404-sida. Det är magiskt enkelt att exportera från Defold och så fort det var klart lade vi ut det på webben och började skriva den här artikeln.

Sammanfattningsvis kan man väl säga att det är slitigt att göra spel på så här kort tid, men att det är väldigt roligt och otroligt givande. Det vore kul att se vad vi skulle kunna åstadkomma om vi hade lite mer tid. Kanske ett nytt projekt hägrar längre fram?