Schneller Tipp Benutzerdefinierter Fadenkreuz-Cursor und Schusssound

In diesem Quick Tip erstellen wir ein benutzerdefiniertes Fadenkreuz zusammen mit einem Schußklang. Dies könnte die Basis für ein Ballerspiel sein. In diesem Beispiel platzieren Sie Einschusslöcher an der Stelle, an der Sie klicken.


Hinweis: Trotz der neuen Funktion Native Cursor, die in FP10.2 eingeführt wurde, ist diese Methode der alten Schule immer noch eine gültige Methode zum Erstellen eines benutzerdefinierten Cursors. Es bietet den Vorteil, dass Sie größere Grafiken verwenden können, und es funktioniert auch mit älteren Versionen von Flash Player. Morgen werfen wir einen Blick auf Native Cursor's in FP10.2 :)

Kurzübersicht

In der SWF-Datei sehen Sie eine Start-Schaltfläche. Wenn Sie auf diese Schaltfläche klicken, wird Ihre Maus zu einem Fadenkreuz, das Schaden anrichten kann. Wenn Sie auf der Bühne herum klicken, wird ein Schußton abgespielt, und an der Stelle, an der Sie mit der Maus geklickt haben, wird eine Einschussgraphik zur Bühne hinzugefügt.


Schritt 1: Einrichten des Dokuments

Öffnen Sie ein neues Flash-Dokument und legen Sie die folgenden Eigenschaften fest

  • Dokumentgröße: 500x400px
  • Hintergrundfarbe: #FFFFFF

Schritt 2: Einrichten der Spielelemente

Für den Start-Button habe ich ein abgerundetes Rechteck gezeichnet und Text mit dem Wort Start darauf platziert. Ich habe dann den Button und den Text in einen MovieClip konvertiert, indem ich eine Auswahl um sie herum gezeichnet habe und F8 drücke. Ich gab dem Button den Namen Spiel beginnen, und auch verwendet Spiel beginnen als Instanzname im Eigenschaftenfenster. Wenn das Eigenschaftenfenster nicht angezeigt wird, gehen Sie zu Menü-> Fenster-> Eigenschaften oder einfach drücken STRG + F3.

In den Übungsdateien sind zwei Bilder enthalten: Eines ist die Fadenkreuzgrafik und das andere ist die Bullethole-Grafik. Ich habe diese nacheinander auf die Bühne importiert und sie in einen MovieClip umgewandelt, indem Sie darauf geklickt haben und F8 drücken. Ich gab ihnen die Instanznamen "BulletHole" und "CrossHair", stellte sicher, dass die Registrierungspunkte in beiden Fällen auf die Mitte gesetzt waren, und verwendeten in der Verknüpfung jedes Symbols denselben Namen für die Klasse. Unten sehen Sie ein Bild, wie ich das BulletHole aufbaue; das gleiche gilt für das CrossHair.

Für den Sound habe ich ihn in die Bibliothek importiert, dann mit der rechten Maustaste darauf geklickt und Eigenschaften ausgewählt. Ich habe ihm dann den Namen GunShot gegeben und die Linkage-Klasse ebenfalls als GunShot festgelegt.

Nun, da wir alle unsere Spielelemente bereit haben, können wir in den Code eintauchen.


Schritt 3: Richten Sie das Paket und die Hauptklasse ein

Hier stellen wir unser Paket und die Hauptklasse für unser Spiel auf

Zuerst importieren wir einige Klassen, die wir brauchen werden, dann richten wir unsere Dokumentenklasse ein. Diese Hauptklasse muss entweder MovieClip oder Sprite erweitern. Hier erweitern wir MovieClip. Wir deklarieren dann einige Variablen, die wir verwenden werden, und codieren unsere Konstruktorfunktion. Die Konstruktorfunktion fügt der Schaltfläche einen Ereignis-Listener hinzu. Hier wird der Rest des Spiels eingerichtet.

 package import flash.display.MovieClip; import flash.events.MouseEvent; import flash.ui.Mouse; import flash.media.Sound; import flash.media.SoundChannel; public class Main erweitert MovieClip // Die Movieclips und der Sound in der Bibliothek var crosshair: CrossHair = new CrossHair (); var bullethole: Einschussloch; var gunshot: GunShot = new GunShot (); // Benötigt für den Schußklang var soundChannel: SoundChannel = new SoundChannel; // Ob der Benutzer 1 Mal geklickt hat oder nicht. Var firstShot = true;  public function Main () // Handcursor anzeigen, wenn der Benutzer den Mauszeiger über die Schaltfläche zeigt. startGame.buttonMode = true; startGame.addEventListener (MouseEvent.CLICK, startTheGame); 

