bart de boer ontwerpdocument
inhoudsopgave Game Artists
3.0 Kleur en typografie 24
Stan Rooseboom (552541)
3.1 Kleur
Naomi De Rop (552331)
3.2 Typografie
1.2 Stijl en vormgeving 7
Game Developer
4.0 Sound 30
1.3 Waarom 3D? 8
DaniĂŤl Neulen (546888)
4.1 Voice over
4.2 Sound effects
0.0 Inleiding 4 1.0 Beeldmateriaal
1.1 Programma dat we gebruiken
6
2.0 Interface
Game Designers
2.1 Interface startscherm 10
Melissa Oliemeulen (528575)
5.0 Assets 34
Jesse Veen (551959)
2.2 Interface introductie en game
14
2.2.1 Ontwerp minigames
2.3 Interface reward scherm 18
SEGA Project
2.4 Ontwerp menu’s 22
Bart de boer
inhoudsopgave
2.4.1 Interface menu
Alle assets die zijn gemaakt + uitleg
Bijlagen
Bijlage 1: Rekenspellen analyse
Bijlage 2: Rekenboeken analyse
2.4.2 Ontwerp voortgangsmenu
Product Owner: Niels Riethorst
Bijlage 3: Gamemenu interface
2.5 Ontwerp eindscherm 23
Expert: Erik Kuiper
Bijlage 4: Voortgangsmenu interface
Procesbegeleidster: Ursula Driessen Ontwerpdocument versie 11
4
0.0 Inleiding
ontwerpdocument / inleiding
ontwerpdocument / inleiding
Wij zijn Daniël Neulen, Melissa Oliemeulen, Stan
In het hoofdstuk beeldmateriaal wordt het programma beschreven
Rooseboom, Naomi de Rop en Jesse Veen. Wij
dat is gebruikt om de modellen te maken en wordt er verder
studeren Communicatie en Multimedia Design
ingegaan op de stijlkeuze.
aan de HAN in Arnhem. Voor het semester Serious Gaming bedenken wij een concept met een
In ‘Interface’ staan de schetsen en het uitgewerkte materiaal van de
serieus doel en werken wij dit uit tot een werkend
interface en elementen van het spel.
prototype. In het hoofdstuk ‘Kleur en typografie’ worden de keuzes uitlegd wat In dit document worden de keuzes beschreven
betreft kleur en typografie.
wat het ontwerp van de game betreft en hoe er tot deze keuzes zijn gekomen.
Geluid doet heel veel voor een spel en in het hoofdstuk ‘Sound’ worden de voice-overs en de sound effects beschreven. In het laatste hoofdstuk ‘Assets’ staat alle ontworpen content met daarbij een motivering.
5
6
1.0 beeldmateriaal
ontwerpdocument / beeldmateriaal
In dit hoofdstuk wordt het programma beschreven dat is gebruikt om content te ontwerpen en de stijl en vormgeving die is gekozen voor het spel. Deze komt voort uit analyses en inspiratie voorbeelden.
ontwerpdocument / beeldmateriaal
1.2 Stijl en vormgeving
1.1 Programma dat we gebruiken Het programma dat is gebruikt om content te ontwerpen is Blender, versie 2.77. Blender is een programma waarmee 3D modellen gebouwd kunnen worden. We hebben hiervoor gekozen omdat er al ervaring mee is in de groep. Wanneer de modellen klaar zijn konden deze gelijk vanuit Blender naar Unity worden geĂŤxporteerd. In Unity is de uiteindelijke game gebouwd en gecodeerd. In Blender worden ook de assets geanimeerd. Dit om te zorgen dat de wereld er dynamischer uit komt te zien.
Om de modellen kleur te geven maken we de textures in Adobe Illustrator. Hieronder zie je twee voorbeelden van textures die zijn gemaakt.
Van de stijlen die ons hebben geĂŻnspireerd is er een moodboard gemaakt. Bob de bouwer is de grootste inspiratiebron geweest voor het model van Bart de boer. De meeste stijlen die je ziet zijn in 3D, dat is omdat wij ons spel ook in 3D gaan maken. In de bijlagen vind je twee concurrentie analyses over vormgeving. De eerste is een analyse van bestaande reken spellen en de tweede over bestaand rekenles materiaal. In de analyses staan conclusies over kleur, geluid, typografie en nog meer. De punten uit de conclusies gaan we ook gebruiken voor ons spel.
7
hoofdstuk broodkruimel
8 1.3 Waarom 3D?
Er is gekozen om de game volledig in 3D te maken. Deze keuze is gemaakt omdat er uit eigen interviews met kinderen van onze doelgroep is gebleken dat zij bijna elke dag een spel spelen dat in deze stijl is gemaakt. Ook bestaan er nog maar weinig rekengames die in 3D zijn gemaakt. Daarom ligt bij ons de uitdaging om een rekengame te bouwen in 3D die de kinderen aanspreekt.
hoofdstuk broodkruimel
Hier zie je een eerste uitgewerkte schets van Bart de boer. Deze is gebaseerd op het moodboard van hierboven (zonder de 3D). Na deze schets zijn we bezig gegaan met het ontwerpen in 3D maar dat vind je terug in het laatste hoofdstuk ‘Assets’.
inhoudsopgave
9
10
ontwerpdocument / interface
2.0 interface
In dit hoofdstuk wordt beschreven hoe de gebruiker kan communiceren met het systeem en het daardoor kan spelen. 2.1 Interface startscherm Het spel begint bij het startscherm. Op het startscherm staat het logo en de speelknop. Op deze knoppen kun je klikken met je vinger. Door op de speelknop te klikken begint het spel. Onder de speelnop vind je een tandwieltje, door hierop te klikken verschijnen de instellingen, hierin zou de docent of de leerling eventueel het geluid aan kunnen aanpassen. (Het woord ‘klik’ zie je niet in het echt, het is om de interactie met de interface duidelijk te documenteren.)
bart de boer + op de leerboerderij -
'klik'
ontwerpdocument / interface
De interface van het startschermis getest bij onze doelgroep. De kinderen vonden het duidelijk en overzichtelijk, ze begrepen hoe ze konden beginnen en waar het zich afspeelt.
11
12
ontwerpdocument / interface
ontwerpdocument / interface
13
Als je op het tandwiel hebt geklikt krijg je de instellingen te zien. Hier heb je keuze om het geluid aan te passen van de voice-over of van het achtergrondgeluid. Je kan het spel opslaan en afsluiten of terug gaan naar het spel. Als je ĂŠĂŠn van de twee laatste kiest dan krijg je nog een bevestiging vraag of je dit zeker weten wilt doen.
Wil je opslaan en afsluiten?
Wil je terug naar het spel?
14
ontwerpdocument / interface
2.2 Interface tutorial en game Als je op de speelknop hebt gedrukt dan ga je door naar een laadscherm, in dit laadscherm krijg je uitleg over de besuring van het spel.
ontwerpdocument / interface
Hieronder zie je een screenshot van het prototype in week 4, daar op zijn de knoppen geplaatst om te laten zien hoe het eruit gaat zien. Links onder in vind je de joystick die gebruikt om rond te lopen in het spel. De knoppen rechts onder kan je gebruiken om objecten of dieren op te pakken en springen. Je leest meer over de knoppen boven in het scherm in de hoofdstukken 2.4 en 2.4.2.
Ook dit laadscherm is getest bij de doelgroep. Het moet lang genoeg in beeld zijn om zelf te lezen, op de achtergrond is ook een voice-over te horen. Het plaatje van de ogen was eerst een camerasymbool, waarbij ĂŠĂŠn jongen dacht dat je daarmee een foto kon maken van jezelf en op Bart de boer kon plakken. Zeker een heel leuk idee maar niet de juiste uitleg van de besturing dus is dit aangepast. Wat we ook als feedback kregen was om de instructie in een video te maken. Een heel goed idee, voor het prototype gaan we dit niet uitwerken maar in het ideale spel had dit wel uitgewerkt kunnen worden. Een jongen vond de aankleding nog wat kaal en wilde wel wat meer bomen zien of Bart die af en toe een grapje maakt. (de zwarte woorden tussen haakjes zie je niet in het echt, het is om de interactie met de interface duidelijk te documenteren.)
15
16
ontwerpdocument / interface
2.2.1 Ontwerp minigames In het prototype zijn er twee minigames uitgewerkt. Als je het wilt gaan spelen komt er eerst een scherm met uitleg over het spel. Hieronder zie je hoe de uitleg word laten zien. Er komt ook een voice over bij die het uitlegt. Er zijn twee soorten niveau’s bij het eieren tellen.
ontwerpdocument / interface
In de tweede minigame moet je koeien combineren om tot een getal te komen. Dit doe je door de koeien op te pakken en in het juiste vak te zetten. In het begin krijg je een instructie, hieronder zie je het ontwerp daarvoor. Dit word versterkt met een voice-over die het erbij uitlegt.
17
ontwerpdocument / interface
18
ontwerpdocument / interface
2.3 Interface reward scherm Na het spelen van een minigame krijgt de gebruiker feedback en een beloning. Beloningen zijn erg belangrijk in een spel omdat het een kind kan stimuleren om verder te blijven spelen. In het prototype zijn er twee soorten beloningen: een tractor en een huisdier. Deze beloningen win je als je een minigame goed hebt gespeeld. De tractor verschijnt in de schuur op de boerderij. Bij een huisdier mag je kiezen tussen een kat en een hond. Deze lopen automatisch achter je aan.
Tractor
19
20
ontwerpdocument / interface
ontwerpdocument / interface
Huisdier Als er een huisdier gekozen is dan hoor je het geluid van dat dier, zoals een blaf of een miauw.
21
ontwerpdocument / interface
22 2.4 Ontwerp menu’s
In dit deel van de interface vind je de ontwerpen voor het hoofdmenu en het voortgangsmenu. 2.4.1 Interface menu Terwijl je het spel speelt kan je het menu naar voren halen. Deze knop staat rechts bovenin. In de bijlage vind je hoe de interface verloopt als je hierin keuzes maakt. 2.4.2 Ontwerp voortgangsmenu Links boven in het scherm kan je het voortgangsmenu naar voren halen. Hierin vind je informatie over de rewards die je al hebt ontvangen of gekozen. Hoeveel onderdelen je al hebt voltooid en wat je nog kan spelen. Bij de ontwerpen die je al langs hebt zien komen zie je deze button nog niet zitten. Dit omdat we na overleg het eens waren geworden dat dit een belangrijk onderdeel is om nog te ontwerpen. Voor het overleggen waren die ontwerpen al gemaakt. Dit menu vind je in de bijlage.
ontwerpdocument / interface
2.5 Ontwerp eindscherm Bart de boer is op een bepaald moment uitgespeeld. Dat kan voordat groep 3 is afgelopen of wanneer je net naar groep 4 gaat. Voor beide is er een vervolg. Er kunnen speciale levels worden gemaakt om nog in groep 3 te spelen. Bijvoorbeeld een uitstapje naar onder de grond, waarbij je onder de grond minigames kan spelen. Of minigames in het bos dat naast de boerderij staat. Als je al naar groep 4 gaat kan Bart meegaan. Er kan bijvoorbeeld Bart de Astronaut komen. Waarbij de minigames een niveau hoger worden gemaakt en een ander thema bij wordt gegeven.
23
24
3.0 Kleur en typografie
ONTWERPDOCUMENT / KLEUR EN TYPO
Hieronder vind je het logo van Bart de boer:
ONTWERPDOCUMENT / KLEUR EN TYPO
Hieronder zie je andere schetsen die zijn gemaakt voor het logo. Er is als team besloten dat linksonderin het beste logo zou zijn voor het spel. Het valt op wat er staat en er worden frisse kleuren gebruikt.
Het logo bestaat uit beeld en tekst. ‘Bart de boer, op de leerboerderij’ is de tekst. Daarboven zie je een afbeelding van een boerderij met een stal en een paar dieren.
25
ontwerpdocument / kleur en typo
26 3.1 Kleur
hoofdstuk broodkruimel
#f6b64c
De kleuren die gebruikt worden zijn realistische kleuren. Het is daarom niet mogelijk om te zeggen dat we ons houden aan een aantal vaste kleuren. Hout is bruin, metaal is grijs/ zilver, enzovoorts. Verder wordt er geen
#0392cb
gebruik van realistische materialen, hout is bijvoorbeeld alleen de kleur bruin. In het startscherm en logo zijn wel standaard kleuren die we gebruiken. Deze kleuren komen
#ed1c24
uit de eerste uitgewerkte schets van Bart de boer. Deze kleuren passen, uit de analyses, ook goed bij de doelgroep en bij het spel.
#a34924 #90c73e
27
ONTWERPDOCUMENT / KLEUR EN TYPO
28
ONTWERPDOCUMENT / KLEUR EN TYPO
3.2 Typografie In het logo vind je de twee fonts die worden gebruikt in ons spel. Het is een schreefloos font, met ronde vormen. Dit spreekt de kinderen aan vanwege de vriendelijke en kinderlijke vorm. In de analyses van de rekenboeken en rekenspellen lees je waarom een schreefloos font en ronde vormen kinderen goed aanspreekt.
bart de boer mari&david regular op de leerboerderij mf be yourself
Het leerdoel zal bereikt worden wanneer er interesse is van de leerling. Want wanneer een leerling interesse heeft dan bereik je onderwijs! - Arthur C. Clarke.
29
30
4.0 sound
ontwerpdocument / sound
Geluid is een belangrijke factor in het spel. Achtergrondgeluiden geven een hele eigen sfeer aan het spel. Je wordt omgeven door geluiden van de boerderij en een vrolijk muziekje. Er is ook een voice-over, deze werkt als facilitator in het spel. Er zijn twee stemmen, de stem van Bart de boer en een stem die dingen uitlegt zoals de besturing en de minigame. Hieronder zie je de lijst met geluiden en voice-overs voor het prototype van ons spel. In de bijlagen vind je ook een map met alle bestanden.
ontwerpdocument / sound
Karakter Bart de boer loopt - voetstappen.ogg Bart de boer rent - ‘’Pom pom pom.’’ Bart de boer springt - ‘’Hop.’’
Dieren Koeien, kippen, varkens, hond en kat. Vogel gefluit in de achtergrond ‘’...’’
Voice-over algemeen Tutorial Voice-tutorial: ‘’Leg je apparaat plat neer zodat je alle twee je handen vrij hebt. Bestuur de joystick links onder om te lopen. Gebruik het handje om objecten of dieren op te pakken en spring met de knop rechtsonder.‘’
Spel geluid Intro scherm Introscherm.mp3
Start van het spel Bart: ‘’Dit is mijn boerderij. Er moet vandaag nog veel gebeuren, waar zullen we beginnen?’’
Achtergrond geluid Je mag dit nummer gebruiken en inkomsten genereren met je video als je de volgende verklaring opneemt in de videobeschrijving: Bama Country - Country van Kevin MacLeod is gelicentieerd onder een Creative Commons Attribution-licentie (https://creativecommons.org/licenses/by/4.0/) Bron: http://incompetech.com/music/royalty-free/index.html?isrc=USUAN1100359 Artiest: http://incompetech.com/
Einde van het spel Bart: ‘’Bedankt voor je goede hulp. Laten we samen weer op avontuur gaan!’’
Spel geluiden acties Selecteren ‘’Plop.’’ of ‘’Plok.’’ Unlocken reward ‘’Pling!’’
Afsluiten van het spel Bart: ‘’Je bent altijd welkom op de boerderij. Tot de volgende keer!’’ Tijdens het rondlopen Bart: ‘’...’’ Fluiten Bij het kippenhok Bart: ‘’Wat was er eerder; het ei of de kip?’’ … ‘’Ik weet het ook niet.’’ Bij de weides Bart: ‘’Mijn koeien genieten van het goede leven!’’
31
ontwerpdocument / sound
32
Voice-over minigames (Tellen) Minigame: Kippenhok Start minigame Bart: ‘’Zoveel eieren kan ik niet op bij het ontbijt, dus ik kan ze beter verkopen. Laten we ze tellen!’’ Voice-tutorial ‘’Tel de eieren.‘’ Voice-tutorial “Tel de hele eieren”: ‘’Er liggen hele eieren en kapotte eieren. Tel de hele eieren en trek dan het aantal kapotte eieren er van af.‘’ Goed antwoord Bart: ‘’Goed geteld!’’ Fout antwoord Bart: ‘’Bijna goed, maar ik wil graag het precieze aantal eieren weten.’’ Einde minigame Bart: ‘’Fantastisch geteld!’’ - ‘’Toktastisch!’’
(Combineren) Minigame: Koeien velden Achtergrond muziek Rockytop Je mag dit nummer gebruiken en inkomsten genereren met je video als je de volgende verklaring opneemt: Rockytop van Audionautix is gelicentieerd onder een Creative Commons Attribution-licentie. (https://creativecommons.org/licenses/by/4.0/) Artiest: http://audionautix.com/ Voice-tutorial: ‘’Alle koeien hebben een aantal vlekken. Bij de twee kleine weides staat een bordje met hoeveel vlekken er in totaal in de weide moeten. Verplaats de koeien door ze op te pakken.’’ Start minigame Bart: ‘’Ik ben er klaar voor!’’ Koe verplaatst Bart: ‘’Hoppakee.’’
ontwerpdocument / sound
Fout antwoord Bart: ‘’Moo! De koeienvlekken zijn nog niet goed verdeeld.’’ - ‘’Het klopt nog niet precies.’’ Einde minigame Bart: ‘’Dat hebben wij koetastisch goed verdeeld!’’
33
34
5.0 assets
ontwerpdocument / assets
In dit hoofdstuk geven wij alle door ons gemaakte assets weer. Voor elke asset is er onderzoek gedaan naar de stijl en naar de kleuren. Uit het onderzoek hebben wij onze eigen 3D modellen kunnen maken die onze eigen stijl hanteert. Deze modellen hebben we gemaakt met het programma Blender, in sommige modellen zit een animatie, deze hebben wij ook met Blender gemaakt.
ONTWERPDOCUMENT / ASSETS
3535 Dit zijn de kippenren en de schuur van Bart de Boer. In de kippenren kan een minigame gespeeld worden waarbij je een aantal eieren moet tellen die door de ren verstopt
Dit is het 3D model van Bart de Boer, hij staat hier in een standaard T positie zodat hij beter geanimeerd kan worden. De lichaamsverhouding van Bart
liggen. Naast de kippenren zie je een poop deck, dit is het interieur van de ren en deze zie je terug in de minigame.
is voornamelijk gebaseerd op Bob de Bouwer. Daarbij is er ook gekeken naar kleurplaten waar boeren op getekend zijn, deze hebben wij gecombineerd en zijn zo op Bart de Boer gekomen.
Als je de minigame van de kippenren hebt uitgespeeld dan speel je een tractor vrij, deze komt te staan in de schuur.
36
ontwerpdocument / assets
Als decoratie zijn er diverse onderwerpen toegevoegd aan de boerderij van Bart de Boer. Door deze decoraties lijkt de wereld op een echte boerderij.
Je
ziet hier een hooivork, een
hooibaal,
een
boom en een emmer.
ONTWERPDOCUMENT / ASSETS
37
38
ontwerpdocument / assets
ONTWERPDOCUMENT / ASSETS
39
Dit is het model van een koe die
Dit is het model van een kip die in 3D is
in 3D is gebouwd. De koe gaat
gebouwd. De kip gaat een rol spelen in een
een rol spelen in een minigame
minigame waarin je het aantal eieren in de
waarin je het aantal vlekken op
kippenren moet tellen.
de koe moet tellen. Om deze reden hebben
de koeien in de
game allemaal een verschillend aantal vlekken.
40
ontwerpdocument / assets
ONTWERPDOCUMENT / ASSETS
41
Dit is het model van een varken
Dit is het model van een schaap
die in 3D is gebouwd.
die in 3D is gebouwd.
42
ontwerpdocument / assets
ONTWERPDOCUMENT / ASSETS
Om aan te geven dat Bart de Boer ook echt op de boerderij woont is er een 3D model van zijn huis gebouwd. Om de weilanden met verschillende dieren af te scheiden zijn er een aantal hekken gemaakt. Het hek wat je op de deze pagina ziet dient als deur naar het weiland, wanneer je hierdoor heen loopt start de minigame.
43
44
ontwerpdocument / assets
ONTWERPDOCUMENT / ASSETS
45 Als decoratie zijn er diverse onderwerpen toegevoegd op de boerderij van Bart de Boer. Door deze decoraties lijkt de wereld op een echte boerderij. Je ziet hier kruiwagen en een gieter.
Na het spelen van sommige minigames krijg je de optie om een huisdier te kiezen, deze opties zijn een kat en een hond. Als je de kat hebt gekozen verschijnt een kattenhok op de boerderij met een kat er bij en als je de hond hebt gekozen verschijnt er een hondenhok met een hond erbij.
ontwerpdocument / assets
46
ONTWERPDOCUMENT / ASSETS
Na het spelen van de minigame in de kippenren verschijnt de traktor in de schuur van Bart de Boer, in de traktor kun je rondrijden over de boerderij. Om te zorgen dat de omgeving niet statisch overkomt zijn er een aantal animaties er in verwerkt. Hieronder zie je een vijver waarin een gans rondjes zwemt. Ook is er een bewegende molen toegevoegd aan de wereld, hierdoor leeft de wereld meer en lijkt het alsof het een beetje waait. Voor 2 mogelijke minigames zijn er ook modellen gemaakt van een aantal planten. Dit zijn de tomatenplanten en de maĂŻsplanten.
47
48
ontwerpdocument / assets
Je kan nog meer objecten winnen dan alleen een tractor. Hier heb je een graafmachine, die je ook kan winnen als je een minigame goed hebt gespeelt. Hier kan je ook in rijden.
ONTWERPDOCUMENT / ASSETS
49 Hiernaast zie je een oude molen die ook is ontworpen om op de boerderij te staan.
bart de boer + op de leerboerderij -