Bachelorproef: Stage bij La Mosca
Project aangeboden door Matthias Deruddere voor het behalen van de graad van Bachelor in de New Media and Communication Technology Academiejaar 2012-2013 Stageplaats : La Mosca, Gent Stagementor : Kristof Van Den Branden Stagebegeleider : Sofie Eeckeman
Woord vooraf Mijn naam is Matthias Deruddere en ik ben student aan de Howest te Kortrijk. Daar studeer ik New Media & Communication Technology (L1). Een afstudeerrichting waar IT en innovatie centraal staan, iets wat ik al vrij snel merkte toen ik met de richting begon. Dankzij NMCT zijn mijn interesses in webdevelopment, video en multimedia in het algemeen alleen maar meer aangewakkerd. Momenteel zit ik in het laatste jaar van deze bachelor. In dit jaar is de module ‘Stage & Bachelorproef’ de enige module in semester 6 van deze opleiding. Hier is het de bedoeling om enerzijds een project in het bedrijfsleven tot een goed einde te brengen, anderzijds is het schrijven van deze bachelorproef over de projecten die ik tijdens deze stageperiode vervolledigd heb. Tijdens mijn stage bij La Mosca (L2) ontmoette ik heel wat interessante mensen uit het echte werkveld. Deze mensen brachten mij heel wat bij over project management, gamedesigns en concepten, usability tests en zo veel meer. Allereerst zou ik graag mijn stagementors Kristof Van Den Branden en Yvonne Kengen willen bedanken voor de uitstekende begeleiding die ik kreeg van hen tijdens mijn stage. Alsook Inge Cornu die instond voor de planning van mijn projecten. Haar zou ik graag bedanken voor de inspraak die ik kreeg in de planning en uitvoering ervan. Op kantoor zelf kreeg ik ook regelmatig hulp van Arne Derynck. Hij was een grote hulp bij problemen die ik opliep tijdens mijn Wordpress project. Sofie Eeckeman wil ik ook bedanken voor de feedback op mijn weekverslagen en drafts van deze bachelorproef. Mijn ouders en vrienden voor de steun en raad waarmee ze me telkens bijstonden.
(L1) http://www.nmct.be/ (L2) http://www.lamosca.be/
Samenvatting Dit document zal een goed becommentarieerde samenvatting worden van mijn projecten tijdens deze stage. Ik zal twee van de grotere projecten volledig uit de doeken doen en mijn werkwijze volledig beschrijven. Mogelijke problemen die ik onderweg heb ondervonden zullen zeker ook beschreven worden, vergezeld van een oplossing. Het eerste project bestond uit het creëren en updaten van een Wordpress (L3) multisite voor La Mosca. Een multisite is een verzameling van Wordpress sites op één hosting, het feit dat ze allemaal samen staan maakt het makkelijk om deze te beheren. Deze multisite zou vooral dienen om evenementenbureaus te ontvangen die eventueel interesse zouden hebben om bepaalde spellen van La Mosca te verdelen. Daarna bespreek ik ook het nieuwe project van La Mosca met de werknaam ‘On Tour’. Ik ben vrij vroeg beginnen meedenken aan het spelconcept aangezien dit al wat verouderd was. Verschillende technologieën opzoeken en testen was hier ook een van mijn taken. Een van de technologieën die ik heb onderzocht heb ik dan uiteindelijk ook gebruikt om mijn tweede opdracht tot een goed einde te brengen. Tijdens deze stageperiode heb ik leren omgaan met deadlines, de manier van werken in een bedrijf, en het vooraf opstellen van een workflow om zo gestructureerder te werk te kunnen gaan.
(L3) http://wordpress.org/
Lijst van verklarende woorden Bone Een soort pijl waarmee je een structuur kunt opbouwen en images aan kunt toevoegen, wordt gebruikt in Spine. CMS Een ‘Content Management System’ wordt gebruikt om content te onderhouden en aan te passen van een centrale interface. Zorgt in het algemeen voor een betere workflow. CSS Met ‘Cascading Style Sheets’ kan de vormgeving van elk element in een webpagina worden bepaald (L4). HTML ‘HyperText Markup Language’ is een opmaaktaal die vooral gebruikt wordt voor webpagina’s (L5). MySQL Open source managementsysteem voor relationele databases (L6). PHP ‘PHP: Hypertext Preprocessor’ is een scripttaal die bedoeld is om op webservers dynamische webpagina’s te creëren (L7). Sass ‘Syntactically Awesome StyleSheets’, simpele elegante syntax voor CSS, maakt het mogelijk om sneller CSS te schrijven (L8). Skeleton Een Skeleton in Spine is opgebouwd uit verschillende bones, hiermee kun je dan makkelijker je figuren animeren. Wordpress Gratis en open source CMS gebaseerd op PHP en MySQL, wordt meestal gebruikt door bloggers.
(L4) http://www.w3schools.com/css (L5) http://www.w3schools.com/html (L6) http://www.mysql.com/ (L7) http://www.w3schools.com/php (L8) http://sass-lang.com/
Inhoud La Mosca is een Gents multimedia bedrijf dat zich toespitst op location based games. Bij La Mosca worden zo’n games ontwikkeld voor eigen projecten maar ook in opdracht van derden. Het bedrijf bestaat uit een handvol programmeurs en webdevelopers, iemand die instaat voor de designs, een administratief medewerker en een aantal projectmanagers. Op de drukste momenten waren er soms 14 mensen aanwezig op kantoor, dit inclusief 3 stagairs waaronder mezelf. La Mosca bracht in 2007 ‘The Target’ op de markt, een pionier onder de city games, toen nog ontwikkeld voor Nokia telefoons, vandaag de dag herboren als Android game. Het portfolio van dit bedrijf begint aardig aan te dikken met pareltjes van games. Stuk voor stuk worden deze op hun beurt aangeboden door andere evenementenbureaus. Toen de lijst met beschikbare stageplaatsen vrijgegeven werden begon ik meteen te filteren op de termen multimedia en webdevelopment. De naam ‘La Mosca’ herkende ik van ergens, ik had ergens in september al eens een spel van hen gespeeld. Toen ik dan ook de opdrachtstelling las werd ik meteen enthousiast. Ik zou kunnen meehelpen aan de ontwikkeling van zo’n citygame. Het volledige proces zou ik onder ogen kunnen zien, iets wat me zeker voordelen zou opleveren mocht ik later ook eens een iets groter project voor mezelf willen maken. Zoals eerder al vermeld zal ik het in deze bachelorproef hebben over twee van mijn projecten. Hiervoor gebruik ik een vaste indeling: eerst worden de programma’s besproken waarmee ik gewerkt heb, daarna een korte schets van hoe ik het betreffende project heb aangepakt, om dan te eindigen met het resultaat. Alle vermelde bronnen kunnen onderaan een pagina en op het einde van deze bachelorproef teruggevonden worden in een lijst. In de tekst wordt ernaar verwezen aan de hand van ‘(L#)’ waar ‘#’ gelijk staat aan het nummer in de lijst.
Inhoudsopgave 1.
Wordpress B2B multisites.........................................................................................1
1.1
B-2-Wat? .................................................................................................................2
1.2
Analyse ...................................................................................................................2
1.3
Software ..................................................................................................................3
1.3.1
Sublime Text 2 .........................................................................................................3
1.3.2
Scout........................................................................................................................4
1.3.3
Browser ....................................................................................................................5
1.3.4
FileZilla......................................................................................................................5
1.4
Uitwerking ...............................................................................................................5
1.4.1
Testomgeving aanmaken......................................................................................6
1.4.2
Opzetten multisite...................................................................................................7
1.4.3
Options aanpassen ................................................................................................7
1.4.4
Taalkeuze ................................................................................................................9
1.4.5
Overzetten ............................................................................................................11
2.
On Tour ..................................................................................................................12
2.1
Inleiding ................................................................................................................13
2.2
Analyse .................................................................................................................13
2.3
Software ................................................................................................................14
2.3.1
Photoshop .............................................................................................................14
2.3.2
Spine ......................................................................................................................14
2.3.3
Texturepacker .......................................................................................................15
2.3.4
Eclipse IDE met Android Development Tools .....................................................15
2.4
Uitwerking .............................................................................................................16
2.4.1
Slicing.....................................................................................................................16
2.4.2
Skelet opbouwen .................................................................................................17
2.4.3
Skins aanmaken....................................................................................................19
2.4.4
Animeren...............................................................................................................21
2.4.5
Exporteren .............................................................................................................22
2.4.6
Montage ...............................................................................................................24
3.
Conclusie ..............................................................................................................29
4.
Links........................................................................................................................30
5.
Lijst van figuren .....................................................................................................31
6.
Bijlagen ..................................................................................................................32
1.
Wordpress B2B multisites
1
1.1
B-2-Wat?
Mijn eerste project bij La Mosca was het updaten van de B2B websites. Deze sites zijn speciaal voor evenementenbureaus die ook games van La Mosca willen aanbieden. Aangezien het voor La Mosca belangrijk is dat hun games verdeeld worden door evenementenbureau’s over België, Nederland, Frankrijk en tal van andere landen was het dus de bedoeling dat deze sites in meerdere talen beschikbaar zouden zijn.
1.2
Analyse
Er dient een multisite te worden gecreëerd waarin alle nodige talen worden ondergebracht. Een multisite in wordpress is een verzameling van sites met al dan niet hetzelfde thema, dit is handig voor het beheren van de vele plugins. De eerste talen en landen zijn België (Nederlands en Frans), Nederland, Frankrijk, Luxemburg (voorlopige verwijzing naar de Franse site), Engeland, Duitsland, Zwitserland (voorlopige verwijzingen naar de Duitse en Franse site) en Spanje. Aangezien het design en de content reeds bestonden voor de Nederlandse en Franse site kon ik niet vanaf nul beginnen. Ik zou dus een manier moeten vinden om alle posts en plugins over te zetten naar de multisite die ik dan zou aanmaken. De Wordpress site zal gebruik maken van hetzelfde thema, hierin stonden echter veel Nederlandse elementen die dan uiteraard ook bij andere talen zouden verschijnen. Dit zal ik oplossen door verschillende settings te creëren zodat de persoon die later een site met een andere taal moet aanmaken niet al te veel moeilijkheden heeft.
2
1.3
Software
Voor dit project heb ik verschillende programma’s gebruikt, hier zet ik ze even op een rij.
1.3.1 Sublime Text 2
Sublime Text 2 (L9) is een code editor standaard heel eenvoudig is en weinig om handen heeft. Geen overbodige functies die je meestal toch nooit gebruikt. Ik heb het een aantal maand geleden leren kennen en was meteen verkocht. De simpele layout zorgt voor een omgeving waar ik kan coderen zonder afleiding. Sublime Text 2 biedt ook de mogelijkheid om meerdere cursors te gebruiken, dit is handig bij het aanpassen van meerdere lijnen code. De opstartsnelheid (minder dan 2 seconden) heeft vooral te maken met het feit dat er geen overbodige functies zijn. Wil je toch iets meer dan het basispakket dan kan je beroep doen op de zogenaamde sublime-packages. Deze dienen om je codeerervaring met Sublime Text 2 nog aangenamer te maken. Hier som ik enkele van de belangrijkste plugins op waar ik het meeste voordeel uit gehaald heb. *Package control: handig om alle plugins te installeren en te beheren. *Prefixr: met 1 handige shortcut wordt je CSS voorzien van alle nodige prefixen (bv: -webkit, -moz, -o, -ms) die je nodig hebt voor alle verschillende browsers. *Emmet: library van snippets waardoor je een betere workflow kan creëren.
(L9) http://www.sublimetext.com/
3
Figuur 1: Package Control in Sublime Text
1.3.2 Scout
Voor de het creëren van de nieuwe CSS files verdiepte ik mijzelf in SASS. Syntactically Awesome Stylesheets is een uitbreiding op CSS3, aan de hand van een speciale syntax die geneste code, variabelen, en zo veel meer kan lezen wordt dan een CSS3 file gegenereerd. Dit kan je doen via een webpagina maar ik heb ervoor gekozen om ‘SCOUT’ (L10) te gebruiken.
(L10) http://mhs.github.io/scout-app/
4
1.3.3 Browser Tijdens het ontwikkelen van websites is een rijk gamma aan browsers een vereiste. Verschillende browsers geven verschillende resultaten, zoveel mogelijk testen was de boodschap. Ikzelf gebruikte Chrome, Firefox, Safari, Internet Explorer en Opera.
Tijdens mijn tests heb ik ook nog gebruik gemaakt van een aantal browsertools waaronder ‘Firebug’ of de standaard ‘developer tools’ van Chrome.
1.3.4 FileZilla
Om aan bestanden van de FTP-server te kunnen halen en nieuwe erop te zetten had ik FileZilla (L11) nodig. FileZilla is een opensource FTP-client voor Windows, Mac en Linux. Het verbinden met een FTP-server verloopt vrij gemakkelijk en er bestaat de mogelijkheid om de login data van de FTP-server bij te houden.
1.4
Uitwerking
Om een duidelijk beeld te schetsen van hoe ik dit project heb aangepakt zal ik de uitwerking opsplitsen in verschillende stukken. Per stuk zal ik eventuele problemen en oplossingen opsommen.
(L11) https://filezilla-project.org/
5
1.4.1 Testomgeving aanmaken Het eerste wat op mijn takenpakket stond was een testomgeving opzetten zodat ik naar hartelust kon testen. Aangezien de huidige Wordpress sites live waren bestond het risico dat een eventuele klant zou terecht komen op een lege pagina tijdens een van mijn tests. Om dit tegen te gaan onderzocht ik eerst hoe ik het best een Wordpress site kon verplaatsen. Ik installeerde een verse Wordpress op mijn testomgeving. Dit ging zonder veel problemen aangezien ik reeds gedaan had voor mijn stageblog. Daarna nam ik een export van de MySQL tabel van de live site. Ik importeerde de XML-file op mijn site om daarna te zien dat alle Wordpress tabellen met de prefix ‘wp_’ begonnen. Dit is onoverzichtelijk bij een multisite en ook onveilig. Aangezien het algemeen geweten is dat iedere Wordpress tabel met ‘wp_’ begint is het voor hackers gemakkelijk om allerhande exploits te gebruiken om zo aanpassingen te doen wanneer ze de wachtwoorden kunnen kraken. Om dit tegen te gaan maakte ik gebruik van een aantal query’s om zo alle prefixes te veranderen. Met de multiple cursors van Sublime Text 2 ging dit vrij snel.
Figuur 2: hernoemen van tabellen
Niet enkel was het nodig de prefixes van de tabellen aan te passen, maar ook om de config file van wordpress zelf aan te passen zodat de prefixes terug overeen kwamen.
Figuur 3: prefix van tabel
6
Hierna kon ik alle posts importeren in de nieuwe site.Eens ik zeker wist dat alles werkte maakte ik de testomgeving terug leeg zodat ik het hele proces nog eens opnieuw kon doen. In al mijn tests waren er een paar kleine dingen fout gelopen die sowieso geen goeie invloed zouden hebben op het verloop van de site.
1.4.2 Opzetten multisite Het aanmaken van een Wordpress dat is één ding, het aanmaken van een multisite Wordpress, daar komt heel wat meer bij kijken. Vandaar dat ik opnieuw begon met een verse installatie van het CMS-systeem. Wanneer ik de gewone installatie doorlopen had moest ik nog een paar dingen aanpassen in de config file.
Figuur 4: Multisite instellingen
Daarna kon ik de eerste site (BE-NL) aanmaken en daarin importeerde ik de export van alle posts in de live site voor iedere taal.
1.4.3 Options aanpassen De wordpress sites werden ondersteund door een aangepast thema. Om alles correct te kunnen tonen moest dit voor iedere site nog aangepast worden.
7
Figuur 5: Service block opties
Figuur 6: service columns
Zoals u kan zien stonden sommige titels nog ‘hardcoded’ in het Nederlands op de pagina. Hiervoor moest ik dus nog opties bijmaken. Het was even zoeken waar ik zogenaamde aanpassingen aan de files kon doen maar na een tijdje had ik de file eindelijk gevonden. In ‘options-data.php’ werden allerhande opties aan een array toegevoegd, deze werden dan ingeladen via een andere php-file om zo bij de opties te worden getoond. Hier kon ik dan met een paar regels code een optie aanmaken voor de titel, zodat deze ook overal aanpasbaar werd.
8
Figuur 7: nieuwe optie in array
Figuur 8: nieuwe optie is aanpasbaar
Nu restte me enkel nog de taak om deze optie ook met de pagina zelf mee te laden, ik zocht de php-file waar de zogenaamde ‘service blocks’ werden samengesteld en daarin laadde ik dan de optie in. Soortgelijke aanpassingen heb ik ook nog gemaakt voor het contact formulier en andere titels verspreid over de website.
1.4.4 Taalkeuze Omdat niet alle mogelijke klanten weten wat de url zal zijn en gewoon naar ‘lamoscagames.com’ zullen surfen mocht ik ook een pagina aanmaken waar de klanten hun taal konden kiezen. Ik begon met het ontwerpen van 4 buttons voor social media omdat ik geen gratis icons wou gebruiken die je zomaar kon vinden op het internet. Ik heb er voor gezorgd dat de pagina correct wordt getoond op toestellen met een kleiner scherm, zodat mobile gebruikers hier geen last ondervinden
9
Figuur 9: desktop vs mobile versie
De bezoekers worden naar de juiste site gebracht bij het klikken op het vlagje of op de tekst eronder. Bij het klikken op tweetalige landen (zoals België) verschijnt er een Pop-up, daar kan de gebruiker dan zijn keuze maken.
Figuur 10: gebruik van Messi.js
Voor de pop-up maak ik gebruik van de plugin ‘messi.js’. Ik heb wel wat moeten aanpassen aan de CSS zodat deze ook responsive was. Daarna werd mij gevraagd om een manier te vinden zodat de taalkeuze opgeslagen werd. Na wat onderzoek besloot ik om gebruik te maken van cookies. Met behulp van een plugin kon ik makkelijk cookies opslaan wanneer ergens op 10
geklikt werd. Ik schreef een stukje javascript dat bijhield op welke taal er geklikt werd om daarvan een cookie op te slaan. Wanneer een gebruiker de volgende keer naar deze pagina zou surfen zou mijn script eerst controleren of er al een cookie bestaat, zoja, dan wordt de gebruiker meteen doorgestuurd naar zijn vorige taalkeuze.
Figuur 11: cookie opslaan en oproepen
1.4.5 Overzetten Nadat alles correct stond en de sites klaar waren voor het publiek diende ik enkel nog alles op de correcte FTP te zetten. Normaal gezien zou dit geen moeilijkheden mogen creëren maar door door de combinatie van de erbarmelijke snelheid van de host (meer dan 5 uur om meer dan 4000 files over te zetten) en filezilla zocht ik een andere manier. Ik kwam tot de vaststelling dat ik ook shell-acces had op beide domeinnamen. Ik installeerde het programma PuTTy (L12), waarmee ik dus commando’s kon uitvoeren op beide domeinen. Ik nam alles op in een TAR-bestand, dit kon ik verplaatsen via filezilla, dit duurde minder dan 5 minuten aangezien het eigenlijk maar 1 bestand was. Ik maakte connectie met PuTTy op de andere domeinnaam en ik kon het TARbestand uitpakken. Daarna nam ik een export van de MySQL database om deze op de live sites te plaatsen. Sommige links stonden nog verkeerd in de database, dit moest dus ook nog aangepast worden. Dankzij een ‘search/replace’ tool (L13) voor Wordpress kon ik deze URL’s gemakkelijk aanpassen. Na een grondige controle van de volledige site kon ik concluderen dat alles werkte en was mijn werk aan deze sites grotendeels af. In de daaropvolgende dagen kreeg ik nog enkele kleine opdrachten om teksten te veranderen.
(L12) http://www.chiark.greenend.org.uk/~sgtatham/putty/ (L13) http://interconnectit.com/products/search-and-replace-for-wordpress-databases/
11
2.
On Tour
12
2.1
Inleiding
On Tour is het nieuwste project van La Mosca. In opdracht van Levenslijn en JimTV werd gevraagd om een citygame te ontwerpen waar veiligheid in het verkeer centraal staat. Dit in combinatie met muziek. Het spel zal worden gespeeld door jongeren uit de derde graad van het middelbaar. Deze worden verdeeld in teams en vormen elk een muziekband, ze strijden tegen elkaar om virtuele voorwerpen op te rapen die verspreid liggen over een bepaalde zone in de stad, daarna treden ze op met de instrumenten die ze net opgeraapt hebben. Het is echter ook belangrijk om verkeersvoorwerpen op te rapen aangezien er (virtuele) politieagenten rondlopen die controleren of hun voertuig wel in orde is. Na het optreden moet de band nog naar huis rijden met het voertuig van dat level (fiets, auto of limousine), dit gebeurt aan de hand van een minigame. Het is aan de band om de correcte keuze te maken en zich niet te laten verleiden om veel alcohol te drinken in ruil voor populariteitspunten, maar een gezond evenwicht te vinden tussen populariteit en verkeersveiligheid.
2.2
Analyse
De optredens waar de spelers items voor verzamelen zijn een visueel gedeelte in het spel, deze worden verzorgd door mij. De bedoeling is dat aan het begin van het spel een foto genomen wordt van het gezicht van iedere speler, deze wordt dan verwerkt in de animatie zodat het lijkt alsof de spelers zelf de instrumenten bespelen. Deze techniek is vergelijkbaar met die van JibJab (L14). Aangezien men in het begin nog niet zeker was hoe deze animaties precies zouden getoond worden deed ik eerst wat onderzoek. Een eerste idee was om deze in Adobe After Effects te maken om daarna te exporteren naar png-sequences. Na een paar tests bleek dat dit niet haalbaar zou zijn, de framerate van de animaties was te laag waardoor deze schokkerig en amateuristisch overkwamen. Daarbij diende ik ook rekening te houden met de elementen die vervangen zouden worden naargelang de band die speelde. Zo waren er vier genres: punk, klassiek, country en hiphop. Aangezien de spelers ook verschillende upgrades van hun instrumenten konden oprapen was After Effects dus geen oplossing.
(L14) http://www.jibjab.com/
13
Een tweede mogelijkheid zou zijn om de animaties in Adobe Flash te maken, dit idee was ook snel van de baan omdat de swf’s simpelweg te groot zouden worden. Na wat zoeken werd mij het programma ‘Spine’ (L15) van ‘Esoteric Software’ aangeboden. Dit is een programma speciaal gemaakt om 2D animaties te ontwerpen voor games. Aangezien de outputfiles heel klein zijn was dit de correcte oplossing.
2.3
Software
2.3.1 Photoshop
Alle designs van de bands kreeg ik aangeleverd in Adobe Photoshop, Hier moest ik alle ledematen van de muzikanten apart zetten en apart opslaan, zodat deze daarna mooi geanimeerd konden worden.
2.3.2 Spine
Dit was een volledig nieuw programma voor mij en aangezien mijn collega Yvonne hier na mijn stage ook nog mee zal moeten werken zal er in bijlage nog een stappenplan terug te vinden zijn waarin ik zo goed mogelijk zal uitleggen hoe je precies een skelet en animaties maakt.
(L15) http://esotericsoftware.com/
14
2.3.3 Texturepacker
Texturepacker (L16) is het programma dat ik gebruikt heb om ervoor te zorgen dat de images van de mannetjes mooi gegroepeerd worden zodat deze dan kunnen getoond worden op de tablet. In samenspraak met de programmeur voor dit project werd beslist om de animaties die ik gemaakt had in Spine geëxporteerd werden naar JSON-formaat. Dankzij Texturepacker kan ik de images samenzetten en daarna exporteren volgens LibGDX termen, zo kan alles mooi getoond worden.
2.3.4 Eclipse IDE met Android Development Tools
In Spine kon ik aparte animaties maken maar werken met meerdere skeletons om dan uiteindelijk een filmpje te maken was niet zo evident. Omdat de animatie bij ieder optreden moet worden aangepast om verschillende upgrades van instrumenten en de gezichten van de spelers te tonen was het dus niet mogelijk om een vaste animatie te maken met After Effects of Flash. Sam, de programmeur die aan dit project gekoppeld was maakte een tool voor mij waardoor ik ieder skelet kon plaatsen op een scène, ik kon vastleggen waar ieder skelet moest staan op welk tijdstip, welke animatie precies moet spelen en hoe groot het mannetje moet zijn. Het testen hiermee gebeurde in de Android Development Tools (L17).
(L16) http://www.codeandweb.com/Texturepacker (L17) http://developer.android.com/tools/help/index.html
15
2.4
Uitwerking
Hier zal ik bespreken hoe ik de opdracht heb volbracht, dit alles zal onderverdeeld zijn in de stappen die ik heb ondernomen. In bijlage kan u een stappenplan terugvinden dat ik heb samengesteld zodat mijn collega’s bij La Mosca na mijn stage kunnen verder werken aan mijn opdracht.
2.4.1 Slicing De Photoshop files waar ik mee begon bestonden uit de getekende muzikanten die naast elkaar stonden, mijn eerste taak was dus om de bij elkaar horende lagen te converteren naar een smart object en deze dan apart te zetten en er een slice van te maken. Ik zorgde ervoor dat de slices correct benoemd waren zodat er later geen verwarring kon ontstaan over welk lichaamsdeel dit precies was.
Figuur 12: images voor slicing
Figuur 13: Images mooi geordend en per slice gezet
16
Ik had voor mezelf een standaard opgesteld die ik zou volgen. Had een bepaalde slice dan bijvoorbeeld de benaming “D_Haar_Front” dan zou dit dus het haarstukje worden voor de drummer, dit zou dan ook vóór het uiteindelijke hoofd geplaatst worden, bij sommige genres was er ook een haarstukje aanwezig voor achter het hoofd. Wanneer deze images verwerkt werden (met behulp van “save for web and devices”) plaatste ik deze dus in aparte mappen, opgedeeld per genre en per geslacht. Voor de gitarist zou de mappenstructuur er dan zo uitzien: Country Man Woman Punk Man Woman Classic Man Woman Hiphop Man Woman Ik plaatste de images in de correcte map en met behulp van een file renamer plaatste ik nog een gepaste prefix voor de filenaam. “M_” voor man en “W_” voor woman.
2.4.2 Skelet opbouwen Nadat ik alle images had die onderdeel waren van een mannetje kon ik beginnen met het opbouwen van het skelet in Spine. Animaties maken in Spine kun je vergelijken met de bone tool in Adobe Flash, aan de hand van bones maak je een soort skelet waar je dan images aan vasthangt. Om vlot te kunnen animeren is er een bepaalde hiërarchie waarmee je moet rekening houden. Spine is opgedeeld in twee delen. Een deel voor de ‘setup’ waar je dus je skelet maakt en skins kunt toepassen. En een deel voor de animaties, hierover later meer. Op de afbeelding hieronder kun je dus zien hoe het setup scherm eruit ziet, wanneer je een bone selecteert (in het begin heb je standaard een rootbone) kun je via de create knop een nieuwe bone maken, deze is dan afhankelijk van de root bone. Deze hiërarchie zal later belangrijk worden. Elke bone kan je ook verplaatsen, roteren en vergroten of verkleinen.
17
Figuur 14: Setup scherm in Spine
Ik begon met een foto van het mannetje in Photoshop en zette deze in Spine, daarop tekende ik de bones, wanneer ik daarmee klaar was controleerde ik de hiërarchie om er zeker van te zijn dat alles correct zat. Een kort voorbeeld met de gitarist: Root (standaard bone die er altijd staat) Heup Linkerbovenbeen • Linkeronderbeen ♦ Linkervoet Rechterbovenbeen • Rechteronderbeen ♦ Rechtervoet Rok (enkel voor vrouwelijke personages) Romp • Hoofd ♦ Mond ♦ Haar dat voor het hoofd komt ♠ Haar dat achter het hoofd komt ♦ Staart • Linkerbovenarm ♦ Linkeronderarm ♠ Linkerhand • Rechterbovenarm ♦ Rechteronderarm ♠ Rechterhand • Gitaar 18
De volgorde waarin alles getoond zou worden zag er echter anders uit omdat sommige dieper gelegen elementen voor bepaalde elementen moesten getoond worden. Zo moest de volledige linkerarm boven de gitaar getoond worden en bij de rechterarm was dit enkel het geval voor de rechterhand. Dit kon ik oplossen via Spine, daar kon ik de elementen in rangschikken zodat de “drawing order” werd aangepast.
2.4.3 Skins aanmaken Wanneer ik klaar was met de images voor het mannelijke personage in het klassieke genre moest ik er nog voor zorgen dat andere genres en geslachten ook makkelijk zichtbaar waren. In Spine kunnen we hiervoor gebruiken maken van ‘skins’. Skins zorgen ervoor dat een bone niet bepaald vast hangt aan één image. Op voorhand had ik ook vermeld dat alle figuurtjes die tot dezelfde muzikant zouden behoren best dezelfde lichaamsbouw hebben. Dit omdat bij het werken met skins de image wel veranderd, maar de lengte en locatie van een bone niet. Wanneer je dus bijvoorbeeld de bone van de linkeronderarm zou langer maken omdat het punkgenre een langere arm heeft, dan zou dit gebeuren voor alle genres en zouden de ledematen verkeerd beginnen staan. Hetzelfde moest gebeuren voor de upgrades van de instrumenten, deze zouden ook ongeveer dezelfde vorm moeten hebben. Om er dus voor te zorgen dat ik met skins kon werken maakte ik bij iedere bone een nieuwe skin attachment aan, deze gaf ik opnieuw een correcte naam, hiermee kon men dan later bepaalde images vervangen via code. Dit zou vooral belangrijk zijn voor de images die nu nog een placeholder waren voor de echte foto’s van de gezichten van de spelers. Ook instrumenten zijn vervangbaar dankzij hun upgrades die de spelers tijdens het spel kunnen oprapen. Dankzij deze skin attachments kon ik dus per skin een andere image vasthangen terwijl ik zonder skin telkens een nieuw skelet zou moeten maken. Wanneer ik klaar was met de eerste skin dupliceerde ik deze en dankzij mijn duidelijke mappenstructuur kon ik makkelijk images uit een ander genre oproepen door gewoon het pad naar de image te veranderen.
19
Figuur 15: Images, Classic vs Punk
Dit proces werd herhaald tot ik voor ieder genre de mannelijke en vrouwelijke skin had. De images zou ik telkens een beetje moeten herpositioneren, de figuren leken wel allemaal op elkaar qua lichaamsbouw, sommige armen of benen waren een beetje breder. Dit was niet erg aangezien ik vooral rekening hield met de lengte van de bone. Uiteindelijk zou ik dan voor ieder instrument 8 skins hebben.
Figuur 16: skins in Spine
20
2.4.4 Animeren Nadat alle skins in orde zijn kan ik beginnen aan de animaties. Zoals eerder gezegd is Spine opgedeeld in twee delen, vanaf nu zullen we werken in het animatiegedeelte. Hier kun je geen permanente aanpassingen doen aan het skelet, daarom zullen we dus hier de verschillende posities voor de animaties vastleggen. Op de afbeelding is er onderaan een balk bijgekomen met daarin plaats voor de keyframes die iedere positie, rotatie en grootte van een bone vastleggen. Door zelf op bepaalde tijdstippen nieuwe posities te maken kunnen we nieuwe keyframes plaatsen en zo bepaalde animatie’s maken.
Figuur 17: Animatie scherm in Spine
21
Ik besliste voor mezelf om alle animaties zo te maken zodat elke aparte beweging perfect na een andere beweging kon getoond worden. De animaties van een skelet zullen altijd loopen van de eerste tot de laatste keyframe, daarom is het belangrijk om alle animaties over evenveel frames te laten lopen. Ik kies voor 60 frames, wat gelijk staat aan animaties van 2 seconden elk. Voor korte snelle bewegingen is dit meer dan genoeg en het zou ideaal zijn om later bij de montage een afwisselend optreden te kunnen brengen. Op youtube deed ik wat research naar muzikanten die live speelden om daar inspiratie uit op te doen. Dit was nodig om de bewegingen zo natuurlijk mogelijk te laten overkomen. Voor het ene instrument waren er natuurlijk meer bewegingen dan voor het andere. Voor de gitarist was het bijvoorbeeld makkelijker om goede animaties te maken dan voor de zanger.
2.4.5 Exporteren De animaties zijn klaar, maar het optreden zelf zit nog lang niet in elkaar. Het ‘monteren’ zelf zal gebeuren aan de hand van een JSON file (L18) maar voor ik hier aan begin moet ik nog een paar dingen voorbereiden. Wanneer ik in de JSON file een skelet op de scène wou zetten zocht de code in mijn assets map naar een map met die bepaalde naam van het skelet. Daarin zouden telkens 3 files aanwezig moeten zijn, ik noem ze op en leg uit hoe we deze verkrijgen. skeleton.json Deze file zal alles bevatten dat we in Spine met onze eigen ogen kunnen zien. In de file zelf kan ik aflezen hoe het skelet precies is opgebouwd, welke skin attachments er zijn, welke skins er bestaan en het belangrijkste: welke animaties er precies zijn. In dit deeltje wordt per bone de locatie, rotatie en grootte beschreven per keyframe. Om dit te verkrijgen zal ik dit alles eerst nog moeten exporteren, ik kies de correcte opties en krijg per skelet een JSON file, ik hoef het enkel nog in de correcte map te plaatsen en te hernoemen naar “skeleton.json”.
(L18) http://www.json.org/
22
Figuur 18: Beschrijving van een animatie in skeleton.json
skeleton.png en skeleton.txt In de JSON file wordt beschreven welke images aan welke bones vasthangen, maar de images zelf zitten hier echter nog niet bij. Daarvoor zullen we deze twee files nodig hebben. Deze kunnen we creëren met het programma Texturepacker. Deze software zal alle images samen in een spritesheet zetten en daarbij een tekstbestand met daarin de coördinaten van alle images. In skeleton.json worden alle images gelinkt volgens hun pad zoals je ze in de mappen zou terugvinden, bv: gitaar/classic/man/imagenaam. Dit moet ik nabootsen in Texturepacker, wanneer ik dit niet doe zal dit later problemen opleveren en zullen sommige images onvindbaar zijn. Om dit in orde te brengen moet ik rekening houden met het feit dat Texturepacker enkel rekening houd met mappen waarin images staan, andere worden compleet genegeerd. Mocht ik dus bijvoorbeeld de map “gitaar” (waar de images in staan) in het programma slepen, dan zou de map “gitaar” genegeerd worden, waardoor alle images verkeerd gelinkt zouden worden. Vandaar dat ik de bovenliggende map erin zal slepen.
23
Figuur 19: Links => fout, Rechts => correct
Ik dien nog enkele instellingen aan te passen zodat straks alles mooi uitgelezen zal worden. De optie “Data Format” zet ik op LibGDX en de “Allow Rotation” optie vink ik uit. Standaard krijgen we images van 2048 op 2048 pixels, het kan zijn dat niet alle images hier in passen, bijvoorbeeld bij het decor, waar iedere afbeelding meestal 1024 op 552 pixels zal zijn. Om dus te vermijden dat niet alle images op de spritesheet staan controleer ik dit en indien nodig kan ik de standaardgrootte vergroten. Ik stel nog even de output in zodat de Data File (txt) en de Texture File (png) in de map bij skeleton.json zullen geplaatst worden. Daarna heb ik per skeleton een map met daarin skeleton.json, skeleton.png en skeleton.txt. Ik dien enkel nog al deze mappen in de correcte assets map te zetten zodat ik deze kan oproepen voor de compositie.
2.4.6 Montage Voor het maken van het uiteindelijke optreden werd er geopteerd voor opnieuw een JSON file, een die ik deze keer zelf zou schrijven. De programmeur Sam schreef voor mij een tooltje die keyframes uit die file kon aflezen en zo de compositie zou kunnen samenstellen. Ik had reeds een muziekstukje ontvangen van Yvonne, het was gebaseerd op de Turkse Mars van Mozart, maar via MIDI files aangepast zodat het werd gespeeld door elektrische gitaren met een drumloop. Mijn taak zou dus zijn om het optreden van het klassieke genre in elkaar te steken, dit zou zich afspelen in club. Ik luisterde genoeg naar het muziekstuk om te weten waar verschillende scènes zouden getoond worden. Ik kreeg ook een klein storyboard van 24
Yvonne met daarop de soort achtergrond en welke muzikanten zichtbaar waren. Voor de rest kon ik doen wat voor mij het beste leek.
Figuur 20: deel van het storyboard
De syntax om een skelet op de scène te plaatsen zal ik uitleggen aan de hand van een voorbeeld. Elke lijn is hier een keyframe waar we de tijd, animatie, x,y, schaal en flip van een skelet kunnen meegeven.
Figuur 21: syntax voor compositie
Hier kan u zien dat ik het skelet “gitaar” op seconde 0 laat verschijnen met de animatie genaamd “hop”. Deze zal zichtbaar zijn op x:220, y:100 met een grootte van 0,4 van het origineel. Wanneer een parameter niet vermeld staat dan wil dit zeggen dat deze niet veranderd. Op seconde 4 staat het skelet plots op x:500, y:200 met een grootte van 0,6. Merk op dat de “hop” animatie twee keer na elkaar kan afgespeeld worden aangezien deze animatie voor 4 seconden bleef staan (zie 2.4.4, lengte van de animaties). Normaal gezien zou onze gitarist gedurende die 4 seconden verschuiven van x:220, y:100 naar x:500,y:200. Omdat we deze verplaatsingen soms willen vermijden zullen we hiervoor een ‘truc’ moeten toepassen.
Figuur 22: oplossing voor ongewenste verschuiving
25
U kan zien dat we net voor de 4e seconde nog een extra keyframe hebben toegevoegd met als tijdswaarde 3,999. Door dit te doen leggen we op 0,001 seconde voor de uiteindelijke plaatswissel nog vlug de oude locatie vast, waardoor de verschuiving van de muzikant zal gebeuren in die korte tijd. Dit gebeurt te snel voor het menselijk oog, wat goed is want de muzikant mag niet verplaatsen wanneer dit niet nodig is. Zoals reeds vermeld in hoofdstuk 2.4.4 heb ik ervoor gezorgd dat alle animaties van de muzikanten exact 60 frames lang zijn, dit wordt gelijk gesteld aan 2 seconden. De start en eindposities van de skeletten zijn ook telkens gelijk waardoor alle animaties perfect na elkaar kunnen afgespeeld worden. Bij de skeletons van het decor heb ik geopteerd voor 120 frames zodat ik wat meer tijd had om achtergrondanimaties uit te voeren. In bijlage kan u alvast de volledige compositie van het optreden terugvinden, hieronder zet ik als voorbeeld nog enkele fragmenten uit het optreden waar ik kort zal opsommen welke skeletten er aanwezig zijn.
Fragment genomen uit eerste scène, aanwezige skeletons in correcte volgorde: -bg2 -paars -lampjes -smoke -crowd_back -crowdbar_front
26
Fragment genomen uit 2e scène, aanwezige skeletons: -bg3 -drum -gitaar -micro -sax -lampjes -smoke -crowd_back
27
Fragment genomen uit 5e scène, aanwezige skeletons: -bg1 -micro -sax -smoke
28
3.
Conclusie
Ik kan met een blij gevoel terugkijken op mijn stageperiode bij La Mosca. Dankzij de twee projecten die in deze bachelorproef werden beschreven heb ik enorm veel bijgeleerd over twee totaal verschillende aspecten uit het bedrijfsleven. Bij de Wordpress multisites heb ik geleerd hoe het is om verder te werken aan een project van iemand anders, je kan heel snel verdwalen in stukken code wanneer er niet genoeg documentatie werd opgemaakt. In beide projecten heb ik dus mijn uiterste best gedaan om met behulp van briefings en aparte documentatie genoeg gegevens achter te laten zodat er na mijn stageperiode geen problemen hiermee opduiken. Met het ‘On Tour’ project kon ik alles van een andere kant bekijken, ik leerde dat het héél belangrijk is om vanaf het begin een correcte workflow op te stellen om dubbel werk in de toekomst te vermijden. Daar kwam nog eens bij dat ik in deze opdracht gebruik maakte van software waar ik voor de eerste keer mee zou werken. Het correct aftoetsen van deze workflow was dus heel belangrijk opdat na mijn vertrek alles vlot zou verlopen. Verder kan ik ook nog meegeven dat ik tijdens mijn stage goed ontvangen werd door de collega’s van La Mosca, de sfeer is er vrij los maar toch wordt er genoeg gewerkt. Over de middag is er genoeg tijd om bij te praten en iedereen kon het goed met elkaar vinden. Deze bachelorproef is tot stand gekomen in het kader van de stage opdracht, onderdeel van de stage module die gevolgd wordt in het 6e semester van New Media and Communication Technology aan de Hogeschool West-Vlaanderen te Kortrijk. Tijdens mijn studies daar heb ik enorm veel bijgeleerd over verschillende aspecten uit de wereld van de computer. Je kan NMCT dus zeker bestempelen als een brede opleiding. De voorbije jaren werd vooral gesleuteld aan de keuze van de studenten, iets waar ik een groot voorstander van ben want voor sommige studenten kan een bepaald vak echt een struikelblok vormen. Wanneer dit geen hoofdvak meer is kunnen studenten waarvan hun focus vooral ligt op het multimediale zonder problemen afstuderen met een toch een brede basis uit het eerste jaar.
29
4. (L1) (L2) (L3) (L4) (L5) (L6) (L7) (L8) (L9) (L10) (L11) (L12) (L13) (L14) (L15) (L16) (L17) (L18)
Links http://www.nmct.be/ http://www.lamosca.be/ http://wordpress.org/ http://www.w3schools.com/css http://www.w3schools.com/html http://www.mysql.com/ http://www.w3schools.com/php http://sass-lang.com/ http://www.sublimetext.com/ http://mhs.github.io/scout-app/ https://filezilla-project.org/ http://www.chiark.greenend.org.uk/~sgtatham/putty/ http://interconnectit.com/products/search-and-replace-for-wordpress-databases/ http://www.jibjab.com/ http://esotericsoftware.com/ http://www.codeandweb.com/Texturepacker http://developer.android.com/tools/help/index.html http://www.json.org/
30
5.
Lijst van figuren
Figuur 1: Package Control in Sublime Text .........................................................................4 Figuur 2: hernoemen van tabellen .....................................................................................6 Figuur 3: prefix van tabel .....................................................................................................6 Figuur 4: Multisite instellingen...............................................................................................7 Figuur 5: Service block opties ..............................................................................................8 Figuur 6: service columns.....................................................................................................8 Figuur 7: nieuwe optie in array ............................................................................................9 Figuur 8: nieuwe optie is aanpasbaar ................................................................................9 Figuur 9: desktop vs mobile versie ....................................................................................10 Figuur 10: gebruik van Messi.js...........................................................................................10 Figuur 11: cookie opslaan en oproepen ..........................................................................11 Figuur 12: images voor slicing............................................................................................16 Figuur 13: Images mooi geordend en per slice gezet ....................................................16 Figuur 14: Setup scherm in Spine.......................................................................................18 Figuur 15: Images, Classic vs Punk ....................................................................................20 Figuur 16: skins in Spine ......................................................................................................20 Figuur 17: Animatie scherm in Spine .................................................................................21 Figuur 18: Beschrijving van een animatie in skeleton.json ..............................................23 Figuur 19: Links => fout, Rechts => correct .......................................................................24 Figuur 20: deel van het storyboard ...................................................................................25 Figuur 21: syntax voor compositie .....................................................................................25 Figuur 22: oplossing voor ongewenste verschuiving .......................................................25
31
6.
Bijlagen
6.1
Stappenplan On Tour
On Tour animaties: stap voor stap PHOTOSHOP 1) Shapes die bij elkaar horen converteren tot een smart object 2) Als alles goed gaat moet je nu een 15 tal smart objects hebben (linker onderarm, rom, haar front, haar back enzovoort) 3) Deze shapes elk in een aparte slice zetten, maak de slice groot genoeg, sommige andere genres hebben bijvoorbeeld bredere armen of een groter stuk haar 4) De slices best logisch benoemen (bv: D_Haar_Front -> D: drum) 5) Save for web and devices 6) Met een file renamer alle images voorzien van de juiste prefix (M voor man en W voor woman) 7) Normaal gezien zou je nu zo’n mappenstructuur moeten hebben: Spine-Drum Spine file Images Country Man Woman Punk Man Woman Classic Man Woman Hiphop Man Woman Met in iedere man/woman map de correcte images
32
SPINE 1) Normaal gezien heb je voor ieder instrument al een spine file, daarin staan sowieso al 2 skins (manClassic en womanClassic) Bij Drum en Micro is dit zo, bij Gitaar en Sax zijn alle skins reeds aanwezig 2) De snelste manier om een nieuw genre in te voegen is gewoon de skin (bv manClassic) dupliceren en daarin dan alle image links aanpassen Van GitaarClassic naar GitaarPunk ziet er dan zo uit:
3) Wanneer het hernoemen klaar is kan het zijn dat er nog enkele images moeten verschoven worden. Het is belangrijk dat je de bones zelf NIET verplaatst, wanneer je dit doet worden de images voor alle skins verplaatst. Pas dus de locatie van de image aan tegenover de ‘bone’, niet omgekeerd 4) Controleer zeker of alle animaties correct verlopen, het kan zijn dat een onderarm en bovenarm niet helemaal correct aan elkaar geplaatst zijn wanneer bij het roteren van de onderarm een gat ontstaat tussen beide. 5) Wanneer alle animaties en aanpassingen klaar zijn, dan druk je linksboven op ‘spine’ daarna op export (shortcut -> cmd+E). Kies voor JSON, kies een locatie en vink ‘pretty print’ aan. 33
6) Je creëert best een mappenstructuur voor iedere skeleton, voorlopige skeletons zijn: -gitaar -drum -micro -sax -bg1 -bg2 -bg3 -bg4 -crowd_back -crowd_front -crowdbar_front -lampjes -paars -smoke -wit (deze mappenstructuur is reeds terug te vinden op de HD, alsook in je eigen eclipse folder /assets/data/spine) 7) In iedere map plaats je bijhorende JSON file, deze hernoem je dan telkens naar skeleton.json dit omdat Sam’s code telkens zoekt naar een mapje met de naam van het skeleton en daarin 3 files (skeleton.json, skeleton.png, skeleton.txt)
34
TEXTUREPACKER 1) Opdat eclipse straks alles zou vinden was het dus belangrijk dat zo’n mappenstructuur werd aangemaakt, 2) In deze mappen bevindt zich nu al een file die alle animaties en skins beschrijft, we hebben nog geen images , we zullen onze animatie dus nog niet kunnen zien en dit zou fouten opleveren. 3) Omwille van groottebeperkingen zullen we voor ieder skeleton spritesheets aanmaken, hiervoor gebruiken we texturpacker, dit programma zal het allemaal voor ons doen. 4) Start Texturepacker op en open in finder de map met spine files 5) Omdat in de json file alle images gelinkt zijn naar bv: gitaar/classic/man/imagenaam moeten we dit dus nabootsen in Texturepacker, als we dit niet doen en bijvoorbeeld gewoon de imagemap kopiëren zal Texturepacker verwijzen naar: classic/man/imagenaam waardoor ‘gitaar/’ wegvalt, ook dit zal errors geven. 6) Texturepacker houdt enkel rekening met mappen waarin images staan, andere worden compleet genegeerd 7) Mochten we dus bijvoorbeeld de map gitaar(waar de images in staan) in Texturepacker slepen dan zou de map “gitaar” genegeerd worden, dit zie je door de gele kleur op volgende image
8) Indien we bovenliggende map erin slepen (“spine-Gitaar”) dan werkt dit wel
35
9) Wanneer correct is moet je nog enkele opties aanpassen, deze kan je allemaal aan de linkerkant terugvinden 10) DATA FORMAT -> verander dit naar LibGDX 11) ALLOW ROTATION -> vink dit uit 12) Bij grote images (bv bij decor) kan het gebeuren dat niet alle images in het 2048x2048 vak kunnen, check dit zeker, wanneer dit het geval is kan je altijd de MAX SIZE width aanpassen naar een groter getal 13) De paths voor waar de Data file (txt) en de Texture file (png) moeten staan moet je nog invullen, kies hier voor de mappen die je in stap 6 (bij SPINE) reeds hebt aangemaakt, hierin zou dus al een JSON file moeten staan vanuit spine. Noem beide bestanden ‘skeleton’ en export ze naar de correcte map
14) Druk op publish ECLIPSE 1) Vragen over hoe je de workspace van eclipse en sourcetree opzet stel je best aan Sam, daarmee zal ik je weinig kunnen verder helpen. 2) Wat we nu reeds hebben zijn een tiental mapjes (1 voor ieder skeleton) met daarin telkens 3 files, skeleton.JSON, skeleton.PNG, skeleton.TXT, hier zal Sam zijn code dus naar zoeken 3) Sleep deze mapjes dus naar je map voor je workspace 36
4) Het path zal er ongeveer zo uitzien: libgdxtest1-android\assets\data\spine 5) Als alles correct uitgevoerd werd zouden we nu dus zonder problemen skeletons moeten kunnen tonen op onze scene 6) Ik leg nog even de syntax uit:
Hier roepen we 2 skeletons aan, “drum” en “gitaar”, drum wordt op seconde 5 getoond op positie x:400 y:250 met een scale van 0.5, ondertussen wordt de animatie “drumloop1” getoond. “drum” zal gedurende 10 seconden (tot seconde 15 dus) vanzelf verplaatsen naar zijn nieuwe locatie, x:700 y:140, hij zal ook vergroten tot scale 0.8 en zal dan ook gespiegeld worden. Skeleton “gitaar” start op seconde 12 met animatie “hop” op positie x:220 y:100, een grootte van 0.4 , tot seconde 15 zal hij verplaatsen tot op x:700 y:140 en vergroten tot 0.8 daarna wordt hij onzichtbaar (animation:null) Onderaan de file wordt het audiobestand opgeroepen. TIPS AND TRICKS Alles wordt telkens automatisch verplaatst wanneer je bij 2 keyframes een verschillende locatie of scale opgeeft, dan zal deze automatisch tweenen. Willen we dat dit niet gebeurt, bijv: groepsshot met alle instrumenten, meteen erna moet een shot van enkel de gitarist getoond worden maar dan groter en op een andere locatie, dan kunnen we dit zo oplossen:
37
We voegen een nieuwe keyframe toe, deze wordt een honderdste van een seconde voor de uiteindelijke toneelwissel gezet, met nog de oude coördinaten, meteen erna verplaatst deze dus een paar honderd pixels, doordat deze tween maar 0.001 seconde duurt is deze dus niet zichtbaar.
Alle animaties van de instrumenten duren 2 seconden (60 frames) en zijn perfect geloopt (start en eindpositie werden vastgelegd met keyframes) de animaties van ieder decorstuk duren 4 seconden (120 frames) en zijn ook perfect geloopt, hiermee hou je best rekening bij het opzetten van je scene. Wanneer bijvoorbeeld de gitarist 6 seconden in beeld moet komen kun je hem bijvoorbeeld dit laten doen
Op seconde 0 start hij met de animatie “hop”, deze zal hij dus 2 keer uitvoeren, op seconde 4 veranderd dit in “shred1”, op seconde 6 verdwijnt hij van de scene. Wanneer dit niet gevolgd wordt zal de animatie schokkerig overkomen.
38
6.2
JSON file On Tour
39
40
41
