top of page

The Making of Memo's Forest

Zoals in de introductie was aangehaald, Memo's Forest was origineel een game. Een top-down pixelgame om exacter te zijn. Dit betekend dat de camera van bovenaf naar beneden kijkt en de speler volgt, en dat de grootte van het scherm sterk ingezoomd is waardoor je de pixels duidelijk kan zien.

​

Op zich stond ik voor de originele game al vrij ver op het technische aspect. Het bestuurde personage kon rondlopen, had collisie en kon interageren met de omgeving en andere personages. Daarnaast had ik een pathfinding systeem in elkaar gestoken op basis van een Australische paper die "Clearance-based and Hierarchical Annotated A*" pathfinding behandelde.

 

Maar op het visuele aspect waren dingen heel beperkt vanwege de game engine waar ik in werkte (GameMaker Studio 2).

​

Ten eerste waren er geen "echte schaduwen", licht en schaduw moest worden "gefaked".

Ik had geprobeerd een belichtingsysteem te implementeren op basis van de ideeën van één van de gamedevelopers van de videogame "Celeste", maar dit paste niet goed binnen de stijl.

screenshot game.png
screenshot game3.png
screenshot game2.png

Ten tweede was er niet echt een mogelijkheid tot 3D elementen. Opnieuw was dit "gefaked", zoals top-down games vaak doen. De omgevingen zouden heel beperkt zijn omdat er gewerkt word met een "tileset", een serie bouwblokken waarmee heel de omgeving gemaakt kan worden.

screenshot game4.png

En dan het grootste probleem: tijd. Het verhaal en de cutscenes implementeren zou heel veel tijd vragen, er zouden bugs kunnen zijn die tijd vragen om op te lossen, en audio zou veel moeilijker worden dan audio voor een animatiefilm.

​

Ook op het vlak van het verhaal gingen dingen heel stroef. Mijn ideeën waren vaak veel te groot, waardoor heel veel tijd verloren ging met het herschrijven. Het leek dat bij elke coaching afspraak met mijn promotors mijn verhaal was veranderd. Ik had me daarom ook ingeschreven in een "writersroom" in de campus van Leuven als keuzevak, in de hoop eindelijk het "licht te kunnen zien".

 

Na 20.000 woorden aan script en hulp van mijn leerkrachten ben ik dan toch uitgekomen op het finale verhaal van Memo's Forest.

 

Rond deze tijd (Januari) werd dan beslist dat ik een trailer zou gaan maken. Dit was waarschijnlijk de moeilijkste fase van het jaar omdat ik veel werk zou moeten gaan weggooien, maar ondanks alle frustratie heb ik toch doorgezet en was ik begonnen aan het nieuwe storyboard en een nieuw research onderwerp: videogametrailers. Gelukkig kon ik het verhaal van de game en delen van het vorige storyboard behouden.

Story board

Het storyboard hieronder was het originele "storyboard" om de cutscenes in de game te plannen. 

storyboard.png

Het storyboard van de trailer is van nature uitgebreider. Omdat de game een top-down view heeft zijn camerastandpunten niet belangrijk.

storyboard2.png

Na de passende muziek te hebben gevonden kon ik een animatic maken met behulp van deze storyboard panelen.

Character animation

Vervolgens begon de animatie van de personages. Ik koos ervoor alle karakteranimatie te maken in Adobe Animate vanwege de "symboolfunctie" die uniek is aan het programma. Deze "symboolfunctie" zorgt ervoor dat het maken van loops heel gemakkelijk wordt, en aangezien videogames heel veel loops gebruiken in hun animaties zou dit het hele werkproces versnellen.

 

Het nadeel aan Animate is dat alle animatie in vectors worden gemaakt, en ik had pixelanimatie nodig. Daarom zette ik elke unieke karakteranimatie over naar Adobe After Effects, waar ik de animaties kon omzetten naar gerasterde animaties. Deze moest ik dan enkel nog verkleinen en opnieuw inzoomen, waardoor de animaties een pixel-art effect kregen. Het resultaat is niet perfect, maar omdat er heel weinig tijd zou zijn om het hele project af te krijgen ben ik deze techniek blijven gebruiken.

Runcycle Preview_Flash vs Pixel_1.gif

Om de karakteranimatie beter te maken ben ik op zoek gegaan naar voorbeelden van karakteranimatie in bestaande games. Zo heb ik een "3D model viewer" gevonden van de game "League of Legends". Hierin konden niet enkel de originele 3D modellen van de personages uit de game bekeken worden vanuit verschillende camerastandpunten, maar ook alle verschillende animaties konden frame per frame afgespeeld worden. Ik heb gemerkt dat veel van zo'n animaties "stretch and squash" heel extreem gebruiken om de gameplay beter te doen aanvoelen. Op die manier heb ik bijvoorbeeld de animatie waar het hoofdpersonage met pijl en boog schiet kunnen verbeteren.

lol animation comparison.gif

Dit werkte ook voor andere acties, zoals slaan met een pickaxe/hamer.

pickaxe animation.gif
Speed Animation.gif

Eens de karakteranimaties klaar waren moesten ze in de 3D omgeving gezet worden. Elke animatie werd op een aparte "plane" gezet, waardoor deze vrij bewogen konden worden in de omgeving.

all assets workflow screenshot.png
all assets workflow screenshot2.png

Achtergrond animatie

Voor de achtergrondanimatie had ik besloten het 3D programma Blender te gebruiken. Dit programma beschikt van een real-time render engine, waardoor scènes (zoals de naam al weggeeft) in real-time afgespeeld kunnen worden in de editor, zonder dat de frames uitgerenderd hoeven te worden om het uiteindelijke resultaat te kunnen bekijken. Net zoals in een echte 3D game dus.

​

