hitTest

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, en krijgt de tekst een andere kleur.
Je kan hier natuurlijk veel meer mee doen dan alleen kleuren veranderen, maar ik heb even gekozen voor kleurtjes gewoon ter illustratie van hitTest, maar acties zoals bijvoorbeeld een geluidje afspelen, of positie veranderen zijn natuurlijk ook geen probleem.

klik op "go" en zie wat hitTest zo ongeveer doet.

Bovenstaande voorbeeldje maakt gebruik van het meest simpele stukje AS wat je maar kan bedenken namelijk

onClipEvent (enterFrame) {
        if (_root.sima.hitTest(_root.cirkel)) {
                _root.cirkel._alpha = 50;
                _root.tekst = "raak";
        } else {
                _root.cirkel._alpha = 100;
                _root.tekst = "mis";
        }
}

_root.cirkel is het bewegende balletje in mijn swf.
_root.sima is een movieclip (sitemasters tekst).
_root.tekst is de tekst onderin 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".
Ik heb bovenstaande AS in de "sima mc" gezet, omdat de cirkel mc al veel AS bevatte om te bewegen.
Maar het kan dus ook in die cirkel mc.

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, als je dus bijvoorbeeld een halve maan zou willen tekenen dan is het raakvlak, de grote van die movieclip, en niet de preciese afmeting die je maantje heeft, inclusief alle curves etc.
Zie mn voorbeeldje hieronder om e.e.a te verduidelijken.

De rechthoek waarin de halve maan staat, hoort niet bij de maan mc, maar staat gewoon op de main scene ter verduidelijking van het raakvlak.
Op deze manier word het dus onmogelijk om een doolhof of iets dergelijks te maken, want zodra men op het "doolhofMc" komen zou er al collision detection zijn.

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.

Hoe kunnen we er nou voor zorgen dat de randen van het maantje nou wel precies word herkent zodat we die maan 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. (dit had ik ongeveer ).
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 maantje weer, en op de andere laag slepen we ons al eerder gemaakte bolletje.
Plaats die bolletjes langs de omtrek van ons maantje 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 maantje 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 maantje op het werkblad, geef die mc de instance naam "obstakels".

Tot zover het "kuch grafishe" gedeelte, nu de bijbehorende AS nog.
Selecteer de obstakels mc, en plaats onderstaande AS.

onClipEvent (enterFrame) {
        contact = false;
        for (i in _root.obstakels) {
                plek = new Object();
                plek.x = _root.obstakels[i]._x;
                plek.y = _root.obstakels[i]._y;
                _root.obstakels.localToGlobal(plek);
                if (_root.cirkel.hitTest(plek.x, plek.y, true)) {
                        contact = true;
                }
        }
        if (contact) {
                this._alpha = 50;
                _root.tekst = "raak";
        } else {
                this._alpha = 100;
                _root.tekst= "mis";
        }
}

Met de for bepalen we dat alle mc's in obstakels, een _x en _y mee krijgen (_x en _y zijn coordinaten in flash).
Die coordinaten worden door de localToGlobal(); omgezet naar _x en _y coordinaten op de main scene (ipv in de obstakels mc).
Even verderop zeggen we dat als de cirkel, colission detection (hitTest) heeft met een van die coordinaten, er een boolean waarde op true word gezet (de "contact")
Die boolean waarde word automatish weer op false gezet doordat we met onEnterFrame werken.
Zodra die contact op true staat, zet onze swf de _alpha op 50, en het tekstvak op "raak".

Uiteindelijk zal het resultaat zoiets worden.

Ik heb de bolletjes niet op _alpha 0 gezet, en ook dat "denkbeeldige" vierkant erbij gelaten, gewoon ter verduidelijking.

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.
Bij eventuele vraagtekens, kan je natuurlijk bij de notas tercht, of op het forum.
Download hier de door mij gebruikte fla's

Mocht deze tutorial nog niet helemaal voldoen aan je verwachting, bezoek dan mijn website voor een eventuele geupdate tutorial. mvg vinTage