Pong : Stap 8

Stap 8 : Graphics

Na al dat ge-programmeer is het wel leuk om voor de laatste stap van deze tutorial nog een paar makkelijke dingetjes 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 transparant gradient zijn die je in Photoshop of GIMP 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:

TrailrendererExample2TrailrendererExample1

TrailrendererExample3TrailrendererExample4

Klik op de Pongbal in de Hierarchy view of de Scene view. Klik op ‘Add Component’ in de Inspector view en selecteer ‘Effects > Trail Renderer’:

Klik met je rechter-muisknop in de Project view en maak een nieuw Material voor de TrailRenderer:

NewMaterialTrailrenderer

Klik op het nieuwe materiaal in de Project view om de instellingen te zien in de Inspector view en verander de  ‘Shader’ naar Particles > Additive (soft):

TrailRendererShaderCallout-01

Download de afbeelding hieronder naar je computer met de rechter-muisknop en ‘Afbeelding opslaan als..’ en kies als locatie je bureaublad.
Let op, de afbeelding is volledig wit/transparant en daarom moeilijk te zien op deze pagina maar geloof me, tussen de kniplijntjes zit een PNG afbeelding :

—–✁—–✁—–✁—–✁—–✁—–✁—–✁—
TextureTrailRenderer
—–✃—–✃—–✃—–✃—–✃—–✃—–✃—

(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 Unity Project view door het Unity programma venster wat op te schuiven:

DragTextureToUnity-01

Klik op de afbeelding in de Project view en verander in de Inspector view het ‘Texture Type’ naar ‘Sprite (2D and UI)’ en klik daarna op ‘Apply’:

TextureToSprite-01

Sleep de afbeelding naar het lege texture vakje van het nieuwe materiaal:

NewMaterialTextureCallout

Je hebt nu een materiaal gemaakt voor de Trail Renderer en daar een plaatje aan vast gemaakt.

Klik op de Pongbal 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:

Verander de ‘Size’ van Materials naar 1 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:

Door aan het einde van de rode lijn die je ziet bij .. 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 omlaag slepen om te zorgen dat de breedte van het spoor geleidelijk aan minder wordt:

De kleuren van de Trail kun je aanpassen door 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 en transparantie regel je met de bovenste pijltjes en de ‘Alpha’ slider:

De Trail Renderer is nu klaar! Test de game en je zult zien dat er een mooi spoor achter de bal verschijnt!

PongBallTrailRenderer2

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 Project view van Unity, op dezelfde manier als je met de Trailrenderer afbeelding hebt gedaan:

—-✁—–✁—–✁—–✁—–✁—–✁—–✁—-✁—–✁—-
TennisCourt
—–✃—–✃—–✃—–✃—–✃—–✃—–✃—–✃—–✃-

Sleep de texture daarna uit de Project view naar de twee Planes en roteer de rechter plane 180 graden op de Y-as:

Om de muren en de spelers textures te geven kun je bijvoorbeeld zoeken op google images naar grass, stone of sci-Fi textures of iets dergelijks. Als je zoekt op ‘Tileable textures’ vind je textures waarvan de randen op elkaar aansluiten als je ze naast elkaar plaatst:

tileable_stone_wall_texture01_by_ftourini-d3le3to div><div class=

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:

Screen Shot 2016-09-06 at 13.13.56

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:

Screen Shot 2016-09-06 at 13.12.25

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 op de Unity tutorials pagina : https://unity3d.com/learn/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 A.I 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!

GreenArrowLeft Stap 7

Advertisements

Powered by WordPress.com.

Up ↑

%d bloggers like this: