Stap 8 : Graphics
Na al dat ge-programmeer is het wel leuk om voor de laatste stap van deze tutorial nog een paar leuke dingen aan de vormgeving van het spel te doen.
Unity heeft hiervoor een aantal hele leuke functies. Eén ervan is het ‘Trail Renderer’ onderdeel.
Een Trail Renderer kun je gebruiken om bijvoorbeeld een rookspoor achter een vliegtuig te maken of remsporen in een racing-game.
De Trail Renderer maakt daarbij gebruik van een Material en een plaatje. Het plaatje kan gewoon een wit naar transparante gradient zijn die je in Photoshop hebt gemaakt.
Dat plaatje wordt door de Trail Renderer als het ware eindeloos gekopieerd en achter elkaar geplakt als de Trail Renderer door het level beweegt:
Selecteer Pongball in de Hierarchy view of de Scene view. Klik daarna op Add Component in de Inspector view en selecteer ‘Effects > Trail Renderer’:
Klik met je rechter-muisknop in de Materials map in de Project view en maak een nieuw Material voor de TrailRenderer, je kunt dit materiaal bijvoorbeeld PongBallTrail noemen:
Klik op het nieuwe materiaal in de Project view om de instellingen ervan te zien in de Inspector view en verander bovenaan de ‘Shader’ van het materiaal naar Particles > Standard Unlit:
Zet de ‘Rendering Mode’ van het materiaal op ‘Additive’:
Download de afbeelding hieronder naar je computer met de rechter-muisknop en ‘Afbeelding opslaan als..’ en kies als locatie je bureaublad :
(Het plaatje voor de trail renderer is met opzet wit gelaten omdat je dan de kleuren ervan zelf nog in kunt stellen in Unity met de materiaal kleur. Een witte afbeelding kun je nog iedere kleur geven die je wilt maar met een afbeelding die al een kleur heeft gaat dat minder goed. De doorzichtige randen laten het er mooi zacht uit zien in Unity.)
Sleep de afbeelding van je bureaublad naar de Textures map in de Project view om het aan je project toe te voegen.
Selecteer de afbeelding in de Project view en verander in de Inspector view het ‘Texture Type‘ naar ‘Sprite (2D and UI)’ en klik daarna onderaan in de Inspector view op ‘Apply’:
Selecteer het PongBallTrail materiaal in de Project view en sleep daarna de afbeelding uit de Textures map in de Project view naar het lege texture vakje voor ‘Albedo‘ in de Inspector view:
Je hebt nu een apart materiaal gemaakt voor de Trail Renderer en daar een texture aan toegewezen.
Selecteer PongBall in de Hierarchy view om de instellingen van de Trail Renderer te zien in de Inspector view.
Klik op het kleine driehoekje voor ‘Materials’ in de Trail Renderer instellingen om het open te vouwen en sleep daarna het Trail materiaal naar het lege vakje achter ‘Element 0’:
Verander daarna de instellingen van ‘Time’ en ‘Width’ zoals in de afbeelding hieronder. Je kunt de Width van de Trail aanpassen door het rode puntje aan het begin van de rode lijn omlaag te slepen naar 0.5 :
Door aan het einde van de rode lijn die je ziet bij Width te klikken kun je van de rechte lijn een Bézier curve maken (zoals met de pen tool van Photoshop/Illustrator).
Hierna kun je het nieuwe puntje verder omlaag slepen om te zorgen dat de breedte van het spoor geleidelijk aan minder wordt:
De kleuren van de Trail kun je aanpassen door in de instellingen achter ‘Color’ op het witte vakje te dubbelklikken en een gradient in te stellen. Je kunt éen of meerdere kleuren instellen met de onderste pijltjes.
Transparantie regel je met de bovenste pijltjes en de ‘Alpha’ slider.
Door naast de al bestaande pijltjes te klikken kun je meerdere kleuren toevoegen.
Hieronder zie je een gradient bestaande uit de kleuren geel, oranje, rood, paars en blauw. Tegen het einde van de gradient gaat de ‘opacity’ (ondoorzichtigheid) omlaag om te zorgen dat de Trail aan het einde ervan zachtjes verdwijnt:
De Trail Renderer is nu klaar! Test de game en je zult zien dat er een mooi spoor achter de bal verschijnt!
Het uiterlijk van games wordt voor een groot deel bepaald door de gebruikte textures.
Om een klein voorbeeld te geven van wat je met textures kunt doen, download de afbeelding hieronder naar je bureaublad en sleep deze daarna naar de Textures map in de Project view van Unity, op dezelfde manier als je met de Trailrenderer afbeelding hebt gedaan:
Sleep de texture daarna uit de Project view naar de twee floors in de Hierarchy view of de Scene view en zorg dat de rechter floor plane 180 graden is gedraaid op de Y-as in het Transform component om te zorgen dat de twee textures goed aansluiten:
Om de muren en de spelers textures te geven kun je bijvoorbeeld zoeken op google images naar grass, stone, wood of sci-Fi textures of iets dergelijks.
Als je zoekt op ‘Tileable stone textures’ vind je textures waarvan de randen op elkaar aansluiten als je ze naast elkaar plaatst zoals bij de texture hieronder:
Hoe vaak een texture herhaald moet worden kun je instellen in het materiaal bij ‘Tiling’:
Het eindresultaat!:
Van 3D naar 2D
Om van een game gemaakt met 3D objecten een 2D spel te maken kun je de ‘Main Camera’ recht boven het Pong level plaatsen en recht omlaag richten door de camera 90 graden te draaien op de X-as. Voor het gemak kun je de volgende Transform instellingen overnemen:
Zet daarna onder de Transform in de Camera instellingen de ‘Projection’ op ‘Orthographic’, (dit zorgt ervoor dat alles er plat uit komt te zien) en de ‘Size’ op 6.5:
Zoals je ziet kun je dus ook met 3D objecten een 2D spel maken maar het is in Unity ook mogelijk een 2D spel te maken met alleen platte plaatjes (‘sprites’). Als je daarin geïnteresseerd bent kijk dan bijvoorbeeld eens op de Unity tutorials pagina: https://learn.unity.com/tutorials
Tot slot
Zoals je merkt komen er zelfs bij een super simpel spelletje zoals Pong al een hoop dingen kijken en zijn er nog een hoop dingen om te verbeteren (zie hieronder).
Het zijn wel dingen die in heel veel andere spellen ook bruikbaar zijn!
Waar het op neer komt is dat je eigenlijk niet om het maken van een ‘simpel’ Pong spelletje heen kan, als je gaat beginnen met games maken.
Bij deze heb je er in ieder geval alvast éen gemaakt!
Als je verder wilt werken aan je Pong game kun je met Deel 2 van de Pong tutorial aan de slag. In deel 2 leer je onder andere hoe je een hoofdmenu voor je game kunt maken en hoe je van je spel een echte build maakt, dus een echt spel bestand wat je aan vrienden en familie kunt geven!
Dingen die je verder kunt verbeteren/onderzoeken :
Graphics
Het pong spel ziet er grafisch nog niet zo indrukwekkend uit maar zijn natuurlijk wel een groot onderdeel van een spel en bepalen voor een groot deel ook hoe leuk een spel is.
Een paar dingen die je nog zou kunnen doen om het grafisch te verbeteren zijn bijvoorbeeld het gebruiken van ‘textures’ (plaatjes) voor de materialen in plaats van alleen kleuren.
Particle systems worden gebruikt voor allerlei leuke effecten zoals rook, sterren, regen, sneeuw, watervallen, vuur, explosies, magie etc.
Het leuke van particle systems is dat ze heel erg dynamisch zijn en op heel veel manieren te gebruiken zijn. Je kunt bijvoorbeeld een particle system aan de spelers vastmaken of aan de bal.
Gameplay
De gameplay van Pong kan ook op veel manieren nog verbeterd worden. Het stuiteren van de bal is nog niet perfect, en het spel is ook alleen nog speelbaar met twee spelers.
Je zou bijvoorbeeld een AI script kunnen schrijven waardoor speler 2 vanzelf heen en weer gaat bewegen in de richting van de bal, zodat je tegen de computer kunt spelen.
Of pong voor vier spelers!
Ook kun je de snelheid van de bal na een paar rondes op laten lopen waardoor het dus steeds moeilijker wordt, of meerdere ballen tegelijk in het spel laten verschijnen.
Geluid
Het is natuurlijk een stuk leuker als je een geluidje hoort wanneer de pong bal kaatst. Je kan ook een script gebruiken om de ‘pitch’ van een geluidje random te veranderen iedere keer dat de bal kaatst. Op die manier kun je éen geluidje steeds net even anders laten klinken wat het een stuk minder saai maakt!
Coster-Graphics 
