Workshop A-Frame en Unreal Engine

Introductie

In de workshop is gewerkt met twee tools waarmee een virtual wereld gecreerd kan worden. De eerste tool is A-frame, een web framework wat werkt met html en javascript. Unreal Engine is de tweede tool waarmee ik heb gewerkt. Het is een development omgeving, waar je games en simulaties kan maken.

A-frame

Om A-frame goed te laten werken, ben ik begonnen met een githubpage maken. Een A-frame moet namelijk online gezet worden, anders worden bepaalde delen niet uitgevoerd. Als de code lokaal wordt gedraaid, krijg je een zwart beeld.

Shapes

Deze opdracht bestond uit het begrijpen van de verschillende basis vormen, zoals de lucht en ondergrond. Ook heb ik vormen toegevoegd, namelijk de cylinder, tetrahedron en dodecahedron. In deze opdracht heb ik al kunnen spelen met de positie, grootte en rotatie, zodat de vormen goed zichtbaar zijn voor de gebruiker.

Texture en Animation

In de opdracht over textuur heb ik geleerd hoe je textuur moet toevoegen aan de vormen. Zoals het toevoegen van gras aan de ondergrond. In de opdracht over annimaties heb ik geleerd hoe ik zowel in html als javascript annimaties kan toevoegen aan vormen.

Interaction

In deze opdracht heb ik geleerd hoe je een interactie kan creëren met de muis, zoals een box die na aanraking van de muis gaat bewegen. Deze interactie kan gemaakt worden in html, maar later heb ik het ook gemaakt in javascript.

Interaction Headset

Deze opdracht is voortgeborduurd vanuit de opdracht Interaction, maar nu heb ik gewerkt om de boxen te laten werken als je een VR bril op hebt. Dit kan bereikt worden door een a-camera element toe te voegen. Hier worden verschillende elementen aan toegevoegd, zodat deze elementen gekoppeld zijn aan het camerabeeld. Zo is de muis vervangen door een cirkel, en later door een driehoek, zodat de gebruiker een referentiepunt heeft.

Unreal Engine

Unreal Engine is een programma wat je download op je computer. Om de basis van dit programma te leren kennen, heb ik via de website van Unreal Engine een stappenplan gevolgd. Klik hier voor het stappenplan.

Om te beginnen maak je een leeg canvas, zodat daarna de documenten voor dit project geïmporteerd kunnen worden. De documenten bestaan uit een banaanmodel, wat de vorm van de banaan geeft en de textuur, wat de textuur aan de banaan geeft.

Om de banaan een textuur te geven, moet eerst een materiaal gecreerd worden. Hierop kan de textuur worden geplakt, wat kan door middel van nodes. Nodes zijn objecten waaraan een bepaalde waarden toegevoegd kan worden, zodat bijvoorbeeld textuur toegevoegd kan worden.

Door het toevoegen van een componenten en de toevoeging van blueprints nodes , kan de banaan draaien. Een blueprint node is iets anders dan een node, omdat een blueprint node zowel een input als output nodig hebben.

Verdiepende opdracht

In de verdiepende opdracht heb ik een soort pacman gemaakt, waar een blokje de bananen (van de voorgaande opdracht) opeet. De uitleg van deze opdracht is via deze link terug te vinden.

In deze opdracht wordt gebruik gemaakt van blueprints, wat een visuele vorm is van coderen. Dit zorgt ervoor dat je sneller een prototype van een game kan maken.

Om de bananen te kunnen opeten, moet je eerst een pion maken. Aan de pion worden alle waarden gegeven, waardoor hij uiteindelijk kan bewegen en de bananen kan opeten. Zo wordt een camera toegevoegd, zodat je de pion vanuit de juiste hoek volgt/bekijkt.

Door het toevoegen van StartPlayer, heeft de pion een startpunt. Vanuit hier kunnen de keyboard toetsen gekoppeld worden aan een beweging. Zo is W bijvoorbeeld vooruit. Ook kan je nog een variabele MaxSpeed toevoegen, wat zorgt dat de pion niet te snel gaat.

Het object AddActorLocalOffset zorgt ervoor dat de pion niet door andere elementen heen kan. De banaan is een apart gecreëerd item, met een overlap element. Dit zorgt dat de pion de bananen kan opeten.