Umbrellove Design Document

Umbrellove

Steven van Asselt | Alvin Keegan Goh | Joris Seghers | Ryan Schuijer | Quint Thoolen | D2

Designdocument

Hoe gaat het in z’n werk als je een game gebruikt als medium, en via dit medium een verhaal vertelt om je spelers te overtuigen van je boodschap? In dit design-document wordt het spel Umbrellove uitgediept. Er wordt verduidelijkt wat de rol van het verhaal is binnen het spel en waarom een speelbaar en interactief verhaal juist de boodschap goed kan overbrengen. Bij het maken van het spel zijn er tal van keuzes gemaakt die tot het uiteindelijke concept hebben geleid. Door

deze keuzes te benoemen is het proces inzichtelijk geworden wat er is doorlopen tijdens het maken van Umbrellove.

Wij zijn in ieder geval verliefd geworden op het kleine rode parapluutje, nu is het aan jou om de liefde te vinden!

Veel speel/leesplezier, Team Umbrellove,

Doelgroep Jongeren, tussen de 15 en 25 jaar.

Probleem Uit onderzoek van NJR Het Bureau blijkt dat bij deze doelgroep de interesse in taal sterk is afgenomen in de laatste jaren. Ze zien het als een moeilijk en saai onderwerp. Engels heeft een hipper imago dan Nederlands.

Doel: Onze doelgroep moet weer bezig zijn met taal. En ze laten inzien dat er een hoop creatieve mogelijkheden zijn om taal te gebruiken. Het maakt ons niet uit of ze nu meer Engels of Nederlands gaan gebruiken, zodra ze inzien dat er veel meer toepassingen zijn van Taal dan ze denken hebben wij ons doel bereikt.

“De beperkte interesse van jongeren voor de Nederlandse taal maakt het des te belangrijker om het onderwerp voor hen aantrekkelijk te maken. Het Nederlands heeft een vrij ouderwets imago. Jongeren vinden creatieve uitingsvormen van taal, zoals muziekteksten, rap en poëzie, wel interessant.”

Bron: http://taalunieversum.org/sites/tuv/files/downloads/ rapport_jongeren_taal_participatie_def.pdf

De opdracht Maak een narratieve game waarmee je bij de doelgroep opnieuw interesse wekt voor Taal. De speler moet plezier beleven tijdens het spelen en er moet een verhaal vertelt worden; direct of indirect.

Narrative

We hebben een ludonarrative ontwikkelt waarbij het verhaal en de spelelementen elkaar versterken om zo 1 speelbaar geheel te vormen. Het verhaal in Umbrellove laat zien hoe liefde grenzen kan verleggen en alles overwint. Een paraplu

met een hart. Het klinkt misschien raar, maar het is een grappige metafoor om liefde duidelijk te maken. Doordat mensen in het verhaal samengebracht worden, kom jij steeds dichterbij je einddoel.

Openingsscène Meneer Frank Olaf heeft een prachtige parapluwinkel. Hij maakt en repareert al zijn hele leven paraplu’s, de paraplu die hij nu echter aan het repareren is, is speciaal. Hij heeft deze Plu al minstens 10 jaar maar nog steeds is er niemand geweest die hem wilde kopen. Het wordt tijd dat er weer wat ruimte in zijn winkel komt, deze plu moet de deur uit. Om hem sneller te verkopen besluit Frank een nieuw handvat op de stok te plaatsen. Achterin het magazijn staat een oude doos met een groot rood hart erop getekend. Frank doet hem open en ziet een prachtig glad gelakt eikenhouten handvat liggen. Perfect voor zijn oude paraplu! Secuur verwisselt hij de handvaten en bekijkt het resultaat. De plu ziet er fantastisch uit, alsof er een gloednieuwe paraplu voor hem ligt. De felrode stof in combinatie met het handvat vormen een prachtig geheel.

Tevreden legt hij de paraplu in de etalage, klaar om verkocht te worden.

Buiten regent het hard, forenzen lopen heen en weer langs de etalage. De rode paraplu kijkt door het raam en ziet alle paraplu’s in de regen, hij verlangt ook naar een eigenaar, gebruikt worden waarvoor hij is gecreëerd… De regen zorgt voor een grijze, droevige sfeer op straat, men loopt snel langs elkaar heen en iedereen zit in zijn eigen zone. Plots ziet de rode paraplu een felgele streep opduiken in de mensenmassa.

Een prachtige gele paraplu nadert de etalage, rustig beweegt ze op en neer op het tempo van haar eigenaar, een zakenman in pak. De rode paraplu krijgt een warm gevoel vanbinnen, dit moest de mooiste paraplu op aarde zijn! Hij moet achter haar aan, als een magneet werd zijn rode stof naar het raam toegetrokken. Het was lastig om controle te krijgen over zijn lichaam maar hij merkte al snel hoe hij naar links en rechts moest huppen. De gele paraplu was inmiddels de winkel voorbij gelopen, in de verte zag hij de gele vlek vervagen.

Frank loopt naar achteren om verder te werken aan andere paraplu’s. Ondertussen gebeurt er iets geks in de etalage. De paraplu begint te bewegen. Langzaam schudt de stof heen en weer en tikt het handvat tegen de ruit. De paraplu leeft!

Als hij haar niet uit t oog wil verliezen moet hij nu achter haar aan! Hij hupt net zolang tot hij op de grond valt. Na wat oefeningen weet hij volledige controle te krijgen over z’n lichaam en glipt hij de deur uit, op zoek naar zijn liefde.

Plot Frank ruimt zijn winkel op en knapt een rode paraplu op die ergens achter in de winkel ligt. Hij vindt een prachtig handvat in een kartonnen doos met een hart. Met dit handvat ziet de paraplu er als nieuw uit. Hij legt hem in de etalage om te verkopen. Frank loopt terug naar zijn werkplaats en gaat verder met repareren.

Ondertussen gebeurt er iets merkwaardigs in de etalage.

