hitTest

_{door vinTage op 28-08-2006}

Flash hitTest tutorial. (hit test)

Vandaag wil ik jullie vertellen hoe je in flash te weten kan komen wanneer er 2 (of meer(bewegende)) objecten elkaar raken, dit is erg handig als je bijvoorbeeld een spelletje wil maken waarin kogels je raken in een schietspel, of dat je mannetje bijvoorbeeld alleen op de straat kan lopen, en niet dwars door de gebouwen heen.
Hieronder een simpel voorbeeldje van hitTest.
Zodra de cirkel de tekst raakt veranderd de alpha van de cirkel.
Je kan hier natuurlijk veel meer mee doen dan alleen de alpha laten veranderen, er zou een geluid kunnen afspelen, de kleur veranderen, een andere movieclip laten spelen etc.



Bovenstaande voorbeeldje maakt gebruik van onderstaande ActionScript


"balletje" is het (drag me) ding in mijn swf.
"obstakel" is een movieclip (vintage logo).
"info.text" is de tekst rechtsbovenin de swf die zegt dat er al dan niet collision detection is.

collision detection betekent zoveel als "kijken of er contact is" het flash action script daarvoor is dus "hitTest".

Het zou natuurlijk veel te gemakkelijk zijn als je met zo'n klein stukje AS een compleet spel zou kunnen maken, een van de problemen waar je bijvoorbeeld tegenaanloopt bij het gebruik van zo'n stukje AS, is dat je gebruik moet maken van movie clips, dat op zich is nog niet zo'n groot probleem, maar het nadeel hiervan is dat het raakvlak van een movieclip altijd in een rechthoek /vierkant zit (de boundingBox).



bounding box
Zoals je mischien merkte bij bovenstaande voorbeeld, is dat er ook hitTest is boven de letters "intage", terwijl je die eigenlijk niet raakte.
Dat is dus die boundingBox, onderstaande plaatje "verduidelijkt" dat.


Als je dus tussen die blauwe lijnen komt is er al hitTest.

Bovenstaande AS zou dus wel handig kunnen zijn om bijvoorbeeld kogels te maken in een schietspel of iets dergelijks.
Om een doolhof te kunnen maken moeten we het op een andere manier oplossen.




advanced hitTest
Hoe kunnen we er nou voor zorgen dat de randen van het logo nou wel precies word herkent zodat we die tekst wel precies raken, en niet de grote van de mc als raakvlak hebben ?

Een manier om dit op te lossen is om een mc te maken en daarin allemaal kleine movieclipjes te maken, om die later via een array uit lezen.
Een en ander zal ik proberen te verduidelijken.


Begin met het maken van een nieuwe mc, ik heb gewoon een klein bolletje genomen, maar dat kan vanalles zijn, zolang het maar klein is.
Keer terug naar de main scene, en maak weer een nieuwe mc aan.
In deze nieuwe mc maken we 2 lagen aan, op een van die lagen zetten we ons logo weer, en op de andere laag slepen we ons al eerder gemaakte bolletje.
Plaats die bolletjes langs de omtrek van ons logo door telkens dat bolletje te verslepen met de alt toets ingedrukt.
Uiteindelijk zal je ongeveer dit resultaat krijgen.

Zet nu de _alpha van alle bolletjes op 0, zo zou je uiteindelijk alleen het logo nog maar te zien krijgen, en niet die bolletjes.
Als je nu de omtrek (en evt inhoud) hebt gemaakt gaan we weer naar de main scene, en slepen die mc met het logo op het werkblad, geef die mc de instance naam "obstakel".


Tot zover het "kuch grafishe" gedeelte, nu de bijbehorende AS nog.


Uiteindelijk zal het resultaat zoiets worden.


Tot zover deze tutorial, ik hoop dat het een beetje duidelijk is hoe je nou precies collision detection kan bepalen in flash.
In mijn voorbeeldjes heb ik alleen wat met een textveldje gedaan en wat met alpha, maar je kan er natuurlijk veel meer mee, je kan andere mc's gaan afspelen, of geluidjes laten horen, of de positie van andere mc's mee veranderen, kortom, hiermee kan je al een leuk spelletje in elkaar draaien.

Download de door mij gebruikte hitTest.fla bestanden