Het nadeel is dat de kwaliteit van zo'n real-time render iets lager ligt dan zwaardere rendering engines. Maar dit was geen probleem: scènes die ik maakte in de real-time engine kon ik met één knop omzetten naar de zwaardere en mooiere rendering, waardoor ik het beste kreeg van de twee werelden.

​

De wereld van Memo's Forest bestaat vooral uit bossen. Veel loops van bewegende bomen en grassen dus. Ik heb alle planten eerst in Adobe Photoshop getekend, ditmaal op de "juiste" manier; met pixels in plaats van vectoren. Vervolgens importeerde ik deze tekeningen in Adobe After Effects, waar ik de animatietechnieken kon toepassen die ik had geleerd in 2017 tijdens het maken van de "Decor" animatie.

​

Om de planten een "randomized" effect te geven heb ik verschillende versies gemaakt van elke soort plant. Omdat er zoveel kleine planten wordt gebruikt in de scènes heb ik daarnaast ook de verschillende grassen en bloemen een "tijdsshift" gegeven, waardoor elke plant in de scène op een verschillend tijdstip binnen de loop begint af te spelen. Hierbij moest ik creatief zijn, want Blender kan niet een animatie "loopen" en tegelijkertijd voor elke plant een willekeurig startmoment van de loop kiezen. Ik wou ook niet 10 verschillende animaties uitrenderen die in principe allemaal hetzelfde zijn en gewoon op een ander tijdstip starten, want dit zou de file te zwaar maken om in real-time af te kunnen spelen. Daarom heb ik voor elke plantsoort maar één animatie uitgerenderd, waarin de verschillend getimede loops naast elkaar gezet worden en waar Blender dan voor elke plant een willekeurige loop moet uitknippen.

​

(De loops in onderstaand voorbeeld zijn geen perfecte loops omdat de bomen en de kleine planten verschillende tijdsduren hebben).

MASTER PLANTS ANIMATION.gif

Om de planten organisch in de scène te zetten gebruikte ik de "particle" functie van Blender. Hiermee kon ik met een brush op de grond tekenen waar wel en niet planten mogen staan, en hoe dicht bebost elke plek is.

Foliage Generation.gif

De trailer moet een top-down game voorstellen, een orthografisch camerastandpunt dat gebruikt word voor 2D animaties waar geen zichtbare horizon aanwezig is. Om de 2D animaties in de 3D omgeving te doen werken zouden de animaties ten allen tijden naar de camera gericht moeten worden, zodat het niet opvalt dat ze zich op een plane bevinden.

​

​

​

​

​

​

​

​

​

​

 

Ik kon echter niet gewoon alle animaties plat op de grond leggen en de camera naar beneden laten kijken, want dan zouden er geen schaduwen zijn en zouden de animaties elkaar overlappen. Ik kon ze ook niet loodrecht op de grond zetten en dan de camera rechtdoor laten kijken, want dan zou er een horizon zijn en kon je de grond niet meer zien.

​

De oplossing was om zowel de camera als elke 2D animatie in de scène op een hoek van 45° graden te zetten. Zo zouden er schaduwen mogelijk zijn, zijn er geen overlappingen in de diepte, en krijgt de scène een "top-down" look.

​

​

faceme component.gif
screenshot.png
Testrender100250.png

Ook "echte" 3D objecten moesten deze regel volgen, want anders zouden planten dichtbij deze 3D objecten door het 3D object heen snijden.

blender screenshot2.png
blender screenshot.png

Dialoog

Het laatste aspect van de animatie: de geanimeerde dialogen. Dialogen worden in games zonder voice-over gebruikt om gesprekken of vertellingen te emuleren. In dit soort games worden deze teksten vaak geanimeerd met een "typewriter" effect, een effect waarbij elke letter één voor één op het scherm verschijnt.

​

Dit is uiteindelijk het enige moment waarop ik GameMaker heb gebruikt. Het is veel gemakkelijker een dialoog engine te programmeren die het typewriter effect automatisch animeert dan handmatig letter voor letter de tekst te animeren (althans, dat kan ik zeggen omdat ik voor een of andere rede deze engine elk jaar herschrijf). 

​

De mensen die mijn bacheloranimatie hebben gezien weten dat ik graag special effects gebruik in mijn tekstanimaties. Voor mijn masterproject heb ik me meer ingehouden, omdat de scènes heel kort zijn en ik niet te veel aandacht wou wegnemen van de rest van het beeld.

textbox2.gif

Naast de tekst animatie heb ik ook portret animaties gebruikt. Dit is een techniek die verhalende videogames en visual novels gebruiken waarbij de personages op het scherm worden getekend met een hogere kwaliteit en met meer details waardoor emoties beter afgebeeld kunnen worden. Ik heb in deze portrettekeningen ook animaties gestoken omdat ik vond dat videogames dit niet genoeg doen. Natuurlijk kan je de portretanimatie en de tekstanimatie niet tegelijkertijd bekijken, waardoor dit werk misschien een beetje verloren gaat, maar ik vind dat het op een of andere manier de karakters meer tot leven brengt.

portraitanimation.gif

Dat was het zowat een beetje. De rest is montage, compositing en natuurlijk audio.

​

Er zijn veel dingen die ik nog anders zou willen doen, zoals sommige 3D objecten die beter 2D objecten hadden kunnen zijn, of de pixel-art van de personages die beter kan, maar uiteindelijk is er altijd nog een deadline die het daar niet mee eens is.

 

Al in al heb ik dit jaar heel veel geleerd op het vlak van verhalen vertellen, heb ik een betere appreciatie gekregen voor de kunst van het maken van trailers, en heb ik opnieuw kunnen beseffen hoe slecht ik ben in het inschatten van tijd en werklast.

​

bottom of page