De rode paraplu beweegt heen en weer, hij leeft! Buiten regent het hard, er komt een zakenman aangelopen met een prachtige gele paraplu. Dit ontgaat de rode paraplu niet en hij wordt hopeloos verliefd op de sierlijke gele paraplu. Met

moeite kan hij zich verplaatsen, de etalage uit. Op de grond oefent hij de bewegingen en wanneer hij alles onder controle heeft vertrekt hij, achter zijn grote liefde aan!

Hij ziet haar zitten samen met haar eigenaar in een restaurant maar om bij haar te komen moet hij obstakels overwinnen, mensen samenbrengen en puzzels oplossen. Wanneer hij naar binnen kan vertrekt de gele paraplu met de auto. Gelukkig is de rode plu alert en kan hij nog net met z’n haak achter de auto blijven hangen.

Ze komen aan in het park waar de gele plu samen met haar

eigenaar bij de ingang van de metro staat te wachten. Om bij z’n liefde te komen moet hij opnieuw obstakels overwinnen.

Daarmee brengt hij mensen bij elkaar, verspreidt hij liefde en komt hij dichter bij zijn liefde. Net voordat hij bij de gele paraplu is vertrekt haar eigenaar de metro in.

In de metro is het een wirwar van roltrappen en verschillende sporen. De rode paraplu moet er achter komen hoe hij bij het spoor komt waar de gele paraplu staat met haar eigenaar.

Hierbij moet hij obstakels overbruggen, puzzels oplossen en mensen bij elkaar brengen om dichter bij z’n liefje te komen.

Net voordat de rode paraplu bij de metro van de gele paraplu is, stapt ze in en vertrekt de metro. Gelukkig kan de rode paraplu zich nog net aan een deur vasthaken.

Ze stappen uit bij station Haven, de rode paraplu gaat achter ze aan en ziet als hij bovenkomt dat de gele paraplu met haar eigenaar op een cruiseschip staat. De uitdaging is groot om op tijd de boot te halen maar ook hier moet hij obstakels overbruggen, havenkranen gebruiken om verder te komen en puzzels oplossen om alsnog met het schip mee te kunnen.

Wanneer het schip klaar is om te vertrekken breekt de zon door… De gele paraplu verdwijnt in de tas van de zakenman.

De rode paraplu blijft in z’n eentje achter op het cruiseschip.

Characters

The Red Umbrella Het hoofdpersonage van de game. Hij lag al jaren te verstoffen in de paraplu winkel van Frank Olaf; niemand wilde hem kopen. Nadat Frank hem had opgeknapt in de hoop dat hij nu wel verkocht zou worden kwam de rode paraplu ineens tot leven.

Wanneer de rode paraplu door de etalageruit naar de regenachtige straten van de stad kijkt ziet hij iedereen met een paraplu lopen. Hij raakt verliefd op een prachtige gele paraplu die langs de etalage gedragen wordt. De rode paraplu verlaat de winkel en gaat achter haar aan.

Het is een echte doorzetter die zijn grenzen wilt verleggen om bij zijn grote liefde te komen. Tijdens zijn reis verspreidt hij de liefde, door mensen bij elkaar te brengen.

The Yellow Umbrella De prachtige paraplu felgele paraplu wordt gedragen door haar eigenaar; een zakenman. De man heeft een druk bestaan en is constant onderweg. Ze heeft tijdens het verhaal geen idee dat de rode paraplu verliefd op haar is en haar achtervolgt.

Frank Olaf Frank is een man op leeftijd; hij heeft al jaren een paraplu winkel midden in de stad. Het is een echt familie bedrijf dat zich specialiseert in het opknappen en verkopen van paraplu’s.

Vormgeving

Umbrellove speelt zich af in een stadje anno 1960. Het bevindt zich op een continent ergens op het noordelijk halfrond, maar op miraculeuze wijze regent het er altijd. Het zijn echter geen stortbuien, het creĂŤert daarom ook geen troosteloze

omgeving. Het regenachtige stadje biedt een zwoele, romantische en bijna poĂŤtische sfeer aan het verhaal van onze rode paraplu.

Film Noir “Een film noir (frans voor Zwarte Film) is een film in de stijl en sfeer die in de eerste plaats wordt geassocieerd met misdaadfilms waarvan de hoofdfiguren in een existentieel bedreigende en nihilistische wereld leven.”

Dit lijkt in de eerste instantie een tegenstelling met wat ons verhaal wilt vertellen. Het is echter wel de sfeer die zo inspirerend werkt voor de omgeving waarin onze paraplu zich zou kunnen bewegen, dat we ervoor gekozen hebben om deze stijl te verwerken in onze game.

Film Noir wordt tegenwoordig ook meer beschouwd als een stijl dan als genre.

Belangrijke elementen binnen Film Noir zijn een hoge contrastbelichting en een grote scherptediepte. Personages bewegen zich hierbij tussen zware schaduwen en felle lichten.

Dit effect hebben we binnen de vormgeving geëvenaard door te zorgen voor zwarte achtergronden en lichtbronnen te creëren waardoor silhouetten zichtbaar afsteken. Ook heeft alles een onscherp randje gekregen (gaussian blur) om scherptediepte te suggereren. De stijl wordt compleet gemaakt door de keuze van een vignette aan de rand van de viewport

Regen Onze held binnen dit avontuur is een paraplu, die de omgeving helpt binnen de liefde. Dit bracht ons al snel op het idee voor een regenachtige omgeving. Het is namelijk een weersomstandigheid waarin een paraplu geen vreemd object is om te zien, en zelfs iets kan betekenen bij een liefdesmissie (denk aan een stelletje onder een paraplu in de regen, romantischer kan het bijna niet).

De vormgeving van het regen element binnen onze game heeft een onderzoeksproces ondergaan. Zo heeft regen met een te schuine hoek teveel invloed op wat de speler denkt te

