Multimedia Authoring Peter van der Giessen IMM. In samen werking met Robert de Kuijer

Transcriptie

1 Multimedia Authoring 2014 Peter van der Giessen IMM In samen werking met Robert de Kuijer

2 1 Introductie: Het vak Multimedia Authoring, hierna te noemen MA, bestaat uit een aantal opdrachten die moeten worden gemaakt. Deze opdrachten waren het maken van een logo, mediaviewer, annotation editor, essay en applicatie. De applicatie wordt gezien als hoofd/eindopdracht. Alle opdrachten moeten beschikbaar worden gesteld via een online portfolio. Je zou kunnen zeggen dat het maken van een degelijke website waarop alle opdrachten te vinden zijn, dus ook tot een van de opdrachten behoort. Naast de bovenstaande opdrachten, zijn er ook een aantal optionele opdrachten. Deze optionele opdrachten bestaan uit het maken van een worst web-page, measurements en een moodboard. Wij hebben gekozen om van deze optionele opdrachten, het moodboard te maken. Bij het vak MA is het gebruikelijk dat je samen met iemand een team vormt en als team samenwerkt aan alle opdrachten en dus ook gezamenlijk verantwoordelijk bent voor het eindresultaat. Ik heb samen met Robert de Kuijer een team gevormd. Ik ben erg blij dat ik ook bij dit vak met Robert samen kon werken. Wij kennen elkaar al jaren, zien elkaar meerdere keren per week en hebben een grote hoeveelheid aan opdrachten samen gemaakt. Groot voordeel bij het maken van opdrachten is dat wij inmiddels precies weten wat we aan elkaar hebben. Daarnaast wonen wij nog geen vijf minuten bij elkaar vandaan. Hierdoor kunnen wij elkaar zonder al te veel moeite opzoeken en bij elkaar aan de opdrachten werken, dat is wel zo prettig. In dit essay zal ik beschrijven hoe de samenwerking en de uitvoering van de verschillende opdrachten is verlopen, tegen welke problemen wij zijn aangelopen, waarom wij bepaalde keuzes hebben gemaakt en van welke technologieën wij gebruik hebben gemaakt. Website: Zoals bij de introductie al vermeld, moeten alle opdrachten beschikbaar worden gesteld via een online portfolio. Omdat ik al enige ervaring heb met het maken van websites en zelf ook al een aantal websites gemaakt heb, kon ik een van mijn creaties gemakkelijk hergebruiken voor dit vak. Het maken van een online portfolio was daarom snel gedaan. De website is gemaakt met behulp van een Bootstrap thema. Hier heb ik zelf een groot aantal wijzigingen en functionaliteiten aan toegevoegd. De website is gemaakt in HTML en maakt daarnaast gebruik van Javascript. Voor het maken van de website heb ik gebruik gemaakt van het programma Sublime Text. Opdracht 1: Logo De eerste echte opdracht was het maken van een logo. Robert en ik hebben enige tijd zitten brainstormen en zijn uiteindelijk op het idee gekomen om een strak en simpel logo te maken, waarin de voorletter van onze namen verwerkt zijn. Voor Robert de R, voor mij de P. De letters P en R verwijzen naar onze namen, maar wij besloten dat we het logo toch graag nog wat persoonlijker hadden. Daarom hebben we in de ronding van allebei de letters een foto van ons gezicht geplaatst.

