Share
Hej vänner. Huvudpunkten i denna handledning är exakt träffdetektering av en genererad laser. Denna typ av AI är användbar för att göra actionspel, speciellt när det gäller säkerhetsunderrättelse med kameror, laserpistoler etc. Så sätt din raket på ryggen, nedräkningen startar?
Låt oss ta en titt på det slutliga resultatet vi ska arbeta för:
Öppna Flash och skapa ett nytt Flash-dokument (ActionScript 3.0).
Ange scenstorlek till vilken standardupplösning som helst. Gruvan är 500 x 350 px.
Ställ in bildhastighet till 24 bilder / sek.
Spara filen i en valfri mapp.
Låt oss nu skapa en lasergenerator.
Rita en cirkel med radie 20, d.v.s. 40 x 40. Fyll den också med en fin radiell gradientfärg.
Nu måste vi konvertera denna cirkel till en Flash-symbol så att vi kan styra den med ActionScript.
Välj cirkeln och tryck på F8 eller gå till Ändra> Konvertera till symbol. Välj filmklipp för symboltypen. Ställ även in registreringspunkten så att lasergeneratorn roterar från centrum. Typ laserGenerator_MC till exempel namnfält och senast men inte minst checka "Export for ActionScript" i "Advanced" -gruppen så att vi kan komma åt lasergenerator från vår dokumentklass som vi ska träffas snart.
När du har ställt in alla ovanstående alternativ trycker du på OK. Tryck på OK igen för dialogrutan som visar varningen för klassdefinition. Detta kommer att skapa en klassdefinition för lasergenerator vid körning.
Nu behöver vi inte laserGenerator_MC symbol på scenen eftersom den är tillgänglig i bibliotekspanelen med identifieringsnamn laserGenerator_MC. Ta bort den här symbolen från scenen. Din scen ska vara tom nu.
Nu ska vi lägga till en mun till denna generator för att skapa en känsla av en enhet. Dubbelklicka på bibliotekspanelen laserGenerator_MC symbolikonen (vänster sida av symbolnamnet) för att gå till redigeringsläget. Lägg till mun på det enligt bilden nedan.
Känn dig fri att lägga till din egen design.
Notera: Ändra inte cirkelns position eftersom vi behöver rotera den runt dess centrum.
Efter att du har lagt till en mun på generatorn, gå ur symbolredigeringsläget och återgå till huvudtidslinjen.
Din raket har lämnat marken. Lasergeneratoranordningen är klar och väntar på att utföra.
För att lägga till ett drama till vår scen behöver vi ActionScript. För att agera smart behöver vi dokumentklass.
I detta steg ska vi skapa en grundläggande struktur för vår dokumentklass.
För detaljerad förklaring om dokumentklass, kolla in denna snabba tips.
Så skapa en ny ActionScript 3.0-fil. Skriv följande kod:
paket offentlig klass Laser_HitDetection offentlig funktion Laser_HitDetection () // constructor code
Spara detta dokument klass som Laser_HitDetection.as i samma mapp där du sparade din FLA för denna handledning. Trevligt ta av. Din grundläggande dokumentklass är klar.
I din FLA-filåtkomst öppnar du Egenskaper-panelen för dokumentet och skriver namnet på klassen i dokumentklassfältet som är tillgängligt under "Publicera" -gruppen.
Nu är vi redo att kommunicera med FLA genom detta Laser_HitDetection.as dokument klass.
Vi ska skapa en instans av lasergenerator från biblioteket och placera den i mitten av scenen.
Ändra Laser_HitDetection.as dokumentklass enligt nedan (markerade linjer):
paket import flash.display.Sprite; offentlig klass Laser_HitDetection utökar Sprite var laserGun: Sprite; // Instans av laserGenerator_MC // Konstruktörens offentliga funktion Laser_HitDetection () CreateLaserGun (); // Hämta och placera lasergenerator från bibliotekets offentliga funktion CreateLaserGun (): void laserGun = new laserGenerator_MC (); // Hämta det från biblioteket addChild (laserGun); // Placera lasergenerator i mitten av scenen laserGun.x = stage.stageWidth / 2; laserGun.y = stage.stageHeight / 2;
Om du testar filmen nu ser du vår laserpistol placerad fint i mitten av scenen.
Accentsconagua
CreateLaserGun () metodI ovanstående kod använde vi Sprite klass för att skapa en förekomst av Sprite-objekt som håller laser. För det förklarar vi variabel som:
var laserGun: Sprite;
Sedan lade vi till en ny metod "CreateLaserGun ()"där vi tilldelade en instans av laserGenerator_MC från biblioteket till ovanstående laser pistol var som:
laserGun = ny laserGenerator_MC ();
Efter att ha lagt den till scenen lade vi den i mitten av scenen som:
laserGun.x = stage.stageWidth / 2; laserGun.y = stage.stageHeight / 2;
Slutligen kallade vi den här metoden från konstruktormetoden i dokumentklassen som:
// Konstruktörens offentliga funktion Laser_HitDetection () CreateLaserGun ();
Raketten accelererar med full dragkraft. Vi ska aktivera denna laserpistol mycket snart som kommer att projicera lasern. Innan det ska vi lägga till några hinder. Nu går vi.
För att experimentera med träffdetektering behöver vi några hinder placerade på scenen. Så, på scenen teckna olika former som liknar konvexa konkava ytor, sluttningsklättring och raka kanter, som visas nedan:
Nu ska vi sätta alla dessa former i en symbol. Välj alla former samtidigt och tryck på F8 eller gå till Ändra> Konvertera till symbol. Välj filmklipp som symboltyp. Namn på denna symbol obstacles_MC i namn textfält. Ange registreringspunkt i mitten. Kontrollera även "Exportera för ActionScript" så att vi kan komma åt den från vår dokumentklass.
Efter konverteringen till MovieClip har vi obstacles_MC i biblioteket med samma identifieringsnamn. Simlilary as laserGenerator_MC Vi behöver inte denna symbol på scenen, så ta bort den från scenen. Nu är ditt stadium tomt.
Sättet vi placerat vårt laserGenerator_MC vidare till scenen, i mitten, på samma sätt ska vi placera obstacles_MC symbol på scenen. Ändra dokumentklassen enligt nedan:
paket import flash.display.Sprite; offentlig klass Laser_HitDetection utökar Sprite var laserGun: Sprite; // Instans av laserGenerator_MC var hinder: Sprite; // Instans av hinder_MC // Konstruktörens offentliga funktion Laser_HitDetection () CreateLaserGun (); CreateObstacles (); // Hämta och placera lasergenerator från bibliotekets offentliga funktion CreateLaserGun (): void laserGun = new laserGenerator_MC (); // Hämta det från biblioteket addChild (laserGun); // Placera lasergenerator i mitten av scenen laserGun.x = stage.stageWidth / 2; laserGun.y = stage.stageHeight / 2; // Hämta och placera hinder från bibliotekets offentliga funktion CreateObstacles (): void obstacles = new obstacles_MC (); // Hämta det från biblioteket addChild (hinder); // Placera hinder i mitten av scenen obstacles.x = stage.stageWidth / 2; hinder.y = stadium.stageHeight / 2;
Testa filmen för att se hinder placerade runt laserpistolen.
Din raket når terminalhastighet. Nu är det dags att aktivera laserpistolen. Det måste generera lasern från det. Låt oss göra det nu.
Hur kommer vi efterlikna lasern? Någon gissning ?? Vad sägs om att använda några medlemmar i Grafik klassen som linestyle (), flytta till(), lineTo (). Om du är bekant med dessa metoder är ditt jobb enkelt. För dem som inte känner till dessa metoder är vi alltid med dig. Låt oss se dem i detalj.
Vi ska lägga till en ny metod ProjectLaser (). Låt oss ändra vår Laser_HitDetection dokumentklass enligt nedan:
// Constructorpaketet import flash.display.Sprite; offentlig klass Laser_HitDetection utökar Sprite var laserGun: Sprite; // Instans av laserGenerator_MC var hinder: Sprite; // Instans av hinder_MC var laser: Sprite; var startX: Number; // x startpunkten för laser var startY: Nummer; // y utgångspunkten för laser var endX: Number; // x slutpunkten för laser var än: Nummer; // y slutpunkten för laser // Konstruktörens offentliga funktion Laser_HitDetection () CreateLaserGun (); CreateObstacles (); ProjectLaser (); // Hämta och placera lasergenerator från bibliotekets offentliga funktion CreateLaserGun (): void laserGun = new laserGenerator_MC (); // Hämta det från biblioteket addChild (laserGun); // Placera lasergenerator i mitten av scenen laserGun.x = stage.stageWidth / 2; laserGun.y = stage.stageHeight / 2; // Hämta och placera hinder från bibliotekets offentliga funktion CreateObstacles (): void obstacles = new obstacles_MC (); // Hämta det från biblioteket addChild (hinder); // Placera hinder i mitten av scenen obstacles.x = stage.stageWidth / 2; hinder.y = stadium.stageHeight / 2; // Projekt en laser från lasergeneratorenhetens offentliga funktion ProjectLaser (): void laser = new Sprite (); addChild (laser); // Ange laserens ursprung som laserpistolens centrum startX = laserGun.x; startY = laserGun.y; // Ange slutpunkten för laserändenX = startX + 230; endy = startY; // Rita laser laser.graphics.lineStyle (1, 0xFF0000); laser.graphics.moveTo (startX, startY); laser.graphics.lineTo (endX, endY);
Testa filmen.
Raketten är precis där uppe i himlen. Laserskyddet har startat projektionen av lasern. Hur hände det? Låt oss försöka förstå ovanstående kod i nästa steg.
I ovanstående steg projicerade vi framgångsrikt en laser. Därför utförde vi följande uppgifter:
Först förklarade vi fem nya variabler:
var laser: Sprite; var startX: Number; // x startpunkten för laser var startY: Nummer; // y utgångspunkten för laser var endX: Number; // x slutpunkten för laser var än: Nummer; // y slutpunkten för laser
För det andra lade vi till en ny metod ProjectLaser ():
offentlig funktion ProjectLaser (): void laser = new Sprite (); addChild (laser); // Ange laserens ursprung som laserpistolens centrum startX = laserGun.x; startY = laserGun.y; // Ange slutpunkten för laserändenX = startX + 230; endy = startY; // Rita laser laser.graphics.lineStyle (1, 0xFF0000); laser.graphics.moveTo (startX, startY); laser.graphics.lineTo (endX, endY);
ProjectLaser () MetodI ovanstående metod skapade vi först ett tomt Sprite-objekt för att hålla lasern och lade den till scenen enligt nedan:
laser = ny Sprite (); addChild (laser);
Eftersom vi ville att lasern skulle börja projicera från laserpistolen, tilldelar vi laserpistolens X-värde till startx och Y värde till startY enligt nedanstående:
startX = laserGun.x; startY = laserGun.y;
(Senare gav vi dessa värden till moveTo (startX, startY) metod som vi kommer att träffas snart.)
Då definierade vi endX och Endy:
endX = startX + 230; endy = startY;
Värden som tilldelas ovanstående variabler är temporära värden. Vi använde dem bara för att visa den grundläggande projektionen av en laser. I kommande steg ska vi modifiera dessa värden genom att tillämpa enkel matematik. Dessa värden är nyckeln till att göra perfekt träffdetektering av lasern. Vi ska studera dem senare i denna session.
Och nu den viktiga delen av denna metod. Ritning av en rak linje inom laserspritobjektet för att efterlikna den projicerade lasern.
Först hanterade vi stilen på linjen som ska ritas enligt nedan:
laser.graphics.lineStyle (1, 0xFF0000);
Denna lineStyle () -metod används för att styra stylingen av strecket i ritningsobjektet, såsom linje, rektangel, oval etc. Du kan ge maximalt åtta argument till den här metoden. Om inte specificerat anges standardvärden istället. För vårt exempel behöver vi bara två argument. Det första argumentet är linjets tjocklek (dvs 1) och det andra argumentet är färgen på linjen (dvs.. 0xFF0000, vilket är rött).
För en detaljerad förklaring av denna metod, kolla in Adobe Help doc på "lineStyle (args?)" -Metoden.
Sedan lade vi utgångspunkten för linjen enligt nedan:
laser.graphics.moveTo (startX, startY);
startx och startY säkerställer att utgångspunkten måste vara centrum för laserpistolen.
Därefter finsihed vi upp linjen:
laser.graphics.lineTo (endX, endY);
Kom ihåg att dessa endX och endy är tillfälliga värden bara för att visa projektionen. Vi behöver dem att få justeras om något hinder kommer i vägen för laser. Vi ska göra den matematiken i kommande steg.
Så vi ritade en rad från (startx, startY) till (endX, Endy).
Raketten går och går. Se dessa landskap, vattendrag?
Nu är det dags för den verkliga åtgärden. Hit upptäckt med hinder.
Nu är vi utrustade med en laserpistol. Vi har också flera hinder. Vi är på den nivå där vi kan lägga till träffdetektering som säkert kommer att lägga till meningen med scenen.
Du kanske tror att denna mycket noggranna träffdetektering kräver komplicerad matte. Om så är fallet är du fel. Den använder helt enkelt den inbyggda metoden för ActionScript i hitTestPoint () tillsammans med en för slinga. Den komplexa matematiken bakom perfekt träffdetektering hanteras med denna metod. Du behöver bara använda denna metod och a för loop på ett smart sätt.
Vi kommer att göra några viktiga förändringar i vår dokumentklass huvudsakligen till ProjectLaser () metod och lite ny vars, så observera och tillämpa den noggrant. Låt oss ändra det enligt följande:
Lägg först till dessa nya vars:
var rad: Number = Math.PI / 180; // Används för att beräkna vinkel i radianer var maxDist: Number = 250; // Maximal avstånd som ska reste av lasern var justeradDist: Nummer; // nytt maximalt avstånd om något hinder kommer på ett sätt
Ändra sedan ProjectLaser () metod genom att lägga till för loop som visas nedan (notera också det nu endX och Endy är inuti för slinga):
// Projekt en laser från lasergeneratorenhetens offentliga funktion ProjectLaser (): void laser = new Sprite (); addChild (laser); // Ange laserens ursprung som laserpistolens centrum startX = laserGun.x; startY = laserGun.y; för (adjustedDist = 0; adjustedDist < maxDist; adjustedDist ++) //Trigonometry to aim the laser w.r.t laser gun's rotation endX = laserGun.x + Math.cos ( laserGun.rotation * rad ) * adjustedDist; endY = laserGun.y + Math.sin ( laserGun.rotation * rad ) * adjustedDist; //calculate hit test if ( obstacles.hitTestPoint ( endX, endY, true ) ) break; //Draw laser laser.graphics.lineStyle( 1, 0 x FF0000 ); laser.graphics.moveTo( startX, startY ); laser.graphics.lineTo ( endX, endY );
Testa filmen.
Bom? Jag är säker. Titta på denna effekt är du inspirerad till att skapa en Flash-spel som har säkerhetsintelligens. Perfekt AI, för att utveckla intressant spel i Flash.
Först och främst lade vi till ny vars till vår dokumentklass enligt följande:
Ursprungligen en vinkel, i radianer
var rad: Number = Math.PI / 180; // Används för att beräkna vinkel i radianer
Ovanstående var används i formel för att beräkna en vinkel i radianer.
Formeln är, radianer = grader * Math.PI / 180. Mer info här. Vi använde denna formel i vår kod, enligt följande:
endX = laserGun.x + Math.cos (laserGun.rotation * rad) * adjustedDist; endY = laserGun.y + Math.sin (laserGun.rotation * rad) * adjustedDist;
I laserGun.rotation * rad, grader = laserGun.rotation, och rad = Math.PI / 180.
För det andra skapade vi en var för det maximala avstånd som ska reste av lasern:
var maxDist: Nummer = 250; // maximalt avstånd som ska räckas av lasern
Detta bestämmer det maximala avstånd som ska räckas av lasern. Eftersom det inte är nödvändigt att dra laser utanför synligt område definierar vi en fin slutpunkt. Detta var kommer att göra vad som behövs.
För det tredje har vi ett var för laserens nuvarande avstånd vid korsning med något hinder.
var justeradDist: Nummer; // nytt maximalt avstånd om något hinder kommer på ett sätt
När något hinder kommer i vägen för laser, är lasern blockerad snarare än att åka till maximal avstånd.
Avståndet efter att ha blivit en laser är inget annat än det justerade avståndet beroende på situationen.
De för loop och hitTestPoint () varje spelar en viktig roll vid beräkningen av detta avstånd.
Fjärde, vi modifierade ProjectLaser () metod genom att lägga till ActionScript hitTestPoint () tillsammans med a för slinga. Vi tilldelade oss endX och Endy variabler.
för (adjustedDist = 0; adjustedDist < maxDist; adjustedDist ++) //Trigonometry to aim the laser w.r.t laser gun's rotation endX = laserGun.x + Math.cos ( laserGun.rotation * rad ) * adjustedDist; endY = laserGun.y + Math.sin ( laserGun.rotation * rad ) * adjustedDist; //calculate hit test if ( obstacles.hitTestPoint ( endX, endY, true ) ) break;
Slingan säkerställer att det justerade avståndet ökas upp till maximal avstånd. Du kanske tänker "Vad är det roligt att göra anpassat avstånd lika med maximalt avstånd?"
Egentligen tillåter detta justerade avstånd att matcha det maximala avståndet naturligt men så snart det träffar några hinder (vilket detekteras av hitTestPoint () metod) är detta avstånd markerat som maximal avstånd för den aktuella situationen. Tack vare hitTestPoint () för att göra uppgiften så enkel.
Vi har också omfördelats endX och Endy värden som:
endX = laserGun.x + Math.cos (laserGun.rotation * rad) * adjustedDist; endY = laserGun.y + Math.sin (laserGun.rotation * rad) * adjustedDist;
Trigonometriet fungerar Math.cos () och Math.sin () används för att beräkna vinkeln på laser w.r.t laserpistolrotation.
I enkel form, det tar hand om att rikta laser där laserpistolen ser ut. Det är viktigt att laserpistol och laser båda synkroniseras. Så snart laserpistolen är roterad kommer lasern att följa rotationen.
För mer information om trigonometri, läs denna Snabba Tips.
Slutligen scenens klimax:
om (obstacles.hitTestPoint (endX, endy, true)) break;
hitTestPoint () Metoden tar tre parametrar, varav den första och andra parametern är nödvändiga och den tredje (shapeflag) kommer att lämnas som standard (dvs.. falsk) om det inte anges.
I vårt exempel, shapeflag är satt till Sann eftersom vi vill träffa detektering med hänsyn till den exakta formen av målobjektet (dvs.. hinder). Om detta värde är inställt på falsk träffdetektering sker med hänsyn till det objektets avgränsningslåda och inte den exakta formen.
De första och andra parametrarna för hitTestPoint () definiera en punkt (x, y) vid vilken du ska kontrollera skärningspunkten med visningsobjektet. I vårat fall hinder är det visningsobjektet och endX och Endy representerar skärningspunkten på scenen.
Oklar? Höger. För att förenkla ska vi lägga logiken i följd enligt följande:
för slingan gör det möjligt för laserprojektionen att fortsätta (genom att uppdatera endX och Endy) om inom maximalt avstånd.hitTestPoint () väntar på att bryta för slingan så snart den ser korsningen. När för slingan är trasig, endX och Endy är frysta.endX och Endy skickas till Graphics.lineTo () metod.För att lägga till rotation till laserpistol måste vi utföra några större förändringar:
ProjectLaser () metod.HitTest ().laser.graphics.clear () i för slinga.importera flash.events.Event Först ska vi omstrukturera ProjectLaser () metod genom att flytta hela träffdetekteringslogiken i ny metod HitTest ().
Då ska vi lägga till laser.graphics.clear () uttalande innan laser.graphics.lineStyle (1, 0xFF0000) uttalande inuti för loop av ny metod HitTest (). Detta kommer att ta bort laserens gamla projektion från scenen när laserpistolen börjar rotera.
Låt oss se hur det kommer att se efter att ha gjort alla fyra stora förändringarna:
offentlig funktion ProjectLaser (): void laser = new Sprite (); addChild (laser); // Ange laserens ursprung som laserpistolens centrum startX = laserGun.x; startY = laserGun.y; // Hit-test, offentlig funktion HitTest (): void for (adjustedDist = 0; adjustedDist < maxDist; adjustedDist ++) //Trigonometry to aim the laser w.r.t laser gun's rotation endX = laserGun.x + Math.cos(laserGun.rotation * rad) * adjustedDist; endY = laserGun.y + Math.sin(laserGun.rotation * rad) * adjustedDist; //calculate hit test if (obstacles.hitTestPoint(endX,endY,true)) break; //Draw laser laser.graphics.clear(); //Removes the old laser projection laser.graphics.lineStyle( 1, 0xFF0000 ); laser.graphics.moveTo( startX, startY ); laser.graphics.lineTo ( endX, endY );
Du kanske frågar varför vi gjorde sådana stora förändringar? Den enda anledningen är ENTER_FRAME händelse.
För att tillämpa kontinuerlig rotation ska vi lägga till en ny metod, LaserGunRotation (evt: Event) som aktiveras av ENTER_FRAME händelse (vilket betyder att den körs 24 gånger i sekundet, eftersom vår bildhastighet är 24 bilder / s). När den här händelsen används måste du vara försiktig med att bara lägga till sådana egenskaper som vi vill ändra över tiden. Undvik att sätta in de värden som förblir konstanta under genomförandet.
I vårt fall, om du observerar gammal ProjectLaser () metod har den:
laser = ny Sprite (); addChild (laser); // Rotera laserpistol
Tänk om du lägger till ovanstående uttalanden i en metod som använder ENTER_FRAME händelse; då skulle ett nytt Laser Sprite-objekt skapas och läggas till steg flera gånger - 24 gånger per sekund.
Detta är absolut onödigt. Därför omstrukturerades vi ProjectLaser () metod och tillsatt ny metod HitTest (). Du kan byta namn ProjectLaser () metod till InitializeLaser () eftersom det inte längre projekterar lasern. Nu skapar den bara den tomma hållaren för lasern och definierar utgångspunkten. Projektionen hanteras i en ny metod, HitTest ().
Låt oss nu se den nya metoden LaserGunRotation (evt: Event). Innan det lägger du till följande importdeklaration i början av dokumentklassen:
importera flash.events.Event;
Och lägg till följande metod:
// Rotera laserpistolens offentliga funktion LaserGunRotation (evt: Event): void laserGun.rotation + = 0.5; HitTest ();
Glöm inte att ringa den här metoden med en ENTER_FRAME händelse inom konstruktörfunktionen som visas nedan:
// Konstruktörens offentliga funktion Laser_HitDetection () CreateLaserGun (); CreateObstacles (); ProjectLaser (); addEventListener (Event.ENTER_FRAME, LaserGunRotation);
Detta ställer upp det för att köra LaserGunRotation () funktion 24 gånger i sekund.
Testa filmen.
Raketten har redan trängt in i molnen. Se den vackra jorden.
I det här steget ska vi lägga till en kontroll för att justera noggrannheten för träffdetektering. Detta är viktigt eftersom du inte behöver den exakta träffdetektering varje gång; du kanske behöver en genomsnittlig nivå av träffdetektering. Detta kommer också att bidra till att minska CPU-konsumtionen vid tidpunktsdetektering.
Vi ska introducera en ny variabel tolerans som:
var tolerans: Antal = 1;
Då ska vi modifiera för slingans inkrement uttalande som:
för (adjustedDist = 0; adjustedDist < maxDist; adjustedDist += tolerance)
Nu ser förbandet ut:
för (adjustedDist = 0; adjustedDist < maxDist; adjustedDist += tolerance) //Trigonometry to aim the laser w.r.t laser gun's rotation endX = laserGun.x + Math.cos(laserGun.rotation * rad) * adjustedDist; endY = laserGun.y + Math.sin(laserGun.rotation * rad) * adjustedDist; //calculate hit test if (obstacles.hitTestPoint(endX,endY,true)) break;
Det innebär att vi istället för att kolla efter en kollision vid varje pixel av laserlinjen kontrollerar en kollision vid varje annan pixel eller var tredje pixel etc.
Att sänka värdet för "tolerans" ökar noggrannheten i träffdetektering men kräver mer CPU-effekt. Försök experimentera med olika värden för "tolerans".
Vänner, det är dags att lämna raketen och öppna fallskärmen. Markera säkert på marken och börja använda ovanstående teknik i dina Flash-spel och applikationer. Njut av!
I denna handledning såg vi främst det perfekta utnyttjandet av hitTestPoint () och a för loop för att skapa exakt träffdetektering utan att använda någon komplex matte.
Denna effekt kan användas i ett säkerhetstypspel där kameror och laserpistoler krävs.
