Aanmaken van de basis VR omgeving
Tijdens de VR minor heb ik geleerd hoe je van de Oculus quest en de HTC vive pro een standaard VR omgeving opzet. Dit doe ik met de standaard geïmporteerde assets van de Unity Asset store. Ook snap ik hoe de physics met muren, zwaartekracht, teleporten en de grond werkt. Ik heb met basisoefeningen uit de les al deze elementen kunnen oefenen.
Visual Cue implementation
De visuele cues die ik gemaakt heb heb ik ook geïmplementeerd in Unity. Dit heb ik gedaan door een animator en een animation component te maken in Unity en mijn photoshop.
Je kan in photoshop een transparent animated gif maken die je met frames kan uitwerken. Deze kan je daarna downloaden als .gif bestand.
Daarna maak ik van deze gif een zogeheten spritesheet die ik vervolgens importeer in de animation. Daarna koppel ik het animator component eraan, die de animatie afspeelt en loopt. 
Zie hiernaast het resultaat.

De frames, zoals gemaakt in Photoshop

De frames geïmporteerd in de Animation

De animator controller verantwoordelijk voor het afspelen

Maken van een geanimeerde transparantie op een GameObject
Voor de soepele transitie tussen scenes heb ik bedacht dat we animaties moeten toevoegen aan sommige objecten. Één object daarvan zijn de ringen die spawnen bij het activeren van de online shopping experience. 
Om de transparantie maken moet je in unity een C++ script toevoegen aan je object en deze koppelen. Vervolgens in het script geef je aan wat de variabelen zijn. Dit zijn max ring transparency, startup time en fade out time.

De input die de holoring aandraait

Het begin van de code die bepaald welke variabelen er aanwezig zijn in de animatie

Daarna maak ik een switch aan waarin meerdere states staan. Tijdens het bedienen van de knop op de laptop zal dit script switchen tussen de states. Vervolgens zal de ring transparantie met if-statements en Time.deltaTime de tijd gaan berekenen en langs die tijd leg je dan de transparancy value die optelt of aftelt. De ring zal tussen deze twee waardes transitioneren en daardoor krijg je een geanimeerde transparantie.

De rest van de code die bepaald hoe de animatie verloopt

De fade-in van de winkelervaring

Implementeren van nieuwe time traveling experience
Bij het hoofdstuk Immersive Experience Design kan je meer lezen over de creatie van het tijdreizen, maar ik onthul hier hoe ik dit heb geïmplementeerd.
Als eerste heb ik de gebruiker in een soort bol geplaatst waarvan de binnenkant een zwart/paarse achtergrond heeft. De player word gespawned op het plateau met een klok voor zijn neus.
Net onder het plateau zit een extreem uitvergrote 'falling star' animatie die van het middelste punt naar de buitenkant van de bol animeert. Deze animatie heb ik gedownload uit de asset store en bewerkt.

Het bovenaanzicht van de tijdreis ervaring

De aftellende klok
Het aftellen van de klok was wat complexer. Deze heb ik gedaan in een co-programmeer sessie met Gijs uit mijn team.
De klok werkt op de volgende manier:
Omdat je naar de toekomst, het verleden en het heden gaat in het spel hebben we 3 states aangemaakt: past, future en present. 
We geven de klok 5 seconden om op of neer te tellen, ongeacht het aantal dagen dat je voor of achteruit moet. Dat doen wij door de .AddDays functie. Deze gebruiken wij ook in de -, zodat terug in de tijd kan. Dit betekent dat een jaar terug gaan in de tijd relatief sneller gebeurd dan een week terug in de tijd. 
Voor het aantal dagen dat je vooruit of achteruit moet gaan gebruiken we onze eigen variabele TimeDifferenceToPast/Future. In een ander script staat aangegeven dat dit waardes zijn van 365 of 7. (Een week of een jaar). De klok telt deze waarde op of af relatief van de datum van DateTime.Now (de datum van vandaag volgens het apparaat).
Daarna koppel je dit script aan het object door weer bovenaan de scripts de variabelen in te zetten en deze te koppelen aan het klok GameObject.

De code achter de tikkende klok

Het resultaat van de tikkende klok

Lees verder

Back to Top