team 5
Eindproduct André van de Polder Charlotte Cozijn Rob Duits Sander Kuik Klas ROOD
André van de Polder - Charlotte Cozijn - Rob Duits - Sander Kuik 1
team 5
Inhoud What’s new..................................................03 Schermverloopdiagram...............................04 Functionaliteit.............................................05 Grafisch.......................................................05 Copy (tone of voice)...................................06 Technische architectuur..............................06 Bijlage 1......................................................07 Bijlage 2......................................................09 Bijlage 3......................................................10 Bijlage 5......................................................12 Bijlage 5......................................................13
André van de Polder - Charlotte Cozijn - Rob Duits - Sander Kuik 2
team 5
What’s new - - - -
Achtergronden gemaakt Spelelementen in elkaar gezet (swf bestand) Animaties gemaakt Naam voor het spel bedacht
Verloop We hebben afgelopen weken onze ideeën uitgewerkt. Het spelconcept heeft vorm gekregen door het maken van alle elementen. De sfeer van het spel hebben we bepaald en de karakters gemaakt. De achtergronden zijn gemaakt in illustrator, de karakters in Flash en met behulp van Flash en Actionscript hebben we van de spelelementen een interactief spel kunnen maken. In het begin was ons plan om een advertentie te plaatsen in Havana en Folia. Dit omdat we onze doelgroep, namelijk studenten, hiermee kunnen aanspreken. Er is gevraagd om een interactief element bij deze opdracht. Wij hebben toen besloten om een spel te maken. In de advertentie zou er dan verwezen worden naar het spel, wat zou komen te staan op de website van het verzetsmuseum. Het spel gaat over een joodse jongen, Isaac, die heel graag naar de voetbalwedstrijd Ajax-Feyenoord wilt. We hebben eerst alle karakters en achtergronden gemaakt en daarna de animaties. We hebben ook een nieuwe naam voor het spel bedacht, omdat ‘Licht in de duisternis’ niet meer van toepassing is op ons concept. We wilden een korte naam, met een dubbele betekenis. De nieuwe naam voor het spel is ‘Isaac buitenspel’ geworden. Dit omdat het spel om Isaac gaat, en omdat hij als Joodse jongen door de Duitsers ‘buitenspel’ gezet is. Buitenspel is een voetbalterm, zodat de naam ook te maken heeft met voetbal. Een dubbele betekenis dus. Uiteraard kan de naam veranderd worden als het verzetsmuseum dat wilt. We hebben besloten om de advertentie niet meer te doen en ons volledig te richten op het spel. Er is besloten om het spel in de tentoonstelling te plaatsen in plaats van op de site. Het spel is ontworpen op een manier die voor iedereen te doen en te begrijpen is. Kernidee Wij hebben een spel gemaakt, die gespeeld kan worden in het verzetsmuseum. Door dit spel te spelen kom je te weten wat er een joodse jongen kon doen om toch naar een voetbalwedstrijd te kunnen. Hij zou bijvoorbeeld zijn persoonsbewijs kunnen vervalsen, zijn haar kunnen blonderen en een andere jas aan kunnen trekken (zonder Jodenster). De speler moet Isaac helpen om alle benodigdheden te verzamelen: Een jas, waterstofperoxide, een krant, sleutel voor de kelder, persoonsbewijs, brood, aardappels en een voedselbon. Heeft Isaac alles verzameld? Dan is het spel uitgespeeld en kan Isaac naar de wedstrijd.
André van de Polder - Charlotte Cozijn - Rob Duits - Sander Kuik 3
team 5
Schermverloopdiagram
André van de Polder - Charlotte Cozijn - Rob Duits - Sander Kuik 4
team 5
Functionaliteit
Het spel geeft een indruk van het leven van een joodse jongen tijdens de tweede wereldoorlog. Het is de bedoeling om door middel van het spel, men wat bij te leren over voetbal in de tweede wereldoorlog. De speler leert wat er zoal nodig was voor een jood om als niet-jood over straat te kunnen gaan, en zo toch de dingen kon doen die hij wilde doen. Zoals naar een voetbalwedstrijd.
Grafisch
Alles bevind zich in een wat cartoonachtige stijl, omringende lijnen zijn dikker dan lijnen binnen objecten. Dit geheel kan een speelse en moderne look geven aan een ouder onderwerp. Dit is een toegankelijke stijl. De doelgroep kan hier bekend mee zijn, omdat dit vaker gebruikt word.
De vormgeving van de interface van het spel is heeft nu een andere sfeer ten opzichte van het prototype. Nu het spel bij voorkeur in het museum zelf geplaatst wordt zou het natuurlijk mooi zijn als het spel binnen de tentoonstelling past. Na het bezichtigen van de panelen die in het museum gaan komen, zijn wij aan de slag gegaan om ervoor te zorgen dat het spel zich kan thuisvoelen binnen één van deze panelen. Gezien het concept en een lichte, visuele aanpassing, komen wij tot de conclusie dat het spel het beste bij paneel 04 LR past. Het paneel van de jodenvervolging.
prototype Typografie Font: Platte tekst: menu: koppen:
eindproduct
Estrangelo Edessa 18pt 18pt 24pt André van de Polder - Charlotte Cozijn - Rob Duits - Sander Kuik 5
team 5
Copy (tone of voice)
Wij wilden eerst een filter verwerken in het spel waardoor het spel steeds meer kleur zou krijgen. Dat het spel eerst in zwart/wit zou zijn, en naarmate Isaac meer objecten verzameld had, dat er meer kleur zou verschijnen in het spel. In verband met ons oude concept ‘Licht in de Duisternis’. Nu we dit concept niet meer aanhouden, vonden wij het niet relevant om het filter nog te gebruiken. Het gaat er nu vooral om dat de spelers begrijpen waarom Isaac bepaalde objecten zoekt. Bijvoorbeeld dat hij zijn haar moet blonderen om niet herkenbaar te zijn als Jood. De doelgroep die wij willen bereiken bestaat uit jonge mensen. De bezoeker van het spel wordt aangesproken met je en jij, en er wordt informele taal gebruikt in het spel.
Technische architectuur
Alle code in het spel valt binnen de categorie ActionScript 2.0. De applicatie is alleen optimaal te gebruiken in combinatie met Flash Player 10. Dit is een minimale systeem eis, omdat het spel in andere versies anders afgespeeld wordt. Over alle klikbare objecten zit een onzichtbaar veld met daarin de bijbehorende code. Op deze manier kan het klikbare gebied van een knop groter zijn dan de knop zelf. Dit is erg handig op het moment dat het klikbare object erg klein is, of wanneer je niet kunt zien wat het klikbare object is. Normaal gesproken is het verstandig om ervoor te zorgen dat je direct kan zien wat er klikbaar is of niet, hoewel het in dit geval de bedoeling is dat de gebruiker op sommige momenten juist moet zoeken naar een oplossing of object.
André van de Polder - Charlotte Cozijn - Rob Duits - Sander Kuik 6
team 5
Bijlage 1
Content matrix Achtergronden Alle achtergronden worden op Illustrator formaat (.ai) opgeleverd aan Rob, daarna worden er JPEG’s van gemaakt voor in de Flash game. startscherm.jpg slaapkamer.jpg poster.jpg hal.jpg kelder.jpg woonkamer_01.jpg woonkamer_02.jpg keuken.jpg keuken_2.jpg keuken_3.jpg tuin.jpg straat_01.jpg straat_02.jpg straat_03.jpg straat_04.jpg straat_05.jpg bakker.jpg bakker-binnen.jpg gerard_hal.jpg gerard_woonkamer_01.jpg gerard_woonkamer_02.jpg persoonsbewijs.jpg (alleen als puzzel in spel komt) Personages Alle personages die in het spel voorkomen: Isaac De hoofdpersoon in dit verhaal Gerard Een vriend van Isaac Johan De vader van Gerard Maurits Bakker - Duitse soldaat Kaartjesverkoper handelaar in voetbalkaarten Klikbare elementen Deze elementen bevinden zich op het scherm en maken het mogelijk om een actie te ondernemen of naar een andere pagina te gaan. Alle klikbare elementen zijn opgebouwd in Flash zelf of aangeleverd als .png formaat. Er zijn twee soorten klikbare objecten: pickup en event handler. De pickup elementen worden opgenomen in de inventory van Isaac en zijn nodig om een actie uit te voeren. De event handler elementen zorgen voor een directe actie, zoals het overschakelen naar een nieuw scherm. Pijlen Buttons Peroxide
event handler event handler event handler
Jas sleutels krant voedselbon brood Aardappelen Voetbal ticket Persoonsbewijs
pickup pickup pickup pickup pickup pickup pickup pickup André van de Polder - Charlotte Cozijn - Rob Duits - Sander Kuik 7
team 5 Copy Het menu bestaat uit - Nieuw spel - Introductie - Over het verzetsmuseum - Help Introductie Het is 27 september 1942. Vandaag speelt Ajax tegen Feyenoord. Isaac is een Joodse jongen en wil graag naar deze wedstrijd. Door regels van de Duitsers mag hij hier niet heen. Door middel van ruilen en vervalsing kan hij misschien toch naar deze wedstrijd. Help jij hem daarbij? Praatwolkjes die voorkomen in het spel: - Hee Isaac, ik help jou wel om bij de wedstrijd te komen. Trek een oude jas van mij aan en gebruik wat peroxide om jouw haar te blonderen. De fles staat in de keuken. - Ik ben nog niet zo ver om veilig naar buiten te gaan. - Ik heb wel mijn jas nodig voor ik naar buiten ga. - Ik kan die fles maar beter laten staan. - Hee jij daar, haal eens een krant voor mij! - Hé knul, interesse in een voetbalticket? Voor een halve kilo aardappelen is deze voor jou. - Het was fijn zaken met jou te doen. - Mijn vader wilt in ruil voor het vervalsen van jouw persoonsbewijs één brood hebben. Geef mij het brood maar vast, dan helpt mijn vader jou verder. - Bedankt Isaac, mijn vader wacht binnen op jou! - Hallo Isaac, heb jij jouw persoonsbewijs bij je? - Een lekker vers brood in ruil voor een voedselbon! - Bedankt, neem dit brood maar mee. - Zo, jouw persoonsbewijs is vervalst. Nu alleen nog een voetbalticket en jij kunt naar de voetbalwedstrijd. Einde van het spel: Goed gedaan! Isaac kan nu naar de voetbalwedstrijd! Dankzij jou heeft hij alles kunnen verzamelen. Cutscenes Kleine animatiefilmpies tussen het spelen door: De trap naar beneden Deze animatie speelt af tussen slaapkamer.jpg en hal.jpg. De trap naar boven Animatie van hal naar de slaap kamer. Jas aantrekken Isaac doet zijn jas (oorspronkelijk een oude jas van Gerard) aan voor hij naar buiten gaat in hal.jpg naar straat_01.jpg Jas uittrekken Isaac doet zijn jas weer uit naar binnen van straat_01.jpg naar hal.jpg Blonderen van haren Isaac doet peroxide in zijn haar in de keuken. Lade in kastje openen Klik op lade in kastje en de lade gaat open. Geluid bakker_deurbel.wav bird_ambience.wav isaac_lopen.wav jas_aan.wav laden_open.wav pick_lock.wav traplopen.wav waterdrop.wav
een rinkelend belletje wanneer Isaac bij de bakker binnen stapt geluid van vogels in de tuin wanneer Isaac loopt (zowel binnen als buiten) Isaac trekt zijn jas aan Isaac trekt een la open bij het openmaken van het slot in de tuin wanneer Isaac op de trap loopt wanneer Isaac zijn haar blondeert
André van de Polder - Charlotte Cozijn - Rob Duits - Sander Kuik 8
team 5
Bijlage 2 Planning 5/2
Slagzin verzinnen Concreter idee voor advertentie (aanpassen aan thema vh museum) Kosten opvragen Havana Spel karakters maken Achtergronden maken
10/2
College: Sander & Charlotte ‘Vergadering’
12/2
Werkcollege met de klas. Slagzin uitkiezen Kosten Havana verwerken in verslag Karakters moeten af zijn Achtergronden verder afmaken Advertentie maken
17/2
College: Rob & André ‘Vergadering’
19/2
Achtergronden moeten af zijn Advertentie afmaken Spelprototype maken voor presentatie
24/2 26/2
Vakantie Presentatie maken Vakantie Puntjes op de i zetten
3/3
College: Rob & André Bespreken of we echt ALLES af hebben voor de presentatie. Wie neemt wat mee, wie doet wat, wat wordt er gepresenteerd…
5/3
Prototype presentatie
10/3
College: Sander & Charlotte
17/3
Webcollege
30/3 31/3
Werken aan eindproduct op school Werken aan eindproduct op school
31/3
College: André & Charlotte
2/4 6/4 7/4
Werken aan eindproduct op school Werken aan eindproduct op school Werken aan eindproduct op school
8/4 9/4
Eindproduct inleveren bij Finne Eindproduct presentatie + inleveren CD aan verzetsmuseum
André van de Polder - Charlotte Cozijn - Rob Duits - Sander Kuik 9
team 5
Bijlage 3
Takenverdeling Debriefing
Sander Rob Charlotte
Teamnaam
Rob
Logo
Rob André
Visitekaartje
Rob
Team CV
Charlotte
Persona
Charlotte Sander André
Scenario
Charlotte
Probleemstelling
Sander Rob André Charlotte
Onderzoek conclusies
Charlotte Sander
User requirement
Rob
Concept brainstorm
Sander André Charlotte Rob
Kernidee/ concept
André Rob Charlotte Sander
Moodboard
Rob
Concept Presentatie(pp)Rob Charlotte Concept Presentatie
Rob Charlotte
Taakverdeling
Rob
Scenario spel
Charlotte Rob
Wireframe spel
Rob
Karakter spel
André André van de Polder - Charlotte Cozijn - Rob Duits - Sander Kuik 10
team 5 Concept Report
Sander Charlotte Rob
Wireframe advertentie
André
Demo presentatie(pp)
Rob
Demo presentatie
Charlotte Rob
Ontwerp spel karakters
André Rob
Agenda blok 3
Charlotte
Slagzinnen advertentie
Charlotte
Achtergronden spel
Sander André Rob
Content matrix
Rob
Introductie van het spel Charlotte Spel coderen
Rob
Animatie toevoegen
Rob André
Usability Test
Rob Charlotte Sander André
Nieuwe spelnaam
Sander Charlotte Rob André
Geluidseffecten
Sander Rob
Content praatwolkjes
Rob
Verslag eindproduct
Charlotte
PowerPoint eindproduct Charlotte CD-label
Sander
André van de Polder - Charlotte Cozijn - Rob Duits - Sander Kuik 11
team 5
Bijlage 5
UI testrapport Testaanpak Een belangrijk testdoel is om erachter te komen of de huidige interface overzichtelijk is. Is het voor de gebruiker makkelijk om het spel te beginnen en is het ook duidelijk wat de bedoeling is met het spel. Wil de gebruiker direct een introductie/ instructie van het spel, of deze later tijdens het spel, of zelfs helemaal niet. Een tweede doel is de navigatie. Hoe navigeert de gebruiker door het spel en wat is het klikgedrag van de gebruiker in dit proces. Verder is het belangrijk om te weten hoe de gebruiker met de inventory omgaat. Werkt de huidige inventory of is deze juist storend. Wil de gebruiker de inhoud van de inventory de hele tijd in beeld, of zelf aanroepen.. Scenario’s De gebruiker krijgt een korte inleiding in het concept van Point & Click spellen. Vervolgens wordt de gebruiker gevraagd om naar de website (of een link/ html pagina) te gaan en te beginnen met het spel. Een uitleg van de werking van het spel moet niet nodig zijn, dat is immers ook niet mogelijk nadat het spel af is. Als de gebruiker vragen heeft of met onduidelijkheden zit, moeten deze terug te vinden zijn in de help en instructie functies. Instructies Instructies van het spel zijn verwerkt in het spelscherm.
André van de Polder - Charlotte Cozijn - Rob Duits - Sander Kuik 12
team 5
Bijlage 5
Waarnemingen Usability Test Testdoelen Ons doel is om te kijken of ons spel goed te spelen is. We willen onderzoeken welke delen in het spel onze testpersonen snappen en welke niet. En of alle dingen die wij in ons hoofd hebben, ook zo duidelijk zijn voor anderen. Opdrachten/scenario’s Verzamel alle dingen die Isaac nodig heeft om uiteindelijk naar de voetbalwedstrijd te kunnen. Alle dingen die hij nodig heeft pak je door er op te klikken waarna ze in je inventory bewaard worden. Heb je alles verzameld? Dan mag hij naar de wedstrijd! Taakverdeling Prototype aanpassen Schriftelijke opdracht maken Bijstaan van de testpersonen Testwaarnemingen verwerken
Rob, André Sander Charlotte, Sander Charlotte
Proefpersonen Wij hebben twee personen ons spel laten testen. Beide personen zitten in onze doelgroep. Fleur en Mo, beiden zijn student. Verbeterpunten: - Het moet duidelijker zijn waar je op kan klikken - Inventory wordt niet opgemerkt. - Het is niet duidelijk wat je moet verzamelen. - Het begin van het spel is niet duidelijk, misschien te verbeteren door in de intro te laten weten dat je op ‘nieuw spel’ moet drukken. - Er wordt in de hal vaak op de verkeerd jas gedrukt. - De ‘Help’ functie wordt niet gebruikt. - ‘Over museum’ wordt niet bekeken. Punten die goed gingen: - Het was duidelijk dat ze de pijlen moeten gebruiken om van scherm te veranderen. - De intro werd gelezen. - Het spel ziet er aantrekkelijk uit.
André van de Polder - Charlotte Cozijn - Rob Duits - Sander Kuik 13