controleren. Er werd namelijk weleens gedacht dat je hierdoor iets met wind kon doen. Hierdoor hebben we de keuze gemaakt de regen geen schuine hoek te geven.

Ook moest de regen niet te prominent aanwezig zijn, dat stoort en leidt af van de gameplay.

Onze ontwerpkeuzes hebben ervoor gezorgd dat de regen een sfeerelement is binnen onze game en geen onderdeel lijkt van de gamebesturing of zich onbewust een dynamic lijkt te vormen.

Kleurgebruik We hebben gekozen voor een zwart/witte omgeving, omdat dit past bij de sfeer van een regenachtige wereld. De mensen hebben geen duidelijke relatie voor de paraplu, dus deze zijn ook getekend als silhouette en bevatten geen kleur.

Dat de paraplu rood is, is een esthetische keuze die voort borduurt op de narratie van het verhaal. Dit is niet alleen zo gekozen omdat het gaat om het element dat je in de game bestuurt, maar ook om aan te geven dat deze paraplu een ‘hart’ heeft gekregen en anders is dan de standaard paraplu

(die in deze wereld grijs of zwart zijn). De kleur rood is zo gekozen als knipoog naar de internationale kleur van de liefde.

De gele paraplu dankt haar kleur aan het feit dat we een andere paraplu ook ‘speciaal’ wilden maken, zodat we het liefde-op-het-eerste-gezicht scenario kunnen verduidelijken.

Tevens is zij het Object of Desire in elk level, waardoor direct het eindoel gesteld is.

Interactie en Gedrag

Interaction models Een interactie model geeft de relatie weer tussen de input van de speler op het inputpaneel (bijvoorbeeld het toetsenbord) en de reactie die deze input teweegbrengt in de game wereld. Hierin verandert de user interface (UI) de input in een daadwerkelijke actie. Op deze manier kan de speler zijn eigen wil, keuzes en commando’s op de game projecteren.

Binnen onze game zijn de input mogelijkheden beperkt tot de pijltjes toetsen en een knop om te springen. Verdere interacties vinden plaats met de omgeving waarin het karakter zich bevindt. Normaliter zouden deze worden geactiveerd door de muis of door een bepaalde knop, maar wij hebben gekozen voor interactie aan de hand van physics. Door je karakter tegen bepaalde objecten aan te ‘gooien’ zet je bepaalde sequenties in werking. Dit hebben we gedaan om de paraplu als karakter beter naar voren te laten komen. We hebben geprobeerd om bewegingen van een echte paraplu na te bootsen en deze te vertalen naar een speelbaar karakter.

Het gedrag van het karakter zelf Het karakter wordt bestuurd door middel van de pijltjes toetsen en de spatiebalk. Aan deze toetsen zijn verschillende acties verbonden. De paraplu heeft de mogelijkheid om 360 graden te draaien rond zijn as. Daarnaast kan hij naar links en naar rechts ‘lopen’ en heeft hij de mogelijkheid om een enkele- en dubbele sprong te maken.

De rechter- en linker pijltjes toets zorgen ervoor dat het karakter zich over de x-as kan bewegen. De paraplu leunt standaard op de stok en een punt van het windscherm.

Deze kant waar hij op leunt bepaalt ook de richting van zijn beweging. Met de pijltjes toets kun je deze richting bij stilstand veranderen. Bij ingedrukt houden van de toets begint de paraplu te ‘lopen’ met een huppelende beweging. Deze

beweging hebben we zodanig geprogrammeerd dat deze realistisch aanvoelt.

Bij het indrukken van de spatiebalk of het pijltje omhoog springt de paraplu omhoog. Deze sprong heeft een vaste waarde op de y-as. Dit om de verwachting van de speler tegemoet te komen. Om obstakels te bereiken die niet haalbaar zijn met een enkele sprong hebben we ook een dubbelsprong toegevoegd. Deze dubbelsprong zorgt voor een variatie in de mogelijke bewegingen. Zo kun je grotere hoogtes bereiken en heb je de mogelijkheid om de zwevende karakteristiek van een paraplu in je voordeel te gebruiken. De dubbele sprong wordt uitgevoerd door de spring knop twee maal achter elkaar te gebruiken. Het moment van de tweede sprong kan door de speler zelf bepaald worden, dit kan dus zowel op maximale hoogte als vlak bij de grond worden geactiveerd.

Ook in mid-air is de paraplu te besturen. Al zwevend val je naar beneden en doordat je de richtingknoppen links en rechts gebruikt kun je deze val manipuleren. Zo heb je de mogelijkheid om verkeerde sprongen te corrigeren in de lucht. Deze beweging heb je nodig om bepaalde obstakels te overbruggen in het spel. Dit zorgt ervoor dat de puzzels aan complexiteit winnen en het vergroot het bereik van de paraplu in de levels.

Als laatste mogelijkheid heeft de speler de interactie-functie tot zijn beschikking. Door het indrukken van de spatiebalk, wordt deze geactiveerd. De speler kan met deze functie objecten oppakken, hendels overhalen, spullen aan karakters geven, ‘communiceren’ en aan bepaalde objecten in de omgeving hangen met zijn haak. De feedback die het karakter geeft wanneer deze te gebruiken is volgt hierna.

Het gedrag ten opzichte van de omgeving De paraplu komt op zijn weg verschillende gevaren tegen.

Deze obstakels moet hij zien te overbruggen. De speler zal er zelf achter moeten komen hoe hij het obstakel moet benaderen. Door middel van trial and error komt de speler er achter wat de juiste manier is om het level te voltooien. Een hulpmiddel dat in de game is toegevoegd om de gebruiker duidelijk te maken dat er interactie mogelijk is met een object, is de beweging van de paraplu. Staat de speler in de buurt van een object waar interactie mee mogelijk is dan zal de paraplu een kort sprongetje maken en zich heel even kort inklappen.

