Get the Flash Player to see this player.

Nou we zijn bij het laatste deel van onze reis richting een eye toy game aangekomen. Het is altijd jammer dat er meer te vertellen valt over wat je met dergelijke technieken zou kunnen maar ik heb helaas alleen tijd om dit gedeelte nog uit te leggen. Daarnaast moet ik snel verder met andere dingen voordat deze hele blog een grote vvvv tutorial wordt.

Zoals bij de vorige is het slim om alle vorige tutorial te hebben gevolgd en het bestand dat je overhoudt na het volgen van tutorial 3 opgeslagen te hebben zodat je ermee verder kunt. Verder is deze tutorial iets meer flash gericht dus is het handig als je een versie van flash op je computer hebt staan. Mocht je dit niet hebben dan geen probleem, het benodigde bestand biedt ik aan tijdens de tutorial.

Ontwerp voor pong
Het eerste wat we gaan doen is kijken naar wat er nodig is om pong te ontwerpen. Misschien is dit niet heel nuttig voor de tutorial maar het is over het algemeen hoe je iets aanpak als je spellen programmeert en daarom nuttig om eens naar te kijken.

Het eerste dat we weten van pong is dat het bestaat uit een balletje dat uit zichzelf stuitert en twee balken de naar boven en naar beneden verplaatst kunnen worden door 2 verschillende spelers. Om de headtracking om te zetten naar een besturing van de balken moeten we 2 hoofden kunnen volgen en hier de Y positie van kunnen doorgeven.

Nu gaan we er even van uit dat speler 1 altijd links staat en speler 2 altijd rechts. Op deze manier kunnen we namelijk in flash aangeven dat het meeste linker hoofd speler 1 is en het meest rechter speler 2.

VVVV bestand uit tutorial 3 omzetten naar pong ontwerp.

Nu we weten wat we willen gaan we het bestand uit de derde tutorial ombouwen. We kunnen de basis laten staan en met een aantal andere verbindingen en variabelen precies bereiken wat we willen. Het eerste wat we weg kunnen gooien zijn de 2 IOboxen die zijn verbonden aan de breedte en de hoogte van het hoofd. We willen namelijk vervangen door de X en Y positie van het tweede hoofd.

Vervolgens kunnen we de setSlice nodes nog prima te gebruiken maar moeten we ze een ander getal meegeven. Dit doen we door twee nieuwe nodes genaamd getSlice(spreads) aan te maken en deze te verbinden met de IOboxen voor de X en Y positie van het hoofd. Bij de getSlice node kunnen we kiezen welk getal uit de spread we willen hebben. de IObox met de X positie geeft voor elk hoofd dat hij tracked een nieuw getal aan. Dit betekend dat de x positie van hoofd nummer 1 op positie 0 wordt neergezet en die van het tweede hoofd op nummer twee.

Verbind nu de IOboxen met de getSlice zo als op het geanimeerde gifje en zorg dat je de rechter input node Index op 1 heb staan.

Nu dat we de correcte getallen doorgeven aan de juiste plek, moeten we de variabelen die in flash verandert worden even aanpassen. Dus in plaats van headX, headY, headWidth en headHeight maken we er nu van head1X, head1Y, head2X, head2Y.

Flash pong maken
Nou gaan we aan de slag met het aller allerlaatste stukje. Als je geen flash heb kun je dit stuk overslaan en dit bestandje (rechtermuis knop, save link as..) downloaden.

Het eerste wat we in flash moeten doen is het speelveld aanmaken. Maak een balkje en maak er een movieclip van (f8). geef deze vervolgens de instance naam balk1, mocht je dit allemaal niet weten kijk naar het gif’je. Kopieer dit balkje zet het aan de andere kant en geef het als instance naam balk2.

Plaats nu een balletje en geef deze als instance naam bal mee. Als laatste plaats nu twee dynamische tekstveld en laat ze variabel score 1 en score 2 volgen.

Actionscript

Dit vind ik persoonlijk het meest moeilijke gedeelte om uit te leggen in een kort stukje tekst. Ik leg het uit door steeds een stukje code erbij te halen en uit te leggen wat het doet. Hier gaan we:

var head1X:Number = new Number(0);
var head1Y:Number = new Number(0);
var head2X:Number = new Number(0);
var head2Y:Number = new Number(0);

Deze variabelen zorgen ervoor dat de variabelen uit VVVV worden uitgelezen en geimporteerd in flash.

var xSpeed:Number = new Number(15);
var ySpeed:Number = new Number(15);

Deze variabelen bepalen de snelheid van de bal zowel op de X as als op de Y as.

var score1:Number = new Number(0);
var score2:Number = new Number(0);

Deze variabelen houden de score bij van speler 1 en speler 2.

this.onEnterFrame = function(){
if(head1X <= head2X){
balk1._y = (head1Y*-1000)+200;
balk2._y = (head2Y*-1000)+200;
}
else
{
balk1._y = (head2Y*-1000)+200;
balk2._y = (head1Y*-1000)+200;
}

Dit stukje frame zorgt ervoor dat elke keer dat flash een frame start (12x per seconde) er gekeken wordt of hoofd 1 links staat of hoofd 2. Vervolgens wordt de Y positie van het meest linkse hoofd gekoppeld aan de y positie van balk 1. Het meeste rechter hoofd wordt gekoppeld aan balk 2. de *-1000)+200 is nodig om de y positie notatie van vvvv (die loopt van -0.3 naar +0.3) om te zetten naar die van flash (van 0 tot 400). Deze omrekening is niet heel wiskundig vast gesteld maar meer uit het hoofd, dus misschien kan het preciezer.

bal._x += xSpeed;
bal._y += ySpeed;

if(bal.hitTest(balk1) || bal.hitTest(balk2)){
xSpeed = (xSpeed*-1);
}

if(bal._x <= 0){
score2++;
bal._x = 275;
bal._y = 200;}
else if(bal._x>=550){
score1++;
bal._x = 275;
bal._y = 200;}
else if(bal._y <=0 || bal._y >= 380)
{ySpeed = (ySpeed*-1);}
}

Dit gedeelte bestuurt de bal, elke frame verandert de positie van de bal aan de hand van de xSpeed en ySpeed. Vervoglens kijkt de bal of hij niet een balk heeft geraakte zodat de X snelheid van het balletje omgekeerd moet worden. Daarna kijk het balletje of het balletje de linker helft of rechter helft heeft bereikt en dus terug moet gezet worden naar het midden en een speler met punten moet belonen.

Als laatste kijkt het of het de bovenkant of onderkant raak van het scherm en dus de Y snelheid moet omkeren om de andere kant op te stuiteren.

En dat was het! als je vragen heb kun je ze altijd stellen en als je opmerking heeft mag dat ook. Ook als je zelf aan de slag bent gegaan en veel stoerdere dingen heb gemaakt mag je die ook laten zien en ik zal er voor zorgen dat het op de site komt. Succes!