Share
In diesem Lernprogramm zeichnen Sie mit der Maus ein Auswahlrechteck (wie in Strategiespielen wie StarCraft und Command and Conquer zu sehen). Außerdem erfahren Sie, wie Sie Einheiten mit dem Rechteck auswählen!
Werfen wir einen Blick auf das Endergebnis, auf das wir hinarbeiten:
Klicken Sie und ziehen Sie mit der Maus, um ein Rechteck zu zeichnen, das jeden Soldaten auswählt, den es berührt.
Wenn Sie Flash verwenden, erstellen Sie eine neue ActionScript 3.0-Datei mit der Größe '550 x 400'. Wenn Sie jedoch nicht die Flash-IDE verwenden und eine andere wie FlashDevelop oder Flash Builder verwenden, enthält dieses Lernprogramm die SWC-Dateien, sodass Sie MovieClips innerhalb der von Ihnen bevorzugten IDE verwenden können. Wenn Sie wissen möchten, wie Sie MovieClips mit Ihrer IDE importieren können, lesen Sie das Beginner's Guide zu FlashDevelop und das Beginner's Guide zu FDT!
Ich sollte auch beachten, dass ich die FLA-Datei beigefügt habe, falls Sie kein eigenes Material zeichnen möchten.
Ok, jetzt sind Sie vielleicht etwas verwirrt, wenn Sie vorher nicht wirklich mit Unterricht gearbeitet haben. Wenn Sie mehr darüber erfahren möchten, warum Klassen beim Programmieren so wichtig sind, lesen Sie diesen Artikel von kirupa oder diesen Leitfaden zur Dokumentenklasse.
Erstellen Sie eine neue "ActionScript 3.0-Klasse" und geben Sie ihr den Namen "SelectionDemo". Wenn die Datei erstellt wurde, speichern Sie sie als 'SelectionDemo.as'. Sie sollten die ganze Zeit Dateien speichern. Ich kann das nicht genug betonen, aber die Anzahl der Zeiten, in denen ich vergessen habe, die Arbeit zu retten, die ich geleistet habe und alles verloren habe, hat keinen Grund, darüber nachzudenken. Speichern Sie also bitte die Dateien!
Wenn Sie eine IDE verwenden, die den Code für Sie erstellt, wenn Sie die Klasse erstellen, sollten Sie den Großteil des folgenden Codes verwenden. Sie müssen jedoch die markierten Zeilen hinzufügen:
package import flash.display.MovieClip; public class SelectionDemo erweitert MovieClip öffentliche Funktion SelectionDemo ()
Wir sind aber noch nicht fertig! Wenn Sie die Flash-IDE verwenden, navigieren Sie zum 'Eigenschaftenfenster' und setzen Sie die 'DocumentClass' auf 'SelectionDemo'. Wenn Sie sich fragen, was dies bedeutet, bedeutet dies, dass diese Klasse die Hauptklasse ist, die das Spiel verwaltet, wenn Ihre Anwendung / Ihr Spiel vom Flash Player ausgeführt wird. Cool was?
Führen Sie das Programm aus. Wenn Sie keine Fehler erhalten, sollten Sie gut sein!
Jetzt sollten wir bereit sein, das Rechteck zu machen! Dieser Teil enthält einige Funktionen, das ist alles. Unten ist der Code zum Zeichnen des Rechtecks:
package // IMPORTIEREN DER KLASSEN, DIE WIR BENÖTIGEN importieren flash.display.MovieClip; import flash.events.MouseEvent; import flash.geom.Rectangle; import flash.display.Sprite; public class SelectionDemo erweitert MovieClip public var selectionRect: Rectangle; // Die Daten für unser Rechteck werden gespeichert. public var selectionSprite: Sprite = new Sprite (); // Ein neues Sprite erstellen, um das Rechteck zu zeichnen. public function SelectionDemo () // Listener hinzufügen stage.addEventListener (MouseEvent.MOUSE_DOWN, SetStartPoint); public function SetStartPoint (me: MouseEvent): void selectionRect = new Rectangle (stage.mouseX, stage.mouseY); // Das Auswahlrechteck erstellen.
Nun, es ist nutzlos, ein Rechteck zu haben, das wir nicht sehen können, richtig? Genau, also lasst uns anfangen!
Toll, jetzt müssen wir das Rechteck mit dem auf den Bildschirm zeichnen selectionSprite Variable, die Sie im letzten Snippet gesehen haben. Warum ein Sprite verwenden, fragen Sie? Alle Sprites enthalten ein Grafik object, das wiederum eine aufgerufene Methode enthält drawRect () Auf diese Weise können Sie ein Rechteck in AS3 dynamisch dynamisch zeichnen.
Unten habe ich den Code zum Zeichnen des Rechtecks mit Kommentaren platziert:
package // IMPORTIEREN DER KLASSEN, DIE WIR BENÖTIGEN importieren flash.display.MovieClip; import flash.events.MouseEvent; import flash.geom.Rectangle; import flash.display.Sprite; import flash.events.Event; public class SelectionDemo erweitert MovieClip public var selectionRect: Rectangle; // Die Daten für unser Rechteck werden gespeichert. public var selectionSprite: Sprite = new Sprite (); // Ein neues Sprite erstellen, um das Rechteck zu zeichnen. public var isMouseHeld: Boolean; // Will uns sagen, ob die Maustaste Auf / Ab ist. Public function SelectionDemo () // Initialisierung isMouseHeld = false; // Die Maus ist noch nicht gehalten. stage.addChild (selectionSprite); // Hinzufügen der selectionSprite zur Bühne. stage.addEventListener (MouseEvent.MOUSE_DOWN, SetStartPoint); // Hör auf die Maus. stage.addEventListener (MouseEvent.MOUSE_UP, RemoveRectangle); // Hör auf die Mausfreigabe. stage.addEventListener (Event.ENTER_FRAME, UpdateGame); // Führen Sie diese Funktion jedes Bild aus (24 FPS). public function SetStartPoint (me: MouseEvent): void selectionRect = new Rectangle (stage.mouseX, stage.mouseY); // Das Auswahlrechteck erstellen. isMouseHeld = true; // Die Maus wird jetzt gehalten. public function RemoveRectangle (me: MouseEvent): void isMouseHeld = false; // Die Maus wird nicht mehr gehalten. public function UpdateGame (e: Event): void selectionSprite.graphics.clear (); // Das Rechteck löschen, damit es wieder gezeichnet werden kann. if (isMouseHeld) selectionRect.width = stage.mouseX - selectionRect.x; // Legt die Breite des Rechtecks fest. selectionRect.height = stage.mouseY - selectionRect.y; // Legt die Höhe des Rechtecks fest. selectionSprite.graphics.lineStyle (3, 0x3B5323, 0,6); // Setzt den Rand des Rechtecks. selectionSprite.graphics.beginFill (0x458B00, 0.4); // Legen Sie die Füllung und Transparenz des Rechtecks fest. selectionSprite.graphics.drawRect (selectionRect.x, selectionRect.y, selectionRect.width, selectionRect.height); // Zeichne das Rechteck auf die Bühne! selectionSprite.graphics.endFill (); // Stoppen Sie das Rechteck zu füllen.
Wenn Sie diesen Code haben, führen Sie Ihre Anwendung aus und sehen Sie zu, wie sie funktioniert!
Erstellen Sie in Flash einen neuen MovieClip und zeichnen Sie eine Einheit. Zeichnen Sie im ersten Frame einfach eine Einheit. Fügen Sie im zweiten Rahmen einen grünen Kreis unter der Einheit oder etwas hinzu, mit dem der Spieler informiert wird, dass die Einheit ausgewählt wurde. Es sollte ungefähr so aussehen:
Ich habe auch nur einen kurzen grasigen Hintergrund auf der Bühne gezeichnet, damit er schön aussieht :)
Nachdem Sie den MovieClip erstellt haben, klicken Sie mit der rechten Maustaste auf das Symbol in Ihrer Bibliothek und wählen Sie Eigenschaften. Aktivieren Sie die Kontrollkästchen "In ActionScript exportieren" und "In Bild 1 exportieren". Dann geben Sie ihm den Namen 'Einheit'. Ihre Eigenschaften sollten in etwa so aussehen:
Hinweis: Wenn Sie auf 'OK' klicken, wird möglicherweise eine Warnung angezeigt, da noch keine solche Klasse "Einheit" vorhanden ist. Wenn ja, klicken Sie auf OK und wir werden dies jetzt beheben, indem Sie eine neue Klasse erstellen!
Erinnern Sie sich vorher daran, wann Sie den Unit MovieClip exportiert haben? Hier erstellen wir die Klasse für diesen MovieClip. Erstellen Sie also eine neue ActionScript-Klassendatei mit dem Namen 'Unit.as' und fügen Sie diesen Code in die Klasse ein:
package import flash.display.MovieClip; public class Unit erweitert MovieClip public var isActive: Boolean; // Sagt uns, ob die Einheit ausgewählt ist oder nicht. öffentliche Funktion Unit () isActive = false; // Die Einheit wurde noch nicht ausgewählt. gotoAndStop (1); // Gehe zum ersten Bild und bleib darin (kein Auswahlring).
Voraus, Kameraden!
Nun ist es Zeit, die Einheiten der Bühne hinzuzufügen und ihnen eine Position zu geben. Außerdem werden wir jede Einheit in einem 'Array' platzieren. Ein Array ist im Grunde eine Liste, mit der wir über einen Index auf die darin enthaltenen Elemente zugreifen können. Ein gutes Beispiel für Arrays ist die Republic of Code. Sie wurden auch hier in AS3 101: Arrays erläutert.
Hier ist der aktualisierte Code für 'SelectionDemo.as'. Zuerst fügen wir ein neues öffentliches Array hinzu unitList gleich nach den anderen Variablen:
public var selectionRect: Rechteck; // Die Daten für unser Rechteck werden gespeichert. public var selectionSprite: Sprite = new Sprite (); // Ein neues Sprite erstellen, um das Rechteck zu zeichnen. public var isMouseHeld: Boolean; // Sagt uns, wann die Maus hoch / runter geht public var unitList: Array; // Alle Einheiten werden hier festgehalten
Dann aktualisieren wir die Main Funktion durch Platzieren einer aufgerufenen Funktion PlaceUnits (15);. Wir werden das gleich schaffen.
public function SelectionDemo () // Initialisierung isMouseHeld = false; // Die Maus ist noch nicht gehalten. stage.addChild (selectionSprite); // Hinzufügen der selectionSprite zur Bühne. PlaceUnits (15); // Aufruf einer Funktion zum Platzieren der Einheiten auf der Bühne. // Listener hinzufügen stage.addEventListener (MouseEvent.MOUSE_DOWN, SetStartPoint); // Hör auf die Maus. stage.addEventListener (MouseEvent.MOUSE_UP, RemoveRectangle); // Hör auf die Mausfreigabe. stage.addEventListener (Event.ENTER_FRAME, UpdateGame); // Führen Sie diese Funktion jedes Bild aus (24 FPS).
Zeit für die Funktion! Ok, wir werden diese Funktion nach dem platzieren UpdateGame (e: Event): ungültig Funktion und was diese Funktion tut, ist die Anzahl der Einheiten, die Sie in Klammern angegeben haben, zur Bühne hinzuzufügen. Wir fügen auch die Einheiten zur Liste hinzu und geben ihnen zufällige Positionen auf der Bühne, wobei sichergestellt wird, dass sie nicht von der Bühne aus auftauchen können.
öffentliche Funktion PlaceUnits (Quantity: int): void unitList = new Array (); // Erstellen eines neuen Arrays (Liste) für alle Einheiten. 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).
Wenn Sie dies ausführen, sollten Sie 15 zufällig platzierte Einheiten haben. Zeit, um fortzufahren und die Geräteauswahl zu programmieren.
Wenn Sie das Spiel ausführen, werden Sie wahrscheinlich feststellen, dass es eine merkwürdige Überlappung der Einheiten gibt. Lass uns das regeln! Dies ist extrem einfach und erfordert nur eine kleine Änderung der PlaceUnits () Funktion.
Grundsätzlich müssen wir alle Einheiten zu einem Array (Liste) hinzufügen und dann die Liste nach der Y-Position (vertikalen Position) der Einheiten sortieren. Je niedriger die Y-Eigenschaft, desto weiter hinten sollte es sein. Wir werden das ändern PlaceUnits () Funktion zu:
Accentsconagua
öffentliche Funktion PlaceUnits (Quantity: int): void unitList = new Array (); // Erstellen eines neuen Arrays (Liste) für alle Einheiten. 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. Da haben wir es? keine Überlappungen mehr!
Nun werden wir bei jedem Frame prüfen, ob Einheiten ausgewählt wurden. Wenn dies der Fall ist, werden wir den Auswahlring erscheinen lassen.
Bearbeiten Sie die UpdateGame () Funktion auf Folgendes:
öffentliche Funktion UpdateGame (e: Event): void selectionSprite.graphics.clear (); // Das Rechteck löschen, damit es wieder gezeichnet werden kann. if (isMouseHeld) selectionRect.width = stage.mouseX - selectionRect.x; // Legt die Breite des Rechtecks fest. selectionRect.height = stage.mouseY - selectionRect.y; // Legt die Höhe des Rechtecks fest. selectionSprite.graphics.lineStyle (3, 0x3B5323, 0,6); // Setzt den Rand des Rechtecks. selectionSprite.graphics.beginFill (0x458B00, 0.4); // Legen Sie die Füllung und Transparenz des Rechtecks fest. selectionSprite.graphics.drawRect (selectionRect.x, selectionRect.y, selectionRect.width, selectionRect.height); // Zeichne das Rechteck auf die Bühne! selectionSprite.graphics.endFill (); // Stoppen Sie das Rechteck zu füllen. CheckForSelection (); // Wir werden prüfen, ob Einheiten ausgewählt wurden.
Wie Sie sehen, haben wir eine Funktion hinzugefügt CheckForSelection (). Lassen Sie uns diese Funktion nach den anderen erstellen:
public function CheckForSelection (): void für jede (var-Einheit: Unit in unitList) // Für jede Unit, die sich im Unit-Array (Liste) befindet? if (unit.hitTestObject (selectionSprite)) // Wenn das selectionSprite die Unit berührt. unit.select (); // Die Einheit auswählen. else unit.deselect (); // Abwahl der Einheit.
Wie Sie in den hervorgehobenen Zeilen sehen können, wird die wählen() und Abwählen() Funktionen existieren nicht. Öffne 'Unit.as' und füge sie ein:
package import flash.display.MovieClip; public class Unit erweitert MovieClip public var isActive: Boolean; // Sagt uns, ob die Einheit ausgewählt ist oder nicht. öffentliche Funktion Unit () isActive = false; // Die Einheit wurde noch nicht ausgewählt. gotoAndStop (1); // Gehe zum ersten Bild und bleib darin (kein Auswahlring). public function select (): void isActive = true; // Die Einheit ist ausgewählt. gotoAndStop (2); // Zeige den Ring. public function deselect (): void isActive = false; // Die Einheit ist nicht ausgewählt. gotoAndStop (1); // Zeige den Ring nicht.
Führe das Spiel aus und alles sollte funktionieren!
Nachdem Sie dieses Tutorial erfolgreich absolviert haben, stehen Ihnen jetzt einige Herausforderungen bevor. Fühlen Sie sich frei, sie zu überspringen, aber wenn Sie ihnen folgen, werden Sie lernen.
Anfänger:
Mittlere:
Fortgeschrittene:
Nur die Herausforderungen, mit denen Sie sich wohl fühlen!
Vielen Dank für das Lesen dieses Tutorials und ich hoffe, Sie haben etwas Neues gelernt. Ich möchte mich auch bei Tomas Banzas für die Kunst bedanken, die er gemacht hat!
Wenn Sie einige der Herausforderungen bewältigt haben und die Ergebnisse zeigen möchten, schreiben Sie bitte einen Link in den Kommentaren - ich würde sie gerne sehen!
