Design Document Rigit Namen:
Stijn Schouten - 503835 Lars Mulder - 511692 Harald Velner - 504535 Peter Otten - 510622 Rene Reijnen - 504516
Docent: Klas: Datum: School: Groep:
Elisa van Tuijl CRIA Project Juni 2014 HAN 15
1
Inhoudsopgave Opdracht 03 Concept 04 Inleiding 05 Website 06 Game 17 Bijlage 28
2
opdracht opdracht Vanuit het Gerrit Komrij college in Winterswijk, kregen wij de opdracht om een game te maken die kinderen interesseert in natuurkunde. Aangezien het aantal kinderen dat op de middelbare school een natuurkundig profiel kiest verminderd. Ons doel is dus om ervoor te zorgen dat de kinderen door de game die wij gaan maken te interesseren in natuurkunde, maar tegelijkertijd ook voor de kinderen die sowieso weten dat ze geen natuurkunde willen doen, een leuke game neerzetten.
3
Concept De game die we gaan maken voor de middelbare school heet Rigit. De game zal ervoor zorgen kinderen op een speelse manier leren hoe belangrijk/leuk natuurkunde is. De kinderen kunnen een voertuig maken, en vervolgens met het voertuig wat ze gemaakt hebben verspringen in de game. Het kan zo gek als ze willen, geen wielen maar een hover aan de onderkant? Prima! De gebruikers kunnen hun eigen voertuig geheel naar hun voldoening maken.
4
Inleiding Wij zijn het team dat achter de vormgeving staat van de webapplicatie Rigit. We kregen de opdracht van het Gerrit Komrij College in Winterswijk om een game te maken die middelbare scholieren interesseert in natuurkunde. Ons doel is dan ook om dit te realiseren, maar er ook voor te zorgen dat de game leuk is voor kinderen die sowieso geen interesse hebben in natuurkunde. Wat we ons tijdens het ontwerpen dan ook hebben afgevraagd is; hoe maken we een game over natuurkunde leerzaam en cartoony? Deze vraag beantwoorden we in de loop van het document.
5
Website
6
7
Vormgeving website uitleg De kleuren blauw en groen die gebruikt zijn in de vormgeving van de website zijn beiden onderzocht in de design study. De blauwe kleur straalt namelijk rust en leerzaamheid uit. En de groene kleur is een instinctieve kleur. In de buitenwereld wordt de kleur ook veel gebruikt om aan te tonen dat iets “mag”. Zoals bijvoorbeeld bij stoplichten, als het stoplicht op groen staat mag de bestuurder doorrijden. De fonts die gebruikt zijn, zijn gebaseerd op de merkwaarde “cartoony”. Ze hebben een speelse en wat kinderlijkere uitstraling. In de design study hebben we hiernaar onderzoeken gedaan om de beste samenstelling lettertypen te vinden, dat zijn uiteindelijk CHUNK, Grobold en Roboto geworden. De ronde vormen die te zien zijn in de vormgeving van de webapplicatie zijn gekozen omdat dit een jonge uitstraling heeft. Bij sites van lego en in de game van angry birds wordt dit ook gebruikt, dit is te zien in het Research & concept document en de Design Study. In de design study hebben we veel navigatiebarren onderzocht, maar geen enkele vonden we passend bij de huisstijl. Toen hebben we de inspiratie van een knop uit Bad Piggies (een spel van Rovio) genomen. En hebben we onze eigen uitwerking ervan gemaakt, om de meest passende “cartoony” navigatie te krijgen. 8
9
home uitleg De homepagina dient ervoor om de gebruikers te registreren. Hierdoor kunnen ze de voortgang opslaan en op een later tijdstip verder gaan. Wanneer ze er toch voor willen kiezen om zonder een account te spelen, hebben we die optie ook opgenomen op de site. De gehele website is vormgegeven in twee kolommen, behalve de game. Dat hebben we tijdens het onzerdoek naar grid besloten, dat we in de design study gedaan hadden.
10
11
account uitleg De accountpage is alleen te bezoeken als de gebruiker ingelogd is. Wanneer het een gebruiker is die nog niet was ingelogd en dus gewoon het spel is gestart, kan hij niet naar deze pagina, en word hij doorverwezen naar het maken van een account. De gebruiker met account kan hier zijn wachtwoord en e-mail veranderen. Verder is linksbovenin te zien wie er ingelogd is.
12
13
Over ons uitleg Op de pagina “Over ons� is te vinden wie dit spel hebben gemaakt en wat het spel precies eigenlijk inhoudt. Het is niet een pagina die het concept versterkt, of die erg belangrijk is. Maar het is toch een leuke manier om je stempel ergens op te drukken.
14
15
contact uitleg De contactpagina is bedoeld om ervoor te zorgen dat Rigit te bereiken is voor de gebruikers, als ze vragen hebben, vastlopen of gewoon willen laten weten dat ze het spel leuk vinden om te spelen. Rigit is zowel via social media als met telefoon en e-mail te bereiken.
16
Game
17
18
Game begin Uitleg De onderzoeken die gedaan zijn in de design study naar alle verschillende game-elementen, zoals de achtergrond en ook de baan zelf (waar het voertuig op moet rijden), hebben ervoor gezorgd dat deze stijl de uiteindelijke stijl is geworden die binnen de game gehanteerd ging worden. Het terugkomen van de bruine, blauwe en groene kleuren zijn belangrijk voor de game. Verder is ook in de game gekozen voor de cartoony fonts die gekozen zijn door de design study. Op deze pagina hoeft de gebruiker alleen op speel te drukken, en dan gaat hij naar de game. Als de gebruiker nog niet was ingelogd, krijgt hij rechtsbovenin de navigatie nog de mogelijkheid om te registreren of in te loggen. De achtergrond van de game is gekozen naar aanleiding van het onderzoek dat naar games is gedaan in de design study naar verschillende cartoony games. Deze games gebruikten lagen met verschillende kleuren, waardoor de achtergrond rijker werd, dit hebben wij ook toegepast op de game.
19
20
Game level kiezen Uitleg Bij het kiezen van een level krijgt de gebruiker aan het begin maar 1 mogelijkheid, dat level moet gehaald worden. De rest van de levels staan nog op een slotje, wat ervoor zorgt dat de gebruiker weet dat hij deze nog moet vrijspelen. Het pijltje onderin suggereert dat er nog meerdere levels zijn die gespeeld kunnen worden. De verschillende kleuren zijn gebruikt om te laten weten wat voor soort milieu het level bevat. Bij bruin is dat een normale ondergrond, bij blauw is dit bijvoorbeeld ijs. De iconen zijn ook onderzocht in de design study.
21
22
Game voertuig maken Uitleg Dit is het deel waar de gebruiker zijn voertuig kan gaan maken. Wanneer de gebruiker 1 van de stukken grid aanklikt, kan hij iets toevoegen aan dat stuk van het grid. Dat wil zeggen dat, wanneer de gebruiker wielen wil toevoegen, de gebruiker op de wielen onderaan klikt, en vervolgens onderin de onderdelen krijgt te zien, die daarvoor zijn gemaakt. Rechtsbovenin staan de natuurkundige elementen die bedoeld zijn om de voertuigen verschilend en uniek te maken. Door deze drie variabelen zal het voertuigje anders gaan funtioneren. De slotjes hebben dezelfde functie als die van het kiezen van een level, ze moeten eerst vrijgespeeld worden. Naast het feit dat je je voertuig kunt bouwen in het grid, kun je ook onderin op het knopje “garage� klikken om bij je voertuigen te komen. Hier zie je drie voertuigen die je eerder gemaakt had. Dit deel van de game is meer gericht naar het nerdy/geeky deel van de doelgroep, door de grijzere kleuren en de achtergrond die allerlei elementen bevat waarvan deze doelgroep herkenning krijgt, hebben we ook dat deel van de doelgroep in onze stijl verwerkt. De onderdelen die gemaakt zijn, werden onderzocht in de design study. Bij games als Bad piggies en Happy wheels hebben we inspiratie vandaan gehaald. Hieruit hebben we weer een eigen uitwerking van gemaakt. De onderdelen zijn te vinden in de bijlage. 23
24
Game level spelen Wanneer de auto gemaakt is, kan de gebruiker het spel gaan spelen. Het voertuig komt op het level te staan, en als hij goed gemaakt is, en er rekening is gehouden met het level, kan hij het level halen en doorgaan naar het volgende level.
25
26
Game level afgerond Als de gebruiker het level heeft gehaald, krijgt hij een pop-up met daarin het aantal sterren dat hij behaald heeft, hoe sneller het ging, hoe meer sterren. Verder kan de gebruiker nog kiezen om terug te gaan met de terugknop naar de garage, maar ook kan hij delen hoe ver hij is gekomen via Social media. Ook is er een optie om het level opnieuw te spelen en naar het volgende level te gaan. De kleuren zijn een mix van de kleuren die in de garage gebruikt werden, en de kleuren die op de website te zien zijn.
27
Bijlage
28
onderdelen
29
Blocks voor het level
30
Voertuigen
31
32