Player Experiences in Integrated Mobile / Web Browser Games En Dinolabaktivitet utförd av Hello Future Programmering: Andreas Bodén Design & Rapport: Sebastian Hall
Sammanfattning Hello Future genomförde en Dinolabaktivitet för att utreda distribuerade interfaces över webläsare på desktop och i mobilen i realtid. Detta med Node.js och sockets.io som plattformar. En spelprototyp utvecklades och utvärderades och många insikter genererades i processen. Detta är några nyckelinsikter: Node.js http://nodejs.org/ och socket.io http://socket.io/ är väl lämpade teknologier för applikationer av detta slag och skulle gå att använda i flera olika sammanhang och många olika typer av applikationer där realtidssessioner ska delas i flera browsers Ljud är minst lika viktigt som bild i denna typ av applikationer och bör undersökas vidare Placeringen av input och output är en nyckel bakom effektiva distribuerade interfaces av de slag som prototypen var. Summary Hello Future performed a Dinolab activity to investigate distributed interfaces across desktop browsers and mobile devices in real time. This was done with Node.js and sockets.io as platforms. A playable prototype was developed and evaluated internally, and many insights were generated in the process. These are some of the key findings: Node.js http://nodejs.org/ and socket.io http://socket.io/ are well suited for applications of this nature, and can be used in many different application types and contexts where the browsers of mobile devices and desktops are shared Sound is incredibly important in these types of applications and should be investigated further The placement of input and output is a key property in making effective distributed interfaces of this type. Kod: http://stickfigureskating.hellofuturelab.se/stickfigureskating.zip
Bakgrund Förr var användning av interaktiva system ofta knutna till en modalitet. Nu är det inte ovanligt att användare växlar enheter beroende på kontext. Komersiella produkter som Wii U visar vidare att denna utveckling även gäller inom spelsektorn, och är ett av många exempel på hur distribuerade interfaces kan se ut i praktiken. Som utvecklare av tjänster och produkter baserade på webteknologier ville vi utreda möjligheterna som distribuerade interfaces mellan browsers i telefon och på en dator kan ha. Vi ville utreda upplevelser som kan skapas genom att koppla samman en instans av ett program körandes i en webläsare på en dator med webläsaren i bärbara enheter. För att göra detta blev aktiviteten att testa denna interaktion i en spelkontext där de mobila enheterna används som spelkontroller och att spelarna delar skärmen på datorn. Aktivitetens mål blev kort sagt att skapa en spelbar prototyp baserad på denna interaktionsmodell och utvärdera den. Målet med detta var att generera insikter och kunskap kring teknik och design i denna kontext. Prototyp För att kunna utvärdera hur väl interaktionen mellan telefonen och datorns webläsare fungerade i praktiken behövde vi bygga en spelbar prototyp. Det blev viktigt i detta fall att skapa en prototyp av hög fidelitet. Om en prototyp av detta slag har för låg fidelitet är det svårt att utvärdera begränsningar och möjligheter den tekniska lösningen har. Genom att göra en detaljerad prototyp med utvecklad spelfunktionalitet kunde vi utvärdera allt från responstid till koppling mellan interfaces i den lilla och stora skärmen och hur det hela binds samman och fungerar på ett övergripande sätt. Stick Figure Skating Vi beslutade att göra ett konståkningsspel där två konståkare tävlar om att först utföra trick. Spelaren gör detta genom att härma en sekvens av pilar som visas på datorskärmen. Sekvensen knappas in på telefonen så snabbt som möjligt. Spelaren som snabbast utför detta och trycker på Jump får 100 poäng. Trycker spelaren in fel sekvens eller trycker på Jump -knappen innan sekvensen är korrekt inmatad så ramlar skridskoåkaren och spelaren har inte längre chansen att genomföra tricket. Den andra spelaren kan nu i lugn och ro genomföra tricket och ta poängen, eller så misslyckas även denne och spelet går automatiskt vidare till nästa trick. Denna process återupprepas sedan 8 gånger tills en vinnare står klar.
Konceptskiss/Wireframe När spelaren har connectat så visas flaggan på stora skärmen och telefonen samtidigt
Handkontrollen i telefonen Tekniskt implementering Node.js blev plattformen vi valde att använda för utvecklingen av spelprototypen. Node.js använder en eventdriven modell och är väl lämpad för nätverksdrivna applikationer som i realtid hanterar datainput och output distribuerat över flera enheter. Specifikt används sockets.io för att hantera websockets mellan browser och klient. Nyckelfiler Filnamn server.coffee public/desktop.coffee public/mobile.coffee Funktion Node server Klient till app.coffee. Körs i browser Klient till server.coffee. Körs i mobilen För att spela spelet och lära sig av koden kan man plocka hem spelets kod http://stickfigureskating.hellofuturelab.se/stickfigureskating.zip och köra npm install för att installera spelets dependencies och sedan coffee app.coffee för att starta spelet på sin lokala maskin. Koppla sedan in dig på samma adress, med tillägget /connect/cccp eller /connect/america. Det går också att skanna QR-koden för att koppla telefoner till spelsessionen.
När två spelare är uppkopplade kan man trycka på knappen Figure Skate! och påbörja spelet. Inledningsvis var vi intresserade av att utforska fler av telefonens sensorer som accelerometern, men prototypens utformning gjorde att detta begränsades till att telefonen lyssnar efter shake events. Det betyder att man kan knappa in tricket, och i stället för att trycka på Jump -knappen kan man göra en hopp -gest (eller andra skakningar) med telefonen för att hoppa med karaktären. Insikter från skapandet Visa vem som styr vad När en koppling mellan telefoner och webbläsare på en dator fungerade blev det snabbt uppenbart att kopplingen behövde vara tydligare. Det var helt enkelt svårt att förstå vem som styrde vad. Detta förbättrades något av att vi lade till distinkta flaggor för att representera konståkarna. Vi visade samma flagga på telefonen och på skärmen för att förmedla denna koppling på ett tydligt sätt. Det finns fortfarande mer man skulle kunna göra för att förbättra detta. Flaggan hjälper spelaren att förstå att enheten är uppkopplad och vilken spelare enheten styr Under utvecklingen av prototypen visade sig vikten av att ge rätt feedback i rätt kanal vid rätt tidpunkt vara mycket hög. Spelets flöde är utformat så att spelaren är tvungen att titta på den stora skärmen för att se sekvensen som ska tryckas in för att klara hoppet. Efter man har sett sekvensen tittar man generellt på telefonen där man ska knappa in den. När det är gjort tittar man tillbaka på den stora skärmen för att få feedback. Vem var det som vann? Tryckte jag fel? Var jag inte snabbast även om jag gjorde rätt?
Under testning uppfattades detta som lite otydligt. Vi åtgärdade ej detta i prototypen men jag tror att experimentering och tesning av olika typers feedback i de två kanalerna samtidigt skulle kunna ge stora resultat. Kanske skulle ljudeffekter och starkare visuella ledtrådar kunna hjälpa. Denna balans upplever vi som en av nycklarna bakom att skapa effektiva interfaces distribuerade över flera enheter. Sammanfattningsvis: Visa tydligt vem som styr vad och med vilken enhet i alla skeden av spelet Bind samman upplevelsen (på skärmen och off screen) Arbeta med balans och uppdelning av feedback alla tillgängliga kanaler. Testa, testa! Speltestning Speltestningen strukturerades så att vi samlades internt för att provspela och diskutera prototypen ur ett upplevelseperspektiv. Frågor att besvara med speltestning Hur upplevs kontrollen till browsern? Är den responsiv? Skulle den kunna fungera på andra sätt? Hur fungerar tekniken på liveserver/lokalt? Kan denna interaktionsmodell användas till andra saker? För att använda telefonen som temporär/komplementerande realtids I/O-device till webappar exempelvis? Hur skulle man kunna förbättra prototypen? Speltestningen genomfördes på en webserver vilket var första gången vi testade prototypen under mer realistiska förhållanden. Under utvecklingstiden körde vi applikationen lokalt och då med mycket mindre påverkan av responstider. Utvärdering av prototyp Saker som framkom under utvärderingen av prototyp Det gick överaskande snabbt att ansluta och spelet upplevdes vara hyfsat responsivt QR-koder som synkroniseringsteknik är lite problematiskt, men trots sina problem ändå att föredra framför att manuellt skriva in en lång adress i mobilen. Några oklarheter i vad spelet gick ut på gick ganska snabbt gick att överkomma med lite trial and error. Det framkom att det skulle behöva arbetas mer med hur kopplingen av sockets förmedlades/hanterades. I slutet av spelet bör kanske de mobila enheterna disconnectas eller återgå till startskärmen.
Alla var överens om att ljud, både i form av ljudeffekter och musik hade kunnat göra väldigt mycket för upplevelsen, inte bara som dekoration utan som en grunläggande del i bärande kanal i interaktionen mellan applikationen och spelarna. Idéer framkom kring olika ljud som skulle kunna spelas i olika enheter och hur det skulle kunna användas effektivt. En idé var exempelvis att använda olika ljudeffekter beroende på vilket land man valde Tydligare feedback i hopp-momentet. Vann jag, vann jag inte? Varför vann jag inte? Och tydlig feedback, främst på den stora skärmen, som man faktiskt tittar på, med vem som fick poäng och vem som ramlat. Färgkodning av pilarna på stora och lilla skärmen skulle kunna hjälpa spelaren att använda sitt färgseende tillsammans med igenkänningen av geometriska former. Alla kontroller borde vara på samma ställe, och i detta fall bör det vara i mobilen. Det blev onödigt komplext av att distribuera knappar och kontroller allt för mycket. I stället för att ha en play -knapp för att starta spelet i desktop-browsern borde spelarna själva få trycka på ready på sina telefoner och på det sättet starta spelsessionen. Flera intressanta idéer och uppslag på nya typer av upplevelser uppkom i samband med diskussionen kring prototypen. Allt från presentationsverktyg till annonsverktyg, reklamskyltar, realtidsröstningsverktyg, kontrollenhetsfunktioner kopplade till mer generella funktioner i websidor var saker som diskuterades.