Share
In deze zelfstudie zullen we een selectie rechthoek tekenen met de muis (zoals te zien in strategiespellen zoals StarCraft en Command and Conquer), en we zullen ook leren hoe we eenheden met de rechthoek kunnen selecteren!
Laten we eens kijken naar het eindresultaat waar we naartoe zullen werken:
Klik en sleep met je muis om een rechthoek te tekenen die elke soldaat zal selecteren die hij aanraakt.
Als u Flash gebruikt, maakt u een nieuw ActionScript 3.0-bestand met het formaat '550 x 400'. Als u echter de Flash IDE niet gebruikt en een andere gebruikt zoals FlashDevelop of Flash Builder, bevat deze zelfstudie de SWC-bestanden, zodat u MovieClips vanuit uw IDE van voorkeur kunt gebruiken. Als je nieuwsgierig bent naar hoe je MovieClips met je IDE kunt importeren, bekijk dan de Beginnershandleiding voor FlashDevelop en de Beginner's Guide to FDT!
Ik moet ook opmerken dat ik het FLA-bestand heb opgenomen voor het geval u geen van uw eigen materiaal wilt tekenen.
Ok, nu ben je misschien een beetje in de war als je nog niet echt met klassen hebt gewerkt. Als u meer wilt weten over waarom klassen belangrijk zijn bij het programmeren, bekijk dan dit artikel van kirupa of deze gids voor de documentklasse.
Maak een nieuwe 'ActionScript 3.0 Class' en geef deze de naam 'SelectionDemo'. Wanneer het bestand is gemaakt, sla het dan op als 'SelectionDemo.as'. U zou de hele tijd bestanden moeten opslaan. Ik kan dit niet genoeg benadrukken, maar het aantal keren dat ik ben vergeten werk te sparen dat ik heb gedaan en het allemaal heb verloren, is niet van belang. Dus bewaar alsjeblieft de bestanden!
Als u een IDE gebruikt die de code voor u genereert wanneer u de klasse maakt, zou u de meeste code hieronder moeten hebben. U moet echter nog steeds de regels toevoegen die ik heb gemarkeerd:
pakket import flash.display.MovieClip; public class SelectionDemo breidt MovieClip uit openbare functie SelectionDemo ()
We zijn echter nog niet klaar! Als u de Flash IDE gebruikt, navigeer dan naar het 'Properties Panel' en stel de 'DocumentClass' in op 'SelectionDemo'. Als je je afvraagt wat dat doet, betekent dit dat wanneer je toepassing / game wordt uitgevoerd door de Flash Player, deze Klasse de hoofdklasse is die de game beheert. Gaaf he?
Start het programma; als je geen fouten krijgt, zou je goed moeten zijn om te gaan!
Nu moeten we klaar zijn om de rechthoek te maken! Dit deel zal enkele functies bevatten, meer niet. Hieronder staat de code voor het tekenen van de rechthoek:
pakket // DE KLASSEN IMPORTEREN DIE WIJ NODIG hebben import flash.display.MovieClip; import flash.events.MouseEvent; import flash.geom.Rectangle; import flash.display.Sprite; public class SelectionDemo breidt MovieClip uit public var selectionRect: Rectangle; // Zal de gegevens voor onze rechthoek bevatten. openbare var-selectieSprite: Sprite = nieuwe Sprite (); // Een nieuwe Sprite maken om de rechthoek te tekenen. public function SelectionDemo () // Luisteraars toevoegen stage.addEventListener (MouseEvent.MOUSE_DOWN, SetStartPoint); openbare functie SetStartPoint (me: MouseEvent): void selectionRect = new Rectangle (stage.mouseX, stage.mouseY); // De selectie rechthoek maken.
Nu, het is een soort van nutteloos een rechthoek te hebben die we niet kunnen zien, toch? Precies, dus laten we beginnen!
Geweldig, nu moeten we de rechthoek naar het scherm tekenen met behulp van de selectionSprite variabele die u in het laatste fragment hebt gezien. Waarom een sprite gebruiken, vraag je? Alle Sprites bevatten een grafiek object, dat op zijn beurt een methode bevat genaamd drawRect () Hiermee kunnen we eenvoudig een rechthoek dynamisch tekenen in AS3.
Hieronder heb ik de code voor het tekenen van de rechthoek geplaatst, met opmerkingen:
pakket // DE KLASSEN IMPORTEREN DIE WIJ NODIG hebben import flash.display.MovieClip; import flash.events.MouseEvent; import flash.geom.Rectangle; import flash.display.Sprite; import flash.events.Event; public class SelectionDemo breidt MovieClip uit public var selectionRect: Rectangle; // Zal de gegevens voor onze rechthoek bevatten. openbare var-selectieSprite: Sprite = nieuwe Sprite (); // Een nieuwe Sprite maken om de rechthoek te tekenen. public var isMouseHeld: Boolean; // Zullen ons vertellen of de muisknop Omhoog / Omlaag is openbare functie SelectionDemo () // Initialiseren isMouseHeld = false; // De muis is nog niet vastgehouden. stage.addChild (selectionSprite); // De selectieSprite aan het podium toevoegen. stage.addEventListener (MouseEvent.MOUSE_DOWN, SetStartPoint); // Luister naar houvast voor de muis. stage.addEventListener (MouseEvent.MOUSE_UP, RemoveRectangle); // Luister naar muisvrijgave. stage.addEventListener (Event.ENTER_FRAME, UpdateGame); // Voer deze functie elk frame uit (24 FPS). openbare functie SetStartPoint (me: MouseEvent): void selectionRect = new Rectangle (stage.mouseX, stage.mouseY); // De selectie rechthoek maken. isMouseHeld = true; // De muis wordt nu vastgehouden. public function RemoveRectangle (me: MouseEvent): void isMouseHeld = false; // De muis wordt niet langer vastgehouden. public function UpdateGame (e: Event): void selectionSprite.graphics.clear (); // Wis de rechthoek zodat deze weer kan worden getekend. if (isMouseHeld) selectionRect.width = stage.mouseX - selectionRect.x; // Stel de breedte van de rechthoek in. selectionRect.height = stage.mouseY - selectionRect.y; // Stel de hoogte van de rechthoek in. selectionSprite.graphics.lineStyle (3, 0x3B5323, 0.6); // Stel de rand van de rechthoek in. selectionSprite.graphics.beginFill (0x458B00, 0.4); // Stel de vulling en transparantie van de rechthoek in. selectionSprite.graphics.drawRect (selectionRect.x, selectionRect.y, selectionRect.width, selectionRect.height); // Teken de rechthoek naar het podium! selectionSprite.graphics.endFill (); // Stop met vullen van de rechthoek.
Als u die code hebt, voert u uw toepassing uit en ziet u deze werken!
Maak in Flash een nieuwe MovieClip en teken een eenheid. Teken in het eerste frame een eenheid; Voeg in het tweede frame een groene cirkel toe onder de eenheid of iets dat de speler laat weten dat de eenheid is geselecteerd. Het zou er ongeveer zo uit moeten zien:
Ik tekende ook gewoon een snelle grasachtige achtergrond op het podium om het er leuk uit te laten zien :)
Nu hebt u de MovieClip gemaakt, klikt u met de rechtermuisknop op het symbool in uw bibliotheek en selecteert u Eigenschappen. Vink de selectievakjes 'Exporteren naar ActionScript' en 'Exporteren in frame 1' aan. Geef het dan de naam 'Eenheid'. Uw eigenschappen zouden er ongeveer zo uit moeten zien:
Opmerking: wanneer u op 'OK' klikt, krijgt u mogelijk een waarschuwing omdat er nog geen klasse "Eenheid" bestaat. Als dat zo is, klik dan op OK en we zullen dit nu oplossen door een nieuwe klas te maken!
Weet je nog voordat je de Unit MovieClip exporteerde? Dit is waar we de klasse voor die MovieClip maken. Dus maak een nieuw ActionScript-klassenbestand met de naam 'Unit.as' en plaats deze code in de klasse:
pakket import flash.display.MovieClip; public class Unit breidt MovieClip uit public var isActive: Boolean; // Laat ons weten of de eenheid is geselecteerd of niet. public function Unit () isActive = false; // Het apparaat is nog niet geselecteerd. gotoAndStop (1); // Ga naar en blijf op het eerste frame (geen selectiering).
Verderop, kameraden!
Nu is het tijd om de eenheden aan het podium toe te voegen en ze een positie te geven. We gaan ook elke eenheid in een 'array' plaatsen. Een array is in feite een lijst waarmee we via een index toegang krijgen tot de dingen erin. Een goed voorbeeld van arrays is juist bij de Republiek van de Code; ze zijn ook hier uitgelegd in AS3 101: Arrays.
Hier is de bijgewerkte code voor 'SelectionDemo.as'. Eerst voegen we een nieuwe openbare array toe genaamd unitList net na de andere variabelen:
public var selectionRect: Rectangle; // Zal de gegevens voor onze rechthoek bevatten. openbare var-selectieSprite: Sprite = nieuwe Sprite (); // Een nieuwe Sprite maken om de rechthoek te tekenen. public var isMouseHeld: Boolean; // Zal ons vertellen wanneer de muis omhoog / omlaag is public var unitList: Array; // Alle eenheden worden hier vastgehouden
Vervolgens werken we het Hoofd functie door een functie genaamd te plaatsen PlaceUnits (15);. We zullen dit in een oogwenk creëren.
openbare functie SelectionDemo () // Initialiseren isMouseHeld = false; // De muis is nog niet vastgehouden. stage.addChild (selectionSprite); // De selectieSprite aan het podium toevoegen. PlaceUnits (15); // Een functie oproepen om de eenheden op het podium te plaatsen. // Luisteraars toevoegen stage.addEventListener (MouseEvent.MOUSE_DOWN, SetStartPoint); // Luister naar houvast voor de muis. stage.addEventListener (MouseEvent.MOUSE_UP, RemoveRectangle); // Luister naar muisvrijgave. stage.addEventListener (Event.ENTER_FRAME, UpdateGame); // Voer deze functie elk frame uit (24 FPS).
Tijd om de functie te maken! Ok, we zullen deze functie na de plaatsen UpdateGame (e: Event): void functie en wat deze functie zal doen, is het aantal eenheden dat u tussen de haakjes hebt aangegeven aan het werkgebied toevoegen. We voegen ook de eenheden toe aan de lijst en geven ze willekeurige posities op het podium, terwijl ze ervoor zorgen dat ze niet van het podium kunnen afkomen.
public function PlaceUnits (amount: int): void unitList = new Array (); // Een nieuwe array maken (lijst) om alle eenheden te bevatten. for (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).
Wanneer u dit uitvoert, moet u 15 willekeurig geplaatste eenheden hebben. Tijd om door te gaan en de selectie van de eenheid te programmeren.
Wanneer je het spel uitvoert, zul je waarschijnlijk zien dat er een vreemde overlapping van de eenheden is. Laten we het oplossen! Dit is zeer eenvoudig en vereist slechts een kleine wijziging in de PlaceUnits () functie.
Kortom, wat we moeten doen is alle eenheden toevoegen aan een Array (lijst) en vervolgens de lijst sorteren op basis van de Y (verticale positie) van de eenheden. Hoe lager de Y-eigenschap, hoe verder naar achteren het zou moeten zijn. We zullen de veranderen PlaceUnits () functie om:
Accentsconagua
public function PlaceUnits (amount: int): void unitList = new Array (); // Een nieuwe array maken (lijst) om alle eenheden te bevatten. for (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. Daar hebben we het? geen overlappingen meer!
Nu zullen we in elk frame controleren of er eenheden zijn geselecteerd; als ze dan hebben zullen we hun selectie laten verschijnen.
Bewerk de UpdateGame () functioneren als volgt:
openbare functie UpdateGame (e: Event): void selectionSprite.graphics.clear (); // Wis de rechthoek zodat deze weer kan worden getekend. if (isMouseHeld) selectionRect.width = stage.mouseX - selectionRect.x; // Stel de breedte van de rechthoek in. selectionRect.height = stage.mouseY - selectionRect.y; // Stel de hoogte van de rechthoek in. selectionSprite.graphics.lineStyle (3, 0x3B5323, 0.6); // Stel de rand van de rechthoek in. selectionSprite.graphics.beginFill (0x458B00, 0.4); // Stel de vulling en transparantie van de rechthoek in. selectionSprite.graphics.drawRect (selectionRect.x, selectionRect.y, selectionRect.width, selectionRect.height); // Teken de rechthoek naar het podium! selectionSprite.graphics.endFill (); // Stop met vullen van de rechthoek. CheckForSelection (); // We zullen controleren of er eenheden zijn geselecteerd.
Zoals je kunt zien, hebben we een functie toegevoegd met de naam CheckForSelection (). Laten we die functie na de anderen maken:
openbare functie CheckForSelection (): void voor elk (var-eenheid: eenheid in unitList) // Voor elke eenheid die zich in de Eenheidsmatrix (lijst) bevindt? if (unit.hitTestObject (selectionSprite)) // Als de selectieSprite de eenheid aanraakt. unit.select (); // Maak het apparaat geselecteerd. else unit.deselect (); // Deselecteer de eenheid.
Zoals je kunt zien in de gemarkeerde lijnen, de select () en deselecteren () functies bestaan niet. Open 'Unit.as' en laat ons ze in:
pakket import flash.display.MovieClip; public class Unit breidt MovieClip uit public var isActive: Boolean; // Laat ons weten of de eenheid is geselecteerd of niet. public function Unit () isActive = false; // Het apparaat is nog niet geselecteerd. gotoAndStop (1); // Ga naar en blijf op het eerste frame (geen selectiering). public function select (): void isActive = true; // Het apparaat is geselecteerd. gotoAndStop (2); // Laat de ring zien. public function deselect (): void isActive = false; // Het apparaat is niet geselecteerd. gotoAndStop (1); // Laat de ring niet zien.
Run het spel en alles zou moeten werken!
Nu u deze tutorial met succes hebt voltooid, heb ik nu een aantal uitdagingen voor u om te volgen. Je kunt ze gerust overslaan, maar het volgen ervan helpt je te leren.
Beginner:
Intermediate:
advanced:
Doe alleen de uitdagingen waarmee je je comfortabel voelt!
Bedankt voor het lezen van deze tutorial en ik hoop dat je iets nieuws hebt geleerd. Ik wil ook Tomas Banzas bedanken voor de kunst die hij heeft gedaan!
Als je een aantal van de uitdagingen hebt voltooid en graag de resultaten wilt laten zien, plaats dan een link in de comments - ik zou ze graag zien!
