Snelle tip Custom Crosshair Cursor en Gunshot Sound

In deze Quick Tip maken we een aangepast draadkruis samen met een schotschot. Dit zou de basis kunnen zijn voor een shoot-'em-up-game. In dit voorbeeld plaatsen we kogelgaten op het podium op het punt waar u klikt.


Notitie: Ondanks de nieuwe Native Cursor-functie die is geïntroduceerd in FP10.2, is deze old-schoolmethode nog steeds een geldige manier om een ​​aangepaste cursor te maken. Het heeft het voordeel dat u grotere afbeeldingen kunt gebruiken, plus dat het werkt met oudere versies van Flash Player. We zullen morgen in FP10.2 Native Cursor's bekijken :)

Kort overzicht

In de SWF ziet u een knop Starten. Wanneer je op deze knop klikt, wordt je muis een draadkruis dat klaar is om wat schade aan te richten. Terwijl je op het podium klikt, wordt er een schot met kogels afgespeeld en wordt er een kogelgatenafbeelding toegevoegd aan het podium op het punt waar je met de muis hebt geklikt.


Stap 1: Het document instellen

Open een nieuw Flash-document en stel de volgende eigenschappen in

  • Documentgrootte: 500x400 px
  • Achtergrondkleur: #FFFFFF

Stap 2: De spelelementen instellen

Voor de Start-knop tekende ik een afgeronde rechthoek en plaatste ik wat tekst met het woord Start erop. Vervolgens heb ik de knop en tekst geconverteerd naar een MovieClip door er een selectie omheen te tekenen en op F8 te drukken. Ik gaf de knop de naam start het spel, en ook gebruikt start het spel als de Exemplaarnaam in het venster Eigenschappen. Als het deelvenster Eigenschappen niet voor u wordt weergegeven, gaat u naar Menu-> Window-> Eigenschappen of druk gewoon op CTRL + F3.

In de oefenbestanden zijn twee afbeeldingen opgenomen: de ene is de crosshair-afbeelding en de andere is de bullethole-afbeelding. Ik heb deze een voor een geïmporteerd naar het podium en deze geconverteerd naar een MovieClip door erop te klikken en op F8 te drukken. Ik gaf ze de instantienamen "BulletHole" en "CrossHair", zorgde ervoor dat de registratiepunten in beide gevallen op het midden stonden en gebruikte dezelfde naam voor de klasse in de koppeling van elk symbool. Hieronder is een afbeelding van hoe ik de BulletHole heb opgezet; het is hetzelfde voor de CrossHair.

Voor het geluid heb ik het in de bibliotheek geïmporteerd en er met de rechtermuisknop op geklikt en de eigenschappen geselecteerd. Ik gaf het toen de naam GunShot en stelde ook de Linkage Class in als GunShot.

Nu we al onze game-elementen klaar hebben, kunnen we de code in duiken.


Stap 3: Stel het pakket en de hoofdklasse in

Hier hebben we ons pakket en de Hoofdklasse opgezet voor onze game

Eerst importeren we enkele klassen die we nodig hebben, daarna stellen we onze documentklasse in. Deze hoofdklasse moet zowel MovieClip als Sprite omvatten; hier breiden we MovieClip uit. Vervolgens verklaren we enkele variabelen die we zullen gebruiken en coderen we onze constructorfunctie. De constructorfunctie voegt een Event Listener toe aan de knop, waar we de rest van het spel instellen.

 pakket import flash.display.MovieClip; import flash.events.MouseEvent; import flash.ui.Mouse; import flash.media.Sound; import flash.media.SoundChannel; public class Main breidt MovieClip uit // De filmclips en Sound in the Library var crosshair: CrossHair = new CrossHair (); var bullethole: BulletHole; var gunshot: GunShot = new GunShot (); // Nodig voor het schotschot var soundChannel: SoundChannel = nieuw SoundChannel; // Of de gebruiker al dan niet 1 keer heeft geklikt var firstShot = true;  public function Main () // Handcursor tonen wanneer gebruiker over de knop migreert startGame.buttonMode = true; startGame.addEventListener (MouseEvent.CLICK, startTheGame); 

Stap 4: Codering van de start het spel() Functie

De start het spel() functie wordt aangeroepen wanneer de gebruiker op de knop klikt. Deze functie verwijdert de knop van het podium, verbergt de muis en voegt het dradenkruis toe aan het podium. We voegen vervolgens twee Event Listeners toe aan het podium.

 private function startTheGame (e: MouseEvent): void // Verwijder de knop van de stage removeChild (startGame); // Verbergt de muis Mouse.hide (); // Voegt de draadkruis toe en stelt de x- en y-eigenschappen // in op de x- en y-coördinaten van de muis addChild (draadkruis); crosshair.x = mouseX; crosshair.y = mouseY; stage.addEventListener (MouseEvent.MOUSE_MOVE, moveCursor); stage.addEventListener (MouseEvent.CLICK, FireShot); 

Stap 5: codering moveCursor () en FireShot ()

De moveCursor () De functie wordt aangeroepen wanneer de gebruiker de muis verplaatst, vanwege de gebeurtenislistener MOUSE_MOVE die we aan de fase hebben toegevoegd. In deze functie zorgen we er eenvoudigweg voor dat het dradenkruis zich op dezelfde positie bevindt als de muis door het te gebruiken mouseX en MouseY.

 private function moveCursor (e: MouseEvent): void // Zorgt ervoor dat de crosshair x en y altijd // is waar de x en y van de muis crosshair.x = mouseX is; crosshair.y = mouseY; 

De FireShot () functie wordt aangeroepen wanneer de gebruiker op het werkgebied klikt. We controleren eerst of dit de eerste keer is dat de gebruiker heeft geklikt; als dat niet zo is, spelen we het schotschot en voegen we de opsommingsteken toe aan dezelfde positie op het podium waar de gebruiker op klikte door te gebruiken e.stageX ene.stageY. Het evenement bevat informatie over zichzelf - je kunt zien wat het bevat door het te gebruiken trace (e.toString ()).

Als we niet controleren of dit de eerste keer was, toen de gebruiker voor de eerste keer op de Start-knop klikte, voegde hij een draadkruis toe en speelde het schotschot (we willen dat niet).

 private function fireShot (e: MouseEvent): void // Als ze eenmaal hebben geklikt, doen we dit als (firstShot == false) // het geluid afspeelt soundChannel = gunshot.play (); // Creëert een nieuwe bullethole en voegt deze toe aan de // fase op de plaats waar de gebruiker op bullethole = new BulletHole () klikte; addChild (bullethole); bullethole.x = e.stageX; bullethole.y = e.stageY; // We willen altijd dat het dradenkruis bovenaan zit, dus wisselen we de "Diepten" // van het draadkruis en de kogelruilKinderen (kogelgat, draadkruis);  firstShot = false;  // Sluit de klas // Sluit het pakket

Conclusie

Dit zou de basis kunnen zijn voor veel shoot-'em-up-achtige games. Het zou heel gemakkelijk zijn om enkele vijanden te spawnen en dan een hitTestPoint () check met de muis X en Y tegen het weergaveobject van de vijand.

Ik hoop dat je deze tutorial leuk vond. Bedankt voor het lezen!