Zo voorkomen we dat er een eindeloze zoektocht ontstaat naar de mogelijkheden binnen het level. Daarnaast is de omgeving zo ontworpen dat er een logische volgorde ontstaat waarin alle acties moeten plaatsvinden. Zodat de gebruiker niet onnodig gaat interacteren met objecten die er op dat moment niet toe doen.

Komt de paraplu tegen objecten aan de zwaarder zijn dan hijzelf, dan laat het systeem zien dat hij moeite heeft met de verplaatsing hiervan. Dat de paraplu deze houding aanneemt zorgt ervoor dat duidelijk wordt dat dit object überhaupt te verplaatsen is. We willen deze ‘struggle’ zo duidelijk mogelijk neerzetten, omdat voorop moet staan dat de paraplu zich in een voor hem vreemde omgeving bevindt.

Level Beschrijvingen

Park Bij betreden van het level sta je naast een brandweerwagen.

De eigenaar van deze wagen is op zoek naar een ladder. Deze ladder is echter door de bewoner van de boomhut omhoog geschoven, zodat niemand binnen kan komen. Als paraplu kun je nog niet bij deze man komen. Je loopt verder en ziet een hoop bladeren liggen. Onder de hoop bladeren ligt een putdeksel. Er is nog geen interactie mogelijk met deze bladeren en dit zorgt er voor dat je verder gaat zoeken. Als je verder loopt zie je een vrouw die kijkt naar haar kat in de boom. De link met de brandweerman wordt hier gelegd. Naast de boom staat een bankje en een elektriciteitskastje. Dit kastje kun je aanzetten. De blazer die onder de putdeksel zit gaat nu

aan en blaast de bladeren weg. Door de lucht die nu uit de grond komt kun je bij de boomhut komen, omdat je hierdoor hoger kunt springen. De man in de boomhut vraagt je om een plank. Deze zie je liggen naast het bankje. Je haalt de plank op en geeft deze aan de man. Hij laat zijn ladder naar beneden en de brandweerman neemt de ladder mee. Hij kan echter niet langs de harde luchtstroom en dit dwingt je om deze weer uit te zetten. Als de brandweerman de boom bereikt haalt hij het katje uit de boom. Hierdoor schrikt de hond aan het einde van het level en is je doorgang tot de metro vrij gemaakt. De man met de gele paraplu verdwijnt vlak voor jou de metro in.

Metro Als je eenmaal via de roltrap beneden het metro station binnenkomt zie je al een metro staan. De man met de gele paraplu zit er al in. Je kunt er niet langs om in te stappen; er staat namelijk een enorm dikke man; die niet door de metrodeur past. Je zult hem eerst naar binnen zien te moeten persen om zelf ook de metro in te kunnen. Links in het station is er een zwerver aan het slapen tegen zijn winkelkarretje aan. Om hem wakker te maken kun je de bel af laten gaan.

Als je aan de schakelaar trekt wordt er een alarm gezet; die over 15 seconden af gaat. Je moet nu snel naar de kelder van het station via de trap aan de rechterzijde. In de kelder zit een luchtschacht die naar boven/buiten leidt. Spring de

luchtschacht in. Eenmaal boven zie je een container staan.

Voor de container is er een rooster kapot gegaan welke boven het station zit. Duw de container naar beneden het metrostation naar binnen via het rooster. Je moet dit gelijk timen met het wakkerschrikken van de zwerver die tegen het karretje aan ligt te slapen. Als dit lukt zullen allebei de karren tegelijkertijd van beide kanten de dikke man de metro in duwen. Je kunt er nu voorbij en de metro in. Helaas rijdt de metro net weg; je klampt automatisch vast aan de achterkant van de metro.

Docks In de docks begin je met je paraplu naast het huisje van een havenwachter. Je doel is om voor de man die daar staat te wachten de weg vrij te maken naar zijn vriendin die al op de boot zit. Je ziet rechts in het scherm nog net een man zitten op een stoel. Hij slaapt. Aan het huisje hangt een bootshoorn met een koordje eraan. Als je interacteert met deze bootshoorn wordt de machinist wakker en klimt hij in zijn kraan. Als hij zit laat hij duidelijk merken dat de kraan geen stroom heeft.

Naast deze kraan staat een grote elektriciteitsmast. Hier bovenin zit een elektriciteitskastje. Door de switch om te zetten gaat de kraan aan en gaat de container naar beneden.

De man kan nu doorlopen. Bij de volgende waterkant staat

een visser. Deze visser heeft geen haak aan zijn vishengel. Jij als paraplu kunt aan zijn hengel gaan hangen en zo het water betreden. Je haalt het visnet weg, en bevrijd de schildpadden.

Deze schildpadden gaan op een rij liggen en zo kan de man lopen tot aan de boot. De toegang tot de boot wordt hem geweigerd door de kapitein. Deze vraagt om een flesje bier. Je haalt het flesje bier en gaat terug naar de kapitein. Samen met de man betreed je de boot en het level is voltooid. Je hebt eindelijk je geliefde gevonden.

Game Design

Level design Binnen het level design is gekeken naar bepaalde doelen en uitdagingen die een level moet bevatten. Zoals eerder beschreven is het overall doel van het spel dat je als paraplu op zoek gaat naar de gele paraplu, waar je verliefd op bent geworden. Dit spel zou echter erg lineair zijn als er geen obstakels zouden zijn die deze weg blokkeren. Deze lineariteit

hebben we weggenomen door het toevoegen van een secundair doel voor de paraplu, namelijk het laten zien van liefde aan de wereld om hem heen. In elke acte zijn er twee personen die op een bepaalde manier samen gebracht kunnen worden. Deze zoektocht brengt zowel diepgang als replay value aan het spel.

Er is een realistische setting neergezet voor een paraplu.

Deze kan uiteraard alleen bestaan als het regent en daarom is de omgeving zo vormgegeven dat je het gevoel krijgt dat het spel zich afspeelt op een regenachtige namiddag. Als speler beweeg je je door deze omgeving en binnen deze context liggen een aantal onderdelen van de puzzel verstopt.

