We zijn bijna klaar met de multitouch tafel en zijn nu hard bezig om alles begrijpelijk te maken voor mensen die niet al bijna een jaar met dit project bezig zijn . In principe zijn de flash klassen die Thomas van den Berg geschreven heeft erg begrijpelijk doordat ze qua werking sterk overeenkomen met mouse events in flash. Nog eventjes dus en iedereen met te veel vrije tijd en een beetje flash kennis kan een multitouch applicatie schrijven!

Lang lang geleden zou ik een website voor iemand bouwen en vond ik dat de onderkant van website altijd vergeten leegtes waren met alleen een copyright notice.

Deze korte animatie is gemaakt in Swift3D, wat een luchtig, makkelijk te leren 3d pakket dat speciaal is gemaakt om te exporteren naar Flash. Toen deze animatie werd gemaakt kon je alleen nog maar de render naar flash exporteren maar tegenwoordig met papervision zou je echt het hele model kunnen exporteren.

Nu dat ik toegelaten ben bij de V-Academy (joepie!). Kan ik mijn portfolio boekje laten zien!
Helaas heb ik op dit moment zelf geen exemplaar meer om een foto van te maken maar het digitale bestand ziet er exact hetzelfde uit.

Het boekje heb ik laten drukken bij lulu.com waar je voor niet veel geld onder andere boeken kan laten drukken waarbij je veel opties hebt. De levering ging voorspoedig en de kwaliteit is zeer behoorlijk, dus lulu kan ik iedereen van harte aanbevelen.

Blader de digitale versie eens door en mocht en een echte versie willen zien/ hebben laat dan een berichtje achter of stuur me een mailtje.

In dit flash bestandje kun je zelf de waardes aanpassen door er op te klikken om zo de particles te manipuleren.

Iedereen is gek op particles omdat het onmogelijk leuke creaties oplevert. Computerarts heeft een tijdje geleden een uitgebreide tutorial geschreven over hoe je je eigen particle engine kan schrijven in flash en geeft ontzettend veel leuke voorbeelden. Het bovenstaande bestand is dan ook hier uit overgenomen met als extra’tje dat iedereen zelf de waardes kan aanpassen.

Daarnaast is de tutorial ook een mooie inleiding op ActionScript 3 en leert het mensen over Object georienteerd programmeren, dus al met al zeker de moeite waard de tutorial hier te volgen.

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!