Hurtig Tips Tilpasset Crosshair Markør og Gunshot Sound

I denne Quick Tip vil vi lage en skreddersydd crosshair sammen med en skuddlyd. Dette kan være grunnlaget for et shoot-opp-spill. I dette eksempelet plasserer vi kulehull på scenen ved det punktet du klikker på.


Merk: Til tross for den nye Native Cursor-funksjonen som ble introdusert i FP10.2, er denne gamle skolen-metoden fortsatt en gyldig måte å skape en tilpasset markør på. Det har fordelen av at du kan bruke større grafikk, pluss det vil fungere med eldre versjoner av Flash Player. Vi tar en titt på Native Cursor i FP10.2 i morgen :)

Kort overblikk

I SWF ser du en Start-knapp. Når du klikker denne knappen, blir musen et krysshår klar for å gjøre skade. Når du klikker rundt på scenen, spiller en skuddlyd og et kulehullgrafikk blir lagt til scenen på det punktet du klikket med musen.


Trinn 1: Sette opp dokumentet

Åpne et nytt Flash-dokument og sett inn følgende egenskaper

  • Dokumentstørrelse: 500x400px
  • Bakgrunnsfarge: #FFFFFF

Trinn 2: Sette opp spillelementene

For Start-knappen tegnet jeg et avrundet rektangel og lagde litt tekst med ordet Start på det. Jeg konverterte deretter knappen og teksten til en filmclip ved å tegne et utvalg rundt dem og trykke på F8. Jeg ga knappen navnet start spill, og også brukt start spill som instansnavn i panelet Egenskaper. Hvis Egenskapspanelet ikke vises for deg, går du til Meny-> Window> Egenskaper eller bare trykk CTRL + F3.

Inkludert i øvelsesfilene er to bilder: den ene er krysshår grafikken, og den andre er bulletholens grafikk. Jeg importerte disse en om gangen til scenen og konverterte dem til en MovieClip ved å klikke på dem og trykke på F8. Jeg ga dem forekomstnavnene "BulletHole" og "CrossHair", sørget for at registreringspoengene ble satt til senteret i begge tilfeller, og brukte samme navn for klassen i koblingen til hvert symbol. Nedenfor er et bilde av hvordan jeg oppretter BulletHole; Det er det samme for CrossHair.

For lyden importerte jeg den til biblioteket, og deretter høyreklikket på den og valgte Egenskaper. Jeg ga det navnet GunShot og satte Linkage Class som GunShot også.

Nå som vi har alle våre spillelementer klare, kan vi dykke inn i koden.


Trinn 3: Sett opp pakken og hovedklassen

Her setter vi opp vår pakke og hovedklassen for vårt spill

Først importerer vi noen klasser vi trenger, og vi setter opp dokumentarklassen vår. Denne hovedklassen må utvide enten MovieClip eller Sprite; her strekker vi ut MovieClip. Vi erklærer da noen variabler som vi skal bruke, og koder vår konstruktørfunksjon. Konstruktørfunksjonen legger til en Event Listener til knappen, som er der vi satt opp resten av spillet.

 pakke import flash.display.MovieClip; importer flash.events.MouseEvent; importere flash.ui.Mouse; importere flash.media.Sound; importere flash.media.SoundChannel; offentlig klasse Main utvider MovieClip // Filmklippene og lyden i biblioteket var krysshår: CrossHair = new CrossHair (); var bullethole: BulletHole; var skudd: GunShot = ny GunShot (); // Behov for skytevåpen var soundChannel: SoundChannel = new SoundChannel; // Uansett om brukeren har klikket 1 gang var firstShot = true;  offentlig funksjon Main () // Vis håndpekeren når brukeren mister over knappen startGame.buttonMode = true; startGame.addEventListener (MouseEvent.CLICK, startTheGame); 

Trinn 4: Koding av start spillet() Funksjon

De start spillet() funksjon kalles når brukeren klikker på knappen. Denne funksjonen fjerner knappen fra scenen, skjuler musen, og legger krysshåret til scenen. Vi legger da to hendelseslyttere til scenen.

 privat funksjon startTheGame (e: MouseEvent): void // Fjern knappen fra scenen removeChild (startGame); // Skjuler musen Mouse.hide (); // legger krysshår og setter sine x- og y-egenskaper // til musens x- og y-koordinater addChild (crosshair); crosshair.x = mouseX; crosshair.y = mouseY; stage.addEventListener (MouseEvent.MOUSE_MOVE, moveCursor); stage.addEventListener (MouseEvent.CLICK, Fireshot); 

Trinn 5: Koding moveCursor () og Fireshot ()

De moveCursor () funksjonen kalles når brukeren beveger musen, på grunn av MOUSE_MOVE hendelseslytteren la vi til scenen. I denne funksjonen sørger vi bare for at krysshåren er i samme posisjon som musen ved å bruke mouseX og Mousey.

 privat funksjon moveCursor (e: MouseEvent): void // Pass på at krysshåret x og y alltid er // hvor musens x og y er crosshair.x = mouseX; crosshair.y = mouseY; 

De Fireshot () funksjon kalles når brukeren klikker på scenen. Vi sjekker først for å se om dette er første gang brukeren klikket; Hvis det ikke er det, spiller vi skuddlyden og legger til bulletHole til samme posisjon på scenen hvor brukeren klikket ved å bruke e.stageX oge.stageY. Arrangementet inneholder informasjon om seg selv - du kan se hva den inneholder ved å bruke spor (e.toString ()).

Hvis vi ikke sjekket om dette var første gang, da brukeren først klikket på Start-knappen, ville det legge til et krysshår og spille skuddlyden (vi vil ikke ha det).

 privat funksjon fireShot (e: MouseEvent): void // Hvis de har klikket en gang så gjør vi dette hvis (firstShot == false) // Spiller lyden soundChannel = gunshot.play (); // Oppretter en ny bullethole og legger den til // scenen på stedet der brukeren klikket bullethole = new BulletHole (); addChild (bullethole); bullethole.x = e.stageX; bullethole.y = e.stageY; // Vi vil alltid ha krysshår på toppen, så vi bytter "Dybder" / / av krysshår og kuleveksler (Bullethole, crosshair);  firstShot = false;  // Lukk klassen // Lukk pakken

Konklusjon

Dette kan være grunnlaget for mange shoot-'em-up type spill. Det ville være veldig enkelt å kaste noen fiender og deretter gjøre en hitTestPoint () sjekk med musens X og Y mot fiendens visningsobjekt.

Jeg håper du har hatt denne opplæringen. Takk for at du leste!