Door interactie met deze onderdelen of objecten worden er processen in werking gezet die er voor zorgen dat het volgende deel van de puzzel kan worden opgelost. Een voorbeeld hiervan is het aanzetten van een stroomkastje, waardoor een stoplicht wordt aangezet. Doordat het stoplicht nu op groen springt kan een bepaald karakter dat staat te wachten doorlopen.

De volgorde die de speler moet aflopen binnen deze levels hebben we bewust zo ontworpen dat er een zoektocht ontstaat. Jij als paraplu kunt overal komen, behalve bij je einddoel. Dit zorgt ervoor dat de gebruiker moet gaan zoeken naar een manier waarop hij dit einddoel toch kan bereiken.

De eerste stap richting deze oplossing proberen we duidelijk te maken aan de hand van een hint, die verborgen ligt in de omgeving rond het te passeren obstakel.

Bij de moeilijkheidsgraad van de levels hebben we rekening gehouden met de flow channel. De eerste puzzels in een level zijn makkelijk op te lossen, maar naarmate je verder vordert in het level ontstaan er vraagtekens bij de speler.

Deze vraagtekens zorgen voor een rustmoment binnen deflow channel. De speler hoeft dus niet constant hele moeilijke puzzels op te lossen. Het idee is dat de afwisseling tussen logische stappen in de weg naar de oplossing worden afgewisseld met moeilijk te vinden handelingen, waardoor de speler zich nog dieper gaat focussen op de opbouw van het level. Dit zorgt voor het gevoel van progression.

Ontstaan van de game Onze game haalt zijn kracht uit de ontwikkeling van het karakter. Het karakter, de paraplu, heeft duidelijke eigenschappen en deze zorgen logischerwijs voor een aantal mechanics. Dit speelt in op de verwachtingen van de speler als

hij het spel voor het eerst speelt.

De toegepaste mechanics in onze game zijn springen, lopen, dubbel springen en draaien. Daarnaast heb je als speler de mogelijkheid om te interacteren met verschillende objecten.

De haak van de paraplu maakt het daarbij mogelijk om de objecten die je nodig hebt om het spel te spelen op te pakken en mee te nemen. Gezamenlijk zorgen deze mechanics voor de manier waarop je manoeuvreert door het level en de puzzels oplost. Deze mechanics worden later in het interactiemodel dieper besproken.

De mechanics, die voortvloeien uit het karakter en de eigenschappen van een paraplu hebben veel invloed gehad op de uiteindelijke omgevingen, de dynamics. Een paraplu wordt door de meeste mensen namelijk geassocieerd met een regenachtig en grauw scenario. De levels zijn hierop ontworpen. Door constante feedback aan de hand van geluid en visuele aspecten die te maken hebben met deze regenachtige sfeer, bootsen we de belevingswereld van een paraplu na.

Het level is gebouwd rondom alle bewegingen en interacties die de paraplu kan aangaan. De obstakels die in het level zijn geplaatst staan op een of andere manier in relatie met zijn karakteristieken. Het feit dat hij een haak als handvat heeft, zorgt er voor dat hij dingen kan oppakken. Een voorwaarde aan deze objecten is dus dat ze aan hem kunnen hangen.

Daarnaast heeft de paraplu de mogelijkheid om enkel en dubbel te springen. Binnen het level zijn de afstanden tussen verschillende platforms hierop afgestemd. Door toevoegen van een interactieknop scheppen we de mogelijkheid tot nog veel meer interacties in de uiteindelijke game. Het level design wordt hierdoor meer gevarieerd. De haak van de paraplu zorgt er voor dat hij kan hangen aan bepaalde touwen en ziplines.

Verder heeft de paraplu een scherm van stof. Deze stof is waterdicht en ondersteboven kan de paraplu dus drijven, waardoor hij nog meer interactie aangaat met zijn reden van bestaan, het water.

Audio

Voor welke stijl hebben we gekozen?

speelwereld kan bewegen en waar niet.

Er is gekozen voor een vrij schimmige en stille stijl. Deze is gekozen omdat het overeenkomt met de art stijl van de game.

Het is zwart wit, grijs dus een constant energiek muziekje zou niet toepasselijk zijn voor de wereld waar in het verhaal zich afspeelt. Soms zijn er wel zones waar muziek afgespeeld zal worden; bijvoorbeeld bij een café waar muziek speelt; of een spannend moment in de game. De “vlagen” van muziek zijn allemaal “Jazz nummers. Jazz muziek klinkt lekker bij het geluid van de regendruppels en zorgen voor een goede “rainy mood” .

Feedback als men de actieknop gebruikt is ook van belang, er is een positief en een negatief geluid. Een positief geluid als bevestiging dat de actieknop zin heeft wanneer men deze indrukt en een negatieve als het geen zin heeft. Deze geluiden zijn twee keer een dompere “honk” van een saxofoon als negatief geluid, en een hoge lichte “vrolijkere” honk als positief geluid.

Wanneer de paraplu zich voortbeweegt, springt of tegen iets aan stoot hoor je ook echt het geluid van een paraplu.

Dit geeft feedback op de speler dat hij in contact komt met objecten, en dat hij zich natuurlijk vooruit beweegt.

Als de speler game over gaat hoor je ook het geluid van een saxofoon die “uit schiet” wat voor een komisch effect zorgt.

Een harde evil game over sound zoals een gemene lach e.d. zou ook niet passen bij het luchtige karakter van het spel.

Deze saxofoon geluiden zijn ook dus gekozen omdat ze passen bij de stijl en de jazz muziek; waar men altijd veel op de saxofoon speelt.

Hoe versterkt de audio de game?

De audio in onze game versterkt de ervaring op verschillende manieren. Ten eerste zorgt bijvoorbeeld het geluid van regen op de achtergrond dat het regent in het spel; en dat het niet harde windvlagen; of hagel is. Geluiden als bijvoorbeeld dat hij landt geeft ook meteen een “plons” geluidje; zodat het echt voelt dat je in een regenachtige natte omgeving voortbeweegt. Geluid van voetstappen in het water van omstanders geven bijvoorbeeld ook de illusie dat men speelt in een regenachtige omgeving.