3 2 De achtergrond van ons logo is blauw en de rand is lichtblauw. We hebben bij het maken van ons logo rekening gehouden met het ontwerp en de kleuren van onze website. Zo is de achtergrond kleur van ons logo, dezelfde kleur blauw als de achtergrond van onze website. De rand is op zijn beurt weer van de zelfde kleur blauw als de kleur blauw die wij gebruiken bij de menu-bar van onze website. Het maken van ons logo was best een tijdrovend klusje. Eerst hebben wij foto s gezocht waar onze gezichten duidelijk op te zien zijn. Ver volgens hebben we onze gezichten op deze foto s uitgesneden met behulp van Adobe Photoshop. We beschikte toen over twee losse foto s van onze gezichten en hierbij viel op, dat als we deze zo in het logo zouden plakken, er een te groot contrast zou zijn qua belichting. Daarom hebben we de belichting van beide foto s eerst aangepast met behulp van Adobe Lightroom. Daarnaast konden we in dit programma de zichtbare achtergrond restanten weghalen. Toen beide foto s klaar waren, konden we deze vrij eenvoudig in ons logo plakken. De letters, achtergrond en overige onderdelen van ons logo zijn overigens ook gemaakt met behulp van Adobe Photoshop. Opdracht 2: Media viewer Het maken van de mediaviewer was meer werk dan ik in eerste instantie had verwacht. Ik heb op een van mijn eigen sites een fotocollage en dacht deze zo te kunnen gebruiken voor de mediaviewer. Dat was echter niet het geval. Omdat de mediaviewer een vooraf gedefinieerd formaat heeft, kwamen twee van de drie foto s totaal verkeerd in beeld. Om deze reden is het formaat van de mediaviewer aangepast. Dit bleek echter niet voldoende en de foto die in eerste instantie wel goed in beeld kwam, werd door dit nieuwe formaat ook verkeerd afgebeeld. Hierdoor waren wij genoodzaakt om van alle foto s die wij in de mediaviewer wilde gebruiken, de formaten aan te passen en opnieuw te schalen. Dit was een hoop werk, zeker omdat je er rekening mee moet houden dat de verhoudingen op de foto wel blijven kloppen. Uiteindelijk is het ons gelukt de foto s en mediaviewer goed op de site te krijgen. Wij hebben er bewust voor gekozen om in de mediaviewer gebruik te maken van foto s waar wij allebei opstaan en waar wij allebei goede herinneringen aan hebben. Zo zitten wij op de eerste foto bij beachclub Zuiderduin, tijdens een vriendenweekend in Zeeland afgelopen zomer. De tweede foto is het logo dat wij voor dit vak hebben gemaakt. Op de derde foto staan wij allebei, samen met nog een goede vriend, in pak. Dit was tijdens het 100-dagen examenfeest op onze middelbare school. Het gebruik van juist deze foto s helpt bij het persoonlijk maken van ons portfolio.

4 3 Opdracht 3: Annotation editor We hadden gehoopt om onze media viewer te kunnen gebruiken bij het maken van de annotation editor. Het lukte ons echter niet om het script van de annotation editor op een correcte manier samen te voegen met de code van onze mediaviewer. Het was of de media viewer, of de annotation editor, maar een samenwerking tussen deze twee zat er helaas niet in. Het was de bedoeling dat er verschillende beelden op de annotation editor te zien zijn, daarom hebben wij besloten om een.gif bestand te maken. Dit hebben we gedaan door in Adobe Photoshop drie foto s achter elkaar te plakken en deze te converteren naar een.gif. We hebben wederom gekozen voor het gebruik van foto s over onderwerpen die zowel mij als Robert aanspreken, zodat ook deze opdracht enigszins persoonlijk is. We hebben ervoor gekozen om de annotation editor te verwerken op een aparte webpagina. We hebben hierbij de stijl van onze hoofdpagina overgenomen. Echter kun je vanaf deze pagina niet direct navigeren naar een van de andere opdrachten. Je moet eerst door middel van de Ga Terug knop teruggaan naar onze hoofdpagina, om daar de andere opdrachten te kunnen bekijken. De keus voor het maken van een aparte pagina voor deze opdracht, komt voort uit onze wens om de portfolio pagina strak en overzichtelijk te houden. Daar pastte een annotation editor naar onze mening niet bij. Opdracht 4: Applicatie Na enige tijd te hebben nagedacht over een onderwerp en ook een aantal tutorials te hebben geprobeerd, hebben Robert en ik ervoor gekozen om een spel te maken dat is gebasseerd op Super Mario. Een spel dat wij vroeger allebei hebben gespeeld. Na enige tijd zoeken zijn we uiteindelijk op internet een goede tutorial tegengekomen waarin stap voor stap wordt uigelegd hoe je een zogenaamde platformer Mario game kunt maken. Hierbij moesten wij een aantal bestanden downloaden die dienden als de basis en voorbeeld voor het spel dat in de tutorial wordt gemaakt. We zijn de tutorial helemaal doorgelopen en hebben eerst geprobeerd of we het spel in de standaard versie, dus zonder zelf iets te hebben gewijzigd of toegevoegd, werkend konden krijgen. Hierdoor wisten we in ieder geval zeker dat als het spel niet werkt, dit zou liggen aan de wijzigingen die wij hebben gemaakt. Toen we dit zeker hadden gesteld, konden we onze eigen draai gaan geven aan het spel. We waren van plan om onze eigen map en/of thema te maken, om muziek en enige persoonlijke elementen toe te voegen. Stap 1 was het maken van onze eigen map. In de tutorial wordt beschreven hoe je met behulp van het programma Tiled Map Editor (hierna te noemen Tiled) je eigen map kunt maken. In Tiled kun je een tilesheet toevoegen waarop bepaalde elementen zijn afgebeeld. Vooraf geef je aan wat de afmetingen zijn van iedere element en Tiled zet deze elementen dan vervolgens om in bouwstenen. Vervolgens kun je deze bouwstenen stuk voor stuk in een vooraf gedefinieerd veld plakken om zo je eigen map te maken. We hebben aan het maken van de map veel plezier gehad en dit ging ook erg goed. We hebben via internet een uitgebreidere tilesheet gevonden dan de tilesheet die standaard geleverd werd bij de tutorial. Daarnaast hebben we aan deze tilesheet zelf nog een aantal elementen toegevoegd door middel van Adobe Photoshop. Tot zover ging het allemaal goed en voorspoeding.

5 4 Nadat wij de map klaar hadden en de nodige wijzigingen hadden uitgevoerd in het script van ons spel, begon de ellende. Als het spel werd gestart, dan zag je alleen een zwarte achtergrond met soms een aantal roze blokjes. Het poppetje dat naar beneden valt bij het starten van het spel, was zichtbaar en kon ook bewegen. Opvallend hierbij was dat het poppetje wel werd tegengehouden door objecten die wij hadden geplaatst, maar wij deze objecten niet konden zien. Erg vreemd en wij hadden geen idee waardoor dit werd veroorzaakt. Aantal dingen geprobeerd en wat bleek, wij hadden de map niet opgeslagen in een XML formaat. Wij hadden goede hoop de oplossing voor ons probleem te hebben gevonden, maar niets bleek minder waar. Dezelfde problemen bleven zich voordoen. De moed zakte ons inmiddels in de schoenen. We waren al een flink aantal uren bezig en besloten het voor die dag maar voor gezien te houden. We hadden afgesproken de volgende dag weer af te spreken om zo met een fris hoofd opnieuw de problemen te lijf te gaan. De volgende dag was aangebroken en we besloten te beginnen met het grondig nalezen van de tutorial en na enige tijd vonden we daar een mogelijke oorzaak voor ons probleem. Er stond namelijk dat je geen gebruik mag maken van spacings en margins bij het toevoegen van een tilesheet. Dit terwijl wij gebruik maakten van 2 pixels tussenruimte. We hadden wederom het vermoeden dat we het probleem nu gevonden hadden. Maar helaas, ook na het veranderen van de tussenruimte bleven de problemen hetzelfde. We besloten om een hele nieuwe map te maken, zonder tussenruimte en opgeslagen als XML. Wellicht dat dit ervoor zou zorgen dat de map toch goed geladen wordt. Immers, niet geschoten is altijd mis. Ook deze keer lukte het ons niet om een map te maken met een eigen tilesheet. We kwamen tot de conclusie dat we beter konden stoppen en ons moesten gaan focussen op wat anders. We hadden er inmiddels al een enorm aantal uren inzitten en hadden er geen vertrouwen in dat we het op deze manier tot een succes konden brengen. We zijn daarom onze oude map, die is gemaakt met de originele tilesheet, gaan aanpassen. Hierbij hadden we geen last van de bovenstaande problemen, maar onze eigen draai aan het spel ontbrak nog. Om toch onze eigen draai aan het spel te geven, hebben we besloten om verschillende type tegenstanders te maken. Deze tegenstanders hebben allemaal een ander plaatje. Deze plaatjes bestaan uit het hoofd van Robert, het hoofd van mij en uit een aantal logo s van merken of onderwerpen die wij leuk vinden of ons interesseren. Daarnaast hebben we Mario vervangen door Dr. Heinz Doofenshmirtz, een karakter uit het TV programma Phineas and Ferb, waar Robert en ik vroeger en stiekem nog steeds graag naar kijken. Grote vijand van Dr. Heinz Doofenshmirtz is het vogelbekdier genaamd Perry. Perry is namelijk degene die alle duistere plannen van Doofenshmirtz dwarsboomt. Dr. Heinz Doofenshmirtz Het grote verschil tussen een traditioneel Mario spel en ons spel, is dat het bij ons gaat om het verzamelen van Perry s in plaats van het bereiken van het einde van het level. Je moet bij ons alle vijftien Perry s verzamelen en je hebt daarbij drie levens. Als je levens op zijn, moet je opnieuw beginnen. Perry het vogelbekdier

