Share
I den här handledningen kommer vi att rita en urvalsrektangel med musen (som ses i strategispel som StarCraft och Command and Conquer), och vi lär oss också att välja enheter med rektangeln!
Låt oss ta en titt på det slutliga resultatet vi ska arbeta för:
Klicka och dra med musen för att rita en rektangel som väljer vilken soldat som den berör.
Om du använder Flash skapar du en ny ActionScript 3.0-fil med storleken '550 x 400'. Men om du inte använder Flash IDE och använder annan som FlashDevelop eller Flash Builder, innehåller denna handledning SWC-filerna så att du kan använda MovieClips från din IDE-inställning. Om du är nyfiken på hur du importerar MovieClips med din IDE, kolla in Beginners Guide till FlashDevelop och Beginners Guide to FDT!
Jag ska också notera att jag har tagit med FLA-filen om du inte vill skriva något eget material.
Ok, nu kan du vara lite förvirrad om du inte har arbetat med klasser tidigare. Om du vill lära dig mer om varför klasser är viktiga i programmeringen, kolla in den här artikeln av kirupa eller den här guiden till dokumentklassen.
Skapa en ny "ActionScript 3.0 Class" och ge den namnet "SelectionDemo". När filen har skapats, spara den som "SelectionDemo.as". Du ska spara filer hela tiden. Jag kan inte betona det tillräckligt, men hur mycket gånger jag har glömt att rädda arbete som jag har gjort och förlorat det hela, har det inte att tänka på. Så snälla, spara filerna!
Om du använder en IDE som genererar koden för dig när du skapar klassen, ska du ha det mesta av koden nedan. Men du måste fortfarande lägga till de rader som jag har markerat:
paket import flash.display.MovieClip; public class SelectionDemo utökar MovieClip public function SelectionDemo ()
Vi är ännu inte färdiga! Om du använder Flash IDE, navigerar du till "Properties Panel" och anger "DocumentClass" till "SelectionDemo". Om du undrar vad det betyder betyder det att när din applikation / spel körs av Flash Player, kommer den här klassen att vara huvudklassen som hanterar spelet. Häftig va?
Kör programmet; Om du inte får några fel så borde du vara bra att gå!
Nu borde vi vara redo att göra rektangeln! Den här delen kommer att innehålla några funktioner, det är allt. Nedan är koden för ritning av rektangeln:
paket // Importera de klasser vi behöver importera flash.display.MovieClip; importera flash.events.MouseEvent; importera flash.geom.Rectangle; importera flash.display.Sprite; public class SelectionDemo utökar MovieClip public var selectionRect: Rectangle; // Håller data för vår rektangel. public var selectionSprite: Sprite = new Sprite (); // Skapa en ny Sprite för att rita rektangeln. offentlig funktion SelectionDemo () // Lägga till lyssnare stage.addEventListener (MouseEvent.MOUSE_DOWN, SetStartPoint); allmän funktion SetStartPoint (mig: MouseEvent): void selectionRect = new Rectangle (stage.mouseX, stage.mouseY); // Skapa markeringsrektangel.
Nu är det typ av värdelöst att ha en rektangel som vi inte kan se, eller hur? Exakt, så låt oss börja!
Bra, nu måste vi rita rektangeln till skärmen med hjälp av selectionSprite variabel du sett i det sista stycket. Varför använda en sprite, frågar du? Alla Sprites innehåller a grafik objekt som i sin tur innehåller en metod som heter drawRect () Detta gör att vi enkelt kan rita en rektangel dynamiskt i AS3.
Nedan har jag placerat koden för att rita rektangeln med kommentarer:
paket // Importera de klasser vi behöver importera flash.display.MovieClip; importera flash.events.MouseEvent; importera flash.geom.Rectangle; importera flash.display.Sprite; importera flash.events.Event; public class SelectionDemo utökar MovieClip public var selectionRect: Rectangle; // Håller data för vår rektangel. public var selectionSprite: Sprite = new Sprite (); // Skapa en ny Sprite för att rita rektangeln. offentliga var isMouseHeld: booleska; // Kommer att berätta om musknappen är Upp / Ner offentlig funktion SelectionDemo () // Initialiserar isMouseHeld = false; // Musen hålls inte än. stage.addChild (selectionSprite); // Lägga till valetSkulle till scenen. stage.addEventListener (MouseEvent.MOUSE_DOWN, SetStartPoint); // Lyssna på musknappen. stage.addEventListener (MouseEvent.MOUSE_UP, RemoveRectangle); // Lyssna på musfrisättning. stage.addEventListener (Event.ENTER_FRAME, UpdateGame); // Kör den här funktionen varje ram (24 FPS). allmän funktion SetStartPoint (mig: MouseEvent): void selectionRect = new Rectangle (stage.mouseX, stage.mouseY); // Skapa markeringsrektangel. isMouseHeld = true; // Musen hålls nu. offentlig funktion RemoveRectangle (mig: MouseEvent): void isMouseHeld = false; // Musen hålls inte längre. offentlig funktion UpdateGame (e: Event): void selectionSprite.graphics.clear (); // Rensa rektangeln så att den är redo att dras igen. om (isMouseHeld) selectionRect.width = stage.mouseX - selectionRect.x; // Ställ in rektanglets bredd. selectionRect.height = stage.mouseY - selectionRect.y; // Ställ in rektanglens höjd. selectionSprite.graphics.lineStyle (3, 0x3B5323, 0,6); // Ställ in rektangelns kant. selectionSprite.graphics.beginFill (0x458B00, 0.4); // Ange rektangulans fyllning och genomskinlighet. selectionSprite.graphics.drawRect (selectionRect.x, selectionRect.y, selectionRect.width, selectionRect.height); // Rita rektangeln till scenen! selectionSprite.graphics.endFill (); // Sluta fylla i rektangeln.
Om du har den koden, kör din ansökan och se den fungera!
I flash skapar du en ny MovieClip och ritar en enhet. I den första ramen ritar du bara en enhet; I den andra ramen lägger du till en grön cirkel under enheten eller något som låter spelaren veta att enheten har valts. Det borde se ut så här:
Jag tog också en snabb gräsbevuxen bakgrund på scenen så att det ser bra ut :)
Nu har du skapat MovieClip, högerklicka på symbolen i ditt bibliotek och välj Egenskaper. Markera rutorna som säger "Export to ActionScript" och "Export in Frame 1". Sedan, ge det namnet "Enhet". Dina egenskaper ska se ut så här:
Obs! När du klickar på "OK" kan du få en varning eftersom ingen sådan klass "Enhet" existerar än. Om så är fallet, klicka på OK och vi ska fixa det här nu genom att skapa en ny klass!
Kom ihåg tidigare när du exporterade Unit MovieClip? Här skapar vi klassen för den MovieClip. Skapa så en ny ActionScript-klassfil med namnet "Unit.as" och placera den här koden i klassen:
paket import flash.display.MovieClip; offentlig klass Enhet utökar MovieClip public var isActive: Boolean; // Berättar om enheten är vald eller inte. offentlig funktion Enhet () isActive = false; // Enheten har inte valts än. gotoAndStop (1); // Gå till och stanna kvar på den första ramen (ingen urvalsring).
Framåt kamrater!
Nu är det dags att lägga till enheterna på scenen och ge dem en position. Vi kommer också att placera varje enhet i en "Array". En matris är i grund och botten en lista som gör det möjligt för oss att komma åt sakerna inuti det med hjälp av ett index. Ett bra exempel på arrays är rätt vid Republic of Code; De har också förklarats här i AS3 101: Arrays.
Här är den uppdaterade koden för "SelectionDemo.as". Först lägger vi till en ny offentlig kallad Array unitList strax efter de andra variablerna:
public var selectionRect: Rektangel; // Håller data för vår rektangel. public var selectionSprite: Sprite = new Sprite (); // Skapa en ny Sprite för att rita rektangeln. offentliga var isMouseHeld: booleska; // Kommer berätta för oss när musen är upp / ner public var unitList: Array; // Alla enheter kommer att hållas här
Då uppdaterar vi Huvudsaklig funktion genom att placera en funktion som heter PlaceUnits (15);. Vi kommer att skapa detta på ett ögonblick.
offentlig funktion SelectionDemo () // Initialisering isMouseHeld = false; // Musen hålls inte än. stage.addChild (selectionSprite); // Lägga till valetSkulle till scenen. PlaceUnits (15); // Ringa en funktion för att placera enheterna på scenen. // Lägga till lyssnare stage.addEventListener (MouseEvent.MOUSE_DOWN, SetStartPoint); // Lyssna på musknappen. stage.addEventListener (MouseEvent.MOUSE_UP, RemoveRectangle); // Lyssna på musfrisättning. stage.addEventListener (Event.ENTER_FRAME, UpdateGame); // Kör den här funktionen varje ram (24 FPS).
Tiden att göra funktionen! Okej, vi kommer att placera denna funktion efter UpdateGame (e: Event): void funktionen och vad den här funktionen gör är att lägga till antalet enheter du angivit i parenteserna till scenen. Vi kommer också att lägga till enheterna i listan och ge dem slumpmässiga positioner på scenen samtidigt som de ser till att de inte kan kasta bort scenen.
offentlig funktion PlaceUnits (mängd: int): void unitList = new Array (); // Skapa en ny Array (lista) för att hålla alla enheter. för (var i: int = 0; i < amount; i++ ) // Run whatever is inside the brackets 'amount' times. var unit:Unit = new Unit(); // Creating a new unit. unit.x = Math.random() * (550 - unit.width); // Setting a random X Position. unit.y = Math.random() * (400 - unit.height); // Setting a random Y Position. stage.addChild(unit); // Adding the new unit to the stage. unitList.push( unit ); // Placing the unit in the Array(list).
När du kör detta bör du ha 15 enheter slumpmässigt placerade. Tiden att gå vidare och programmera enhetsvalet.
När du kör spelet, kommer du förmodligen se att det finns en konstig överlappning av enheterna. Låt oss fixa det! Detta är extremt enkelt och behöver bara en liten förändring till PlaceUnits () fungera.
I grund och botten är vad vi behöver göra att lägga till alla enheter i en array (lista) och sortera sedan listan baserat på enhetens Y (vertikala position). Ju lägre Y-egendom, desto längre bakåt borde det vara. Vi kommer att ändra PlaceUnits () funktion till:
Accentsconagua
offentlig funktion PlaceUnits (mängd: int): void unitList = new Array (); // Skapa en ny Array (lista) för att hålla alla enheter. för (var i: int = 0; i < amount; i++ ) // Run whatever is inside the brackets 'amount' times. var unit:Unit = new Unit(); // Creating a new unit. unit.x = Math.random() * (550 - unit.width); // Setting a random X Position. unit.y = Math.random() * (400 - unit.height); // Setting a random Y Position. unitList.push( unit ); // Placing the unit in the Array(list). unitList.sortOn("y", Array.NUMERIC); // Sorting the list in order of the 'y' properties! for( var j:int = 0; j < amount; j++ ) // We will run through this loop again to add the units. stage.addChild( unitList[j] ); // This adds the 'sorted' unit to the stage. Där har vi det? inte mer överlappar varandra!
Nu kommer varje ram vi kolla om några enheter har valts; om de har då kommer vi att göra deras val ring visas.
Redigera UpdateGame () funktion till följande:
offentlig funktion UpdateGame (e: Event): void selectionSprite.graphics.clear (); // Rensa rektangeln så att den är redo att dras igen. om (isMouseHeld) selectionRect.width = stage.mouseX - selectionRect.x; // Ställ in rektanglets bredd. selectionRect.height = stage.mouseY - selectionRect.y; // Ställ in rektanglens höjd. selectionSprite.graphics.lineStyle (3, 0x3B5323, 0,6); // Ställ in rektangelns kant. selectionSprite.graphics.beginFill (0x458B00, 0.4); // Ange rektangulans fyllning och genomskinlighet. selectionSprite.graphics.drawRect (selectionRect.x, selectionRect.y, selectionRect.width, selectionRect.height); // Rita rektangeln till scenen! selectionSprite.graphics.endFill (); // Sluta fylla i rektangeln. CheckForSelection (); // Vi kontrollerar för att se om några enheter har valts.
Som ni ser kan vi lägga till en funktion som heter CheckForSelection (). Låt oss skapa den funktionen efter de andra:
offentlig funktion CheckForSelection (): void för varje (varenhet: Enhet i unitList) // För varje enhet som finns i Unit Array (lista)? if (unit.hitTestObject (selectionSprite)) // Om selectionSprite rör enheten. unit.select (); // Gör enheten vald. annat unit.deselect (); // Avmarkera enheten.
Som du kan se i de markerade linjerna, Välj() och välja bort() funktioner existerar inte. Öppna "Unit.as" och låt oss sätta in dem:
paket import flash.display.MovieClip; offentlig klass Enhet utökar MovieClip public var isActive: Boolean; // Berättar om enheten är vald eller inte. offentlig funktion Enhet () isActive = false; // Enheten har inte valts än. gotoAndStop (1); // Gå till och stanna kvar på den första ramen (ingen urvalsring). allmän funktion välj (): void isActive = true; // Enheten är vald. gotoAndStop (2); // Visa ringen. allmän funktion avmarkera (): void isActive = false; // Enheten är inte vald. gotoAndStop (1); // Visa inte ringen.
Kör spelet och alla ska arbeta!
Nu när du har avslutat denna handledning framgångsrikt har jag nu några utmaningar för dig att följa. Gärna hoppa över dem, men att följa dem hjälper dig att lära dig.
Nybörjare:
Mellanliggande:
Avancerad:
Gör bara de utmaningar du känner dig bekväm med!
Tack för att du läste denna handledning och jag hoppas du lärde dig något nytt. Jag vill också tacka Tomas Banzas för den konst han gjorde!
Om du har gjort några av utmaningarna och vill visa resultat, vänligen skicka en länk i kommentarerna - jag skulle gärna se dem!
