3. 🛠️Proces
Zoals altijd begon ik eerst met brainstormen. Ik wist al dat ik iets met visual storytelling wou doen. Ik zag in een van de slides iets over de museum van Mario van IGN. Toen ik de website bezocht wist ik gelijk dat ik ook zoiets wou maken. Ik ben zelf erg fan van het verzamelen van games en dacht dat ik wel op een interessante manier iets over de beste games ooit gemaakt kon doen. Ik wou dat de gebruiker op reis ging door de geschiedenis en door beeld, geluid en tekst een indruk kreeg. Ik denk dat dit deze vorm van storytelling ook goed aanslaat bij vele anderen. Er zal wellicht wel een spel zijn die iemand veel heeft gespeeld. Dit project triggert dan een oude herrinering (aka nostalgie) en start dan wellicht gelijk een gesprek daarover. Dat is mijn doel.
Maar waar ga ik mijn games data vandaan halen? Toen ik online ging zoeken naar games databases vond ik al snel veel verschillende services en platformen. Een van de eerste was igdb.com. Deze games database heeft veel informatie over games zoals release datum, boxart en videos. Ook ontdekte ik vgchartz.zom, deze database gaat vooral over sales van verschillende games. Ook erg handig om te hebben. Ook metacritic.com en ign.com waren erg handig. Deze platformen focussen zich vooral op reviews en hebben lijsten met de beste games ooit gemaakt. Die kan ik goed gebruiken voor mijn project.
Aangezien al deze data van verschillende bronnen komt vond ik het meest handige om alle data te verzamelen in een json bestand. Ik had nog gekeken naar de igdb.com API maar het was erg veel gedoe om die werkend te krijgen (Twitch account aanmaken, developer role aanvragen, credentials API call maken, dan pas beschikbaar).
Tijdens het verzamelen van de data begon ik eerst goed te kijken naar welke data ik wou hebben. De titel, boxart en de release datum vond ik een must. Ook beschrijvingen, scores, sales en de platformen vond ik belangrijk om te verzamelen. Maar om mijn storytelling project echt naar het volgende level te brengen vond ik dat ik iets moest doen met beeld en geluid. Ik ging op YouTube op zoek naar gameplay video's van verschillende games. Dat opzich zelf was ook een lastige taak. Vele video's hadden de volledige gameplay (10-12 uur), commentaar, geen 16:9 aspect ratio's (oudere games), en enz. Bij sommige games heb ik zelf video's opgenomen omdat ik die in mijn backlog heb. Ook heb ik nog vele video's bewerkt met de soundtrack van de game. Op die manier wil ik nog meer nostalgie triggeren en elke zijn eigen plek geven.
Uiteindelijk had ik vele video's. De volgende uitdaging was om de de grootte van de video's zo ver mogelijk te minimaliseren. Door vele compressie methodes heb ik de totale folder van 310MB naar 129MB weten terug te dringen. Iet's wat erg nodig is.
Nu ik alle data had ging ik verder met het ontwerpen van mijn project.
Hoewel ik wist wat ik wou maken had ik nog geen idee hoe het project eruit moest zien. Dat word schetsen! Ik wou graag een soort slide show maken door mijn applicatie. Ik zal al te denken aan scroll snap en transities als je naar een game scrollt. Ook speelt dan de achtergrond video af. Ik had zoiets in gedachte:
Ook ging ik aan de slag met het maken van een banner image voor de readme/og-image en een favicon.
Mijzelf kennede ging ik gelijk aan de slag met het bouwen. Aangezien ik uit ervaring weet dat daarin het meeste werk en tijd gaat zitten.
Ik zat in het begin nog erg te piekeren over hoe ik het project wou bouwen. Ik had in het begin een Gatsby starter project gedaan maar ik vond al gauw dat het erg complex werd. Ik zag in de slides dat er met Vite werd gewerkt. Ik had hiervoor er nog nooit mee gewerkt en ik moet zeggen dat dit wel de meest makkelijke manier is om snel een project op te zetten. Binnen no time had ik een local website draaiend met vue als frontend en sass als style preproccesor (wellicht korter dan 5 minuten). Daarna maakte ik een Github repo aan voor mijn project en maakte ik gelijk een verbinding met Netlify zodat met elke push naar de main automatisch een build werd gemaakt en dat mijn project online toegangelijk is.
Toen ik de boilerplate had opgezet ging ik alle data verzamelen van de games en die in een json bestand plaatsen en structeren. Dit Json bestand lees ik dan uit in Vue met een for loop. Dit koste weinig moeite en ik had al snel mijn data in project.
De volgende uitdaging waren de video's. De video's moeten afspelen op het moment dat de gebruiker een bepaalde game bekijkt. Ik heb wel een paar dagen besteed aan het uitzoeken en programmeren van deze feature. Gelukkig ontdekte ik de Intersection Observer API. Dankzij deze API speelt de video af op het moment dat de gebruiker bij een bepaalde game is.
Wat ik ook slim heb opgelost is dat browsers het eigenlijk niet toestaan dat je automatisch video's afspeelt. Browsers laten dit alleen toe als de gebruiker eerst interacteert met je website. Dit heb ik slim opgelost door een overlay eerst toe te voegen die vermomt is als introductie en dat je op een button moet klikken om de ervaring te starten. Vond ik wel een goeie van mijzelf.
Uiteindelijk heb ik nog veel tijd besteed aan de styling van de layout, de transitions, en enz. Het was leuk om vooral te spelen met margins/paddings, font-sizes en kleuren. Hier en daar zitten ook nog kleine subtiele styling zoals text shadow op de teksten zodat ze beter leesbaar met de achtergrond video bijvoorbeeld.
Hoewel ik dacht dat de scrolls-snap nog een uitdaging zou worden was deze feature toegevoegd binnen een paar minuten.
In mijn project heb ik ook een mobile overlay toegevoegd aangezien ik vind dat mijn storytelling project het beste ervaren word op een groter scherm.
Na weken te hebben gewerkt aan mijn project had ik een mooi resultaat. Ik ging mijn website nog testen in andere browsers en een check doen met Google Lighthouse op verbeteringen. Over het algemeen waren er geen grote problemen.