Schritt 4: Codierung der Starte das Spiel() Funktion

Das Starte das Spiel() Funktion wird aufgerufen, wenn der Benutzer auf die Schaltfläche klickt. Mit dieser Funktion wird die Schaltfläche von der Bühne entfernt, die Maus ausgeblendet und das Fadenkreuz zur Bühne hinzugefügt. Wir fügen dann zwei Event Listener zur Bühne hinzu.

 private Funktion startTheGame (e: MouseEvent): void // Entferne die Schaltfläche von der Bühne removeChild (startGame); // verbirgt die Maus Mouse.hide (); // Fügt das Fadenkreuz hinzu und setzt seine X- und Y-Eigenschaften // auf die X- und Y-Koordinaten der Maus. AddChild (Fadenkreuz); Fadenkreuz.x = MausX; Fadenkreuz.y = mouseY; stage.addEventListener (MouseEvent.MOUSE_MOVE, moveCursor); stage.addEventListener (MouseEvent.CLICK, fireShot); 

Schritt 5: Codierung moveCursor () und fireShot ()

Das moveCursor () Die Funktion wird immer dann aufgerufen, wenn der Benutzer die Maus aufgrund des Ereignislisteners MOUSE_MOVE bewegt, den wir der Bühne hinzugefügt haben. In dieser Funktion stellen wir einfach sicher, dass sich das Fadenkreuz an derselben Position befindet wie die Maus mouseX und MouseY.

 private function moveCursor (e: MouseEvent): void // Stellt sicher, dass das Fadenkreuz x und y immer // ist, wobei x und y der Maus Fadenkreuz sind.x = mouseX; Fadenkreuz.y = mouseY; 

Das fireShot () Die Funktion wird aufgerufen, wenn der Benutzer auf die Bühne klickt. Wir prüfen zunächst, ob der Benutzer zum ersten Mal geklickt hat. Wenn dies nicht der Fall ist, spielen wir den Schußton und fügen das bulletHole an derselben Position auf der Bühne hinzu, auf die der Benutzer geklickt hat e.stageX unde.stageY. Das Ereignis enthält Informationen über sich selbst - Sie können sehen, was darin enthalten ist trace (e.toString ()).

Wenn wir nicht prüfen, ob dies das erste Mal war, fügte der Benutzer beim ersten Klicken auf die Schaltfläche Start ein Fadenkreuz hinzu und gab den Schußton ab (das wollen wir nicht)..

 private Funktion fireShot (e: MouseEvent): void // Wenn sie einmal geklickt haben, machen wir dies, wenn (firstShot == false) // den Sound wiedergibt soundChannel = gunshot.play (); // Erstellt ein neues Bullethole und fügt es der // Bühne an der Stelle hinzu, an der der Benutzer auf bullethole geklickt hat. = New BulletHole (); addChild (Bullethole); bullethole.x = e.stageX; bullethole.y = e.stageY; // Wir wollen immer das Fadenkreuz an der Spitze, also tauschen wir die "Tiefen" // des Fadenkreuzes und des Geschosswechsels aus. Kinder (Bullethole, Fadenkreuz);  firstShot = falsch;  // Schließen Sie die Klasse. // Schließen Sie das Paket

Fazit

Dies könnte die Grundlage für viele Shooter-Spiele sein. Es wäre sehr einfach, einige Feinde zu spawnen und dann einen hitTestPoint () mit dem Mauszeiger X und Y der Anzeige des gegnerischen Anzeigeobjekts durchzuführen.

Ich hoffe, Ihnen hat dieses Tutorial gefallen. Danke fürs Lesen!