6 5 Het was onze bedoeling om muziek aan het spel toe te voegen. We hebben voor het toevoegen van muziek zelfs gebruik gemaakt van aanvullende tutorials op verschillende websites. Het is ons helaas niet gelukt om de muziek zelf werkend te krijgen. In een van de colleges hebben Robert en ik onze voortgang laten zien en verteld over ons muziek probleem. We hoopte op tips van andere studenten en hebben die ook gekregen. We zijn met deze tips aan de slag gegaan, maar ondanks diverse pogingen zijn wij er helaas niet in geslaagd om de muziek aan ons spel toe te voegen. Evaluatie: Ondanks de vele tegenslagen ben ik blij met het resultaat dat Robert en ik hebben bereikt. Hoewel het soms frustrerend en erg vervelend was, heb ik over het algemeen toch plezier gehad in het maken van de opdrachten. Je wordt bij MA in het diepe gegooid en dat dwingt je om zelf uit te vogelen hoe je het een en ander voor elkaar gaat krijgen. Je moet er zelf voor zorgen dat je uiteindelijk een applicatie hebt die werkt. Uiteraard kun je daar wel ondersteuning bij krijgen, maar je moet het toch echt grotendeels zelf doen. Dit bevalt mij erg goed, ik merk namelijk dat ik zo meer leer dan wanneer ik alles op een presenteerblaadje krijg. Ook ben ik blij dat er geen vaste werkcolleges zijn voor dit vak. Ik vind het fijn om zelf te bepalen wanneer ik aan een opdracht werk. Daar komt bij dat ik thuis een stuk sneller, efficiënter en met betere apparatuur kan werken dan op de Universiteit. Daarnaast scheelt het mij in totaal 2 uur aan reistijd, brandstof en parkeergeld als ik niet naar een werkcollege hoef. Die tijd kan ik gebruiken om extra aan de opdrachten te werken. De samenwerking met Robert, is zoals altijd, erg goed verlopen. Zoals eerder in dit essay al beschreven, hebben we meerdere dagen bij elkaar gezeten om aan de opdrachten te werken. We konden zo makkelijk met elkaar overleggen, taken verdelen en efficiënt werken. Daarnaast is het ook een stuk gezelliger om met z n tweeën te werken in plaats van in je eentje. Voor het vak Inleiding Programmeren Python hebben Robert en ik allebei het spel Snake moeten maken. Dit was ook meteen de enige ervaring die Robert en ik hadden met het maken van een spel. Als je dan ook bedenkt dat we allebei nog nauwelijks ervaring hadden met het programmeren van JavaScript, dan denk ik dat we allebei erg trots mogen zijn op het resultaat dat we uiteindelijk hebben bereikt. Echter, zie ik wel nog een aantal mogelijkheden om in de toekomst het een en ander te verbeteren en/of uit te breiden. Hierbij moet worden gedacht aan bijvoorbeeld het maken van meerdere levels, het toevoegen van verschillende geluidseffecten, het bijhouden van highscores en het verbeteren van de mobiele versie van het spel. De mobiele versie werkt al aardig, maar heeft nog een aantal verbeteringen nodig om hetzelfde gebruiksgemak en beleving te hebben als via de computer/browser versie.