Veranderend omgevingsgeluiden, zoals het holle “tunnel geluid” als je ondergronds in het eerste level zit of het getoeter van auto’s bij een kruispunt geven een extra dimensie aan de speler waar men zich bevindt in het spel.

Hoe geeft de audio feedback op de speler?

Zoals al eerder beschreven zijn de geluiden belangrijk als feedback voor de speler. Wanneer de paraplu tegen iets aan stoot hoort de speler ook echt dat de paraplu ergens tegen aan stoot. Dit geeft de extra illusie of beleving dat het een echte wereld is en geeft ook aan waar men door de

Welke geluiden zijn er gebruikt, en waar komen ze vandaan?

De gebruikte geluiden van de paraplu zijn allemaal zelf opgenomen. Andere geluiden; zoals schakelaars, vogels e.d. komen van het internet. De muziek is ook afkomstig van het internet; deze vallen onder het sub genre van jazz genaamd “rainy mood”.

TechnologiĂŤn

Technologie Umbrellove is geschreven in JavaScript en HTML5 en gebruikt daarbij de Box2D als physics engine voor een natuurkundig getrouwe simulatie en de CreateJS-bibliotheken voor het weergeven van grafische elementen in de browser.

HTML5 en JavaScript – een ijzersterke duo

HTML5 HTML (HyperText Markup Language) is de opmaaktaal waarmee structuur wordt gecreëerd voor content op het web.

Browsers interpreteren deze taal en geven het weer als het webpagina’s.

Om mee te groeien met het hedendaagse webgebruik en als voorbereiding op de toekomst van het web komt er om de enkele jaren een nieuwe versie van HTML. In de meest recente versie, HTML5, is er een nieuwe natuurlijke ondersteuning voor diverse multimedia- en grafische formaten. Voorheen was de aanschaf of installatie van propriëtaire software als Adobe Flash en Adobe Flash Player vereist voor het creëren/inbedden of weergeven van dergelijke content. Nu is met JavaScript dezelfde dynamiek en interactie beter toegankelijk voor zowel contentmakers als -gebruikers.

JavaScript JavaScript is een dynamische scripttaal die veelal gebruikt wordt in webbrowsers. Met embedded scripts geschreven in JavaScript kunnen webpagina’s dynamisch gemaakt worden, wat uiteraard mogelijkheden biedt tot het implementeren van interactie binnen een webpagina. Een uitstekende toepassing hiervan is natuurlijk in het programmeren van games die in de browser kunnen worden gespeeld.

Browserondersteuning

De keuze om Umbrellove voor de browser te schrijven in JavaScript en HTML is de uitstekende browserondersteuning ervoor. Nagenoeg alle moderne browsers voor computers, tablets, mobiele telefoons, televisies en gameconsoles ondersteunen het <canvas>-element van HTML5, waarin Umbrellove geladen wordt.

Enkel versie 8 en eerder van Internet Explorer van Microsoft ondersteunen geen HTML5; in deze browsers kan Umbrellove dus niet gespeeld worden. Dit zal praktisch gezien geen effect hebben op onze doelgroep – de nieuwste versie van Internet Explorer is versie 11, en kopieën van een verouderde versie zal je vaak treffen op oudere computers (met de Windows XP-besturingssysteem) die doorgaans gebruikt worden door oudere gebruikers. 1, 2 Het voordeel van een natuurlijke browserondersteuning is dat de gebruiker geen zware plugins zoals Unity Web Player, Shockwave e.d. of game-apps voor respectievelijk desktop- en mobiele browsers behoeft te installeren alvorens het spelen.

We willen de kracht van HTML5 en JavaScript puur benutten.

Omdat de meeste apparaten en browsers hardwareversnelling ondersteunen zal de spelervaring nog net zo soepel kunnen zijn als een programma of applicatie.

1 Leenheer, Niels. “HTML5test: How Well Does Your Browser Support HTML5?” HTML5test. N.p., n.d. Web. 26 Mar. 2014. <http://html5test.com/compare/feature/canvascontext.html>.

2 Deveria, Alexis. “Can I Use...” Support Tables for HTML5, CSS3, Etc. N.p., n.d. Web. 26 Mar. 2014. <http://beta. caniuse.com/#feat=canvas>.

CreateJS – voor een slimme, naadloze beleving Umbrellove wordt geladen in een <canvas>-element op de webpagina. Het verwerken van elementen in het <canvas>element hebben we gedaan met CreateJS, een collectie bibliotheken om het bezorgen van rijke, interactieve gebruikersbelevingen te vergemakkelijken.

CreateJS bestaat uit vier onderdelen: EaselJS – voor het werken met grafische elementen en interactie TweenJS – voor soepele tweens en animaties SoundJS – voor het afspelen van geluid PreloadJS – voor het beheren en coördineren van het laden van bestanden

restitutie, dichtheid, zwaartepunten, afmetingen, snelheid, rotatie etc. om berekeningen te maken. Door te spelen met de verschillende variabelen is er een soort persoonlijkheid ontstaan rondom de protagonist in het spel. Deze technologie is bewust aangehouden omdat het cruciaal is geweest voor het versterken van de narratief opdat de personificatie van de paraplu en de identificatie van de speler met de paraplu vergroot mag worden. 4 4 Catto, Erin. “What Is Box2D?” FAQ. N.p., n.d. Web. 26 Mar. 2014. <https://code.google.com/p/box2d/wiki/FAQ>.

Alles dat zichtbaar, zoals animaties van bitmaps worden gerealiseerd door middel van spritesheets en texture atlases. Alles dat hoorbaar is, zoals achtergrondmuziek, geluidseffecten e.d. worden eveneens door deze vier collecties beheerd. Voor Umbrellove worden de versies EaselJS 0.7.1, TweenJS 0.5.1, SoundJS 0.5.2 en PreloadJS 0.4.1 gebruikt.

Het is ontwikkeld door Grant Skinner, Lanny McNie en Sebastian DeRossi. De ontwikkeling van CreateJS wordt tevens gesponsord door Adobe, AOL, Microsoft en Mozilla. 3 3 “CreateJS | A Suite of Javascript Libraries and Tools for Building Rich, Interactive Experiences with HTML5.” CreateJS | A Suite of Javascript Libraries and Tools for Building Rich, Interactive Experiences with HTML5. N.p., n.d. Web. 26 Mar. 2014. <http://www.createjs.com/#!/CreateJS>.

Box2D – brengt de wereld tot leven Om de karakter echt te laten bloeien, hebben we een physics engine gebruikt. Physics engines simuleren fysische systemen, waaronder botsingen (collisions), zwaartekracht etc.

Umbrellove maakt gebruikt van Box2D, een opensourceengine van Erin Catto. Box2D is ook gebruikt in de populaire Crayon Physics en Angry Birds.

Hoewel Catto de engine origineel in C++ had geschreven, is het door de gemeenschap geport naar andere programmeertalen, waaronder Flash, Java, C# en Python. De versie waarop Umbrellove draait, is een JavaScript-port van Box2DFlash 2.1a.

Box2D gaat uit van verschillende variabelen als massa, frictie,

De Umbrellove-gamestructuur Om het toevoegen van onderdelen, zoals entiteiten, activa, levels e.d. in latere stadia makkelijk te houden en de kans op problemen te verkleinen, is het belangrijk om de logica van een gamestructuur vanaf het begin goed doordacht op te zetten. De gamestructuur is ontworpen met efficiëntie en duurzaamheid van structuur in gedachte, zodat ontwerpers later het spel zouden kunnen uitbreiden.

Integratie van Box2D en CreateJS Omdat Box2D enkel de berekeningen van de fysische simulatie uitvoert en CreateJS (en met name EaselJS) het tekenen van elementen in de browser voor zijn rekening neemt, moeten deze twee aan elkaar gekoppeld worden.

Box2D werkt met meters, kilogrammen, seconden en radialen als eenheden. CreateJS, zoals vrijwel alles voor digitale productie, werken echter met pixels. Ook neemt Box2D als referentiepunt het midden van het object, waarbij ontwerpers in HTML normaal gesproken linksboven van een object als referentiepunt nemen. Deze conversie wordt in de gamestructuur automatisch verwerkt.

Entiteiten gebaseerd op prototypes In een spel zijn verschillende entiteiten te vinden. Sommigen entiteiten delen bepaalde eigenschappen. In veel programmeertalen kunnen met klassen (of sjablonen) gewerkt worden, maar omdat JavaScript een prototype-georiënteerd programmeermodel kent, bestaan er geen klassen. Om dit te omzeilen is er eerst een hoofdobject gecreëerd. Nieuwe objecten die enkele eigenschappen delen kunnen een kloon maken van dit hoofdobject (overerving) en vervolgens nieuwe kenmerken, functies en methodes hieraan koppelen. Dit maakt het schrijven en interpreteren van nieuwe soorten entiteiten efficiënter en beter leesbaar voor respectievelijk de ontwikkelaar en de browser.

User Tests

Usertests Om constante feedback te krijgen op de voortgang in het ontwerpproces zijn er usertests gehouden. Deze tests zijn gehouden op eerstejaars-CMD studenten omdat zij deel uitmaken van de doelgroep. De test bestond uit een speelbaar gedeelte waarin de deelnemers een opdracht kregen die ze moesten uitvoeren. Daarnaast hield iemand zich bezig met het ondervragen van de users over de stijl en esthetiek. Hierdoor werd er snel en effectief feedback vanuit de doelgroep over de gehele game gegeven. De meningen van testpersonen waren van belang doordat zij de game vanuit een objectief oogpunt konden bekritiseren. Door het gevarieerde verwachtingspatroon van de testpersonen over de bewegingen en mechanics van de paraplu ontstonden er nieuwe inzichten. Het was duidelijk dat de karakters en omgeving een belangrijke rol speelden bij het creëren van gevoelens en affectie. De sfeer in het spel en het gevoel wat iemand krijgt als hij speelt zijn essentiële factoren om de boodschap over te brengen.

Usertest 1: Het prototype van de game was een representatie van hoe de game uiteindelijk zou moeten worden. Er waren twee tests om verschillende manieren van besturing te testen, en daarnaast een stijldocument om feedback te geven op de sfeer en esthetiek. Het verhaal was nog niet verwerkt in de eerste test, maar het was wel belangrijk om feedback te krijgen op het uiteindelijke doel van het spel. Daarom stelden we de testers een aantal vragen hierover.

In het speelgedeelte was het belangrijk om feedback te krijgen op de manier van bewegen van de paraplu. Hoe ervaren de testers de manier van ronddraaien, springen, lopen en landen? Tijdens het spelen was de opdracht om aan de andere kant van het level te komen zonder in de gaten van het level te vallen. Door trial & error kwamen de spelers er achter op welke manier ze de paraplu moesten gebruiken.

In het stijlgedeelte werden er specifieke vragen gesteld over

welke sfeer er werd opgeroepen. Welke elementen zorgen voor welke gevoelens en wat heeft dit voor effect op het spelen van de game? Wat voor vragen roept het op als je speelt met een paraplu? En wat vind je ervan dat de paraplu op zoek is naar z’n liefde?

Conclusie: De besturing is erg moeilijk voor iemand die dit nog nooit heeft gespeeld. De controls zaten daarom ook in de weg om het einddoel te behalen. Een aantal spelers had de complete besturing door na drie keer springen terwijl het anderen niet eens lukte om bij het einde te komen. We kunnen concluderen dat de controls te moeilijk zijn om de paraplu te besturen in een puzzelgame. Het moet geen skillgame worden waardoor de bewegingen van de paraplu minder explosief moeten worden en meer beheersbaar. Dit vraagt om een tweede test.

Qua stijl past de paraplu erg goed binnen het geheel. Het geeft de speler het gevoel dat ze spelen in een film noir. Wel is het belangrijk om de stijl consistent te houden en dus zo alle objecten die gemaakt worden in dezelfde grijstinten te ontwerpen. Verder moet er een doel en verhaal worden gecreëerd waardoor de paraplu betekenis krijgt in het geheel.

Het was duidelijk en grappig om op zoek te gaan naar de gele paraplu, de grote liefde, maar de zoektocht en obstakels moeten verder worden uitgewerkt.

Usertest 2: In de tweede usertest was het prototype verder gevorderd.

De feedback van usertest 1 was verwerkt in het nieuwe prototype waardoor er opnieuw feedback nodig was om het spel te verbeteren en tot een eindversie te komen. De groep testpersonen was dezelfde als tijdens usertest 1 waardoor ze de veranderingen konden benoemen.

Er waren deze keer geen twee afzonderlijke tests, er was een voorbeeldlevel gemaakt om het doel in de game te testen. In dit level was het de bedoeling om voorbij een kat te komen

die op het pad zit. Door rond te lopen kwam je er achter dat er een emmertje op een vensterbank stond die je naar beneden kon gooien. Hierdoor werd de kat geĂŻrriteerd en liep hij het level uit, de doorgang is vrij en de paraplu kan verder.

In dit prototype kwamen de besturing, level design, narratief, sfeer en doel samen waardoor er meer duidelijkheid was voor de testpersonen. De spelers gaven feedback over deze onderwerpen waardoor we deze konden verbeteren voor nieuwe versies.

Conclusie: De besturing is makkelijker geworden en komt nu veel dichter in de buurt van de verwachtingen van de testpersonen.

Hierdoor zijn ze in staat om de paraplu beter te besturen en ook daadwerkelijk interactie met de omgeving beleven. Het level speelt fijn doordat ze begrijpen hoe de besturing werkt.

Het is echter niet helemaal duidelijk wat het doel in het level is, gevaren en interactievoorwerpen moeten een duiding krijgen. Testpersonen hadden vaak een eigen interpretatie van wat de objecten zouden doen maar misten feedback om hun eigen verwachting ook te kunnen verifiĂŤren. Op deze manier is het zelf uitzoeken wat alle objecten doen en betekenen.

We gaan er van uit dat de focus meer op het oplossen van puzzels moet liggen dan dat je als speler de omgeving moet onderzoeken. Het verhaal spreekt de testpersonen aan, ze vinden het grappig dat je op zoek gaat naar je liefde en ondertussen puzzels moet oplossen. Ze benoemen ook dat liefde alles overwint.

Conclusie

De ontwikkelde game, Umbrellove, brengt het verhaal van de liefde over op de speler. Door de ontworpen stijl, die gebaseerd is op de film noir films, krijgt de speler het gevoel dat hij zich door een wereld begeeft die past binnen het verhaal. De omgeving klopt bij het karakter en zorgt voor de stimulatie van het inlevingsvermogen in zijn situatie. De speler voelt de wanhoop van de paraplu tijdens zijn zoektocht naar zijn geliefde. De geluiden die zijn toegepast in het spel maken deze beleving nog intenser. De regen heeft een lijdende rol in het audiodesign en de geluiden van de paraplu en de objecten waarmee hij interactie kan aangaan doorbreken op het juiste moment de stiltes. De bewuste keuze om geen soundtrack toe te voegen, legt de focus op het aspect in de game waar de paraplu voor bestaat, de regen.

Binnen het spel wordt de speler op verscheidene manieren uitgedaagd. De belangrijkste uitdaging zijn de puzzels die in elk level moeten worden opgelost. Zij dwingen de speler om het level te exploreren en er interactie mee aan te gaan. Er moet echt worden nagedacht om de oplossingen te vinden. Een tweede uitdaging vindt de speler in de toegepaste besturing.

Deze komt op veel punten overeen met de normale besturing van een platformgame, maar er is rekening gehouden met de onvoorspelbaarheid van een echte paraplu. Hierdoor ontstaat er een factor van ‘skill’ in de game. De vaardigheden die je nodig hebt doe je op tijdens het spelen. Het kost wat tijd om het door te krijgen, maar zorgt ervoor dat het virtuele karakter realistisch aanvoelt in de besturing.

Kijkende naar de uiteindelijke uitwerking van de game zitten er nog een aantal punten in die om verdieping vragen.

De puzzels in de levels zijn op dit moment nog niet in toenemende mate uitdagend. Daar waar de mogelijkheden geschapen zijn om een hele gevarieerde non-lineaire game te vormen, slagen niet alle tot nu toe ontworpen levels daarin.

Buiten het feit dat je wel echt moet zoeken naar de oplossing van de puzzel, hebben je keuzes nog niet echt invloed op de uitkomst van het spel. Of jij daadwerkelijk de gele paraplu vindt of niet zou bijvoorbeeld een variabele kunnen zijn die verandert aan de hand van de genomen beslissingen. Emoties van de paraplu kunnen in de toekomst ook nog zorgen voor een onverwachte plot twist of voor veranderingen in het weer,

die ervoor zorgen dat jij wel of niet kan bestaan.

Over het algemeen is de game goed geslaagd in het vertellen van een verhaal. De boodschap die hij afgeeft is duidelijk, maar mocht deze game verder worden doorontwikkeld dan moet er meer aandacht worden besteed aan de verschillende levels. Er zijn ondanks dit kleine minpunt een hoop mogelijkheden gecreëerd voor een hele interessante game.

Vooral het karakter, de paraplu, speelt hierin een grote rol.

De mechanics die deze logischerwijs oproept, zorgen voor een prachtig beginpunt voor een daadwerkelijke commerciële game.