Sfat rapid Custom Cursor Crosshair și Gunshot Sound

În acest sfat rapid vom crea un crosshair personalizat, împreună cu un sunet împușcat. Aceasta ar putea fi baza pentru un joc de tip shoot-'em-up. În acest exemplu, punem găuri pe scena în locul în care faceți clic.


Notă: În ciuda noii caracteristici Cursor Nativ introdus în FP10.2, această metodă veche de școală este încă o modalitate validă de a crea un cursor personalizat. Are avantajul de a vă permite să utilizați grafică mai mare, plus că va funcționa cu versiuni mai vechi ale Flash Player. Vom arunca o privire la Cursorul Nativ în FP10.2 mâine :)

Prezentare scurta

În SWF veți vedea un buton Start. Când faceți clic pe acest buton, mouse-ul dvs. devine un crucișor gata de a face unele daune. Pe măsură ce faceți clic pe scenă, se aude un sunet de foc și o grafică cu gloanțe se adaugă la scenă în punctul în care ați dat clic cu mouse-ul.


Pasul 1: Configurarea documentului

Deschideți un nou document Flash și setați următoarele proprietăți

  • Dimensiune document: 500x400px
  • Culoare fundal: #FFFFFF

Pasul 2: Configurarea elementelor de joc

Pentru butonul Start, am desenat un dreptunghi rotunjit și am plasat un text cu cuvântul Start pe el. Apoi am transformat butonul și textul într-un filmClip prin desenarea unei selecții în jurul lor și apăsarea tastei F8. Am dat butonul numele incepe jocul, și, de asemenea, utilizate incepe jocul ca nume de instanță în panoul Proprietăți. Dacă panoul Proprietăți nu se afișează pentru dvs., mergeți la Meniu-> Window-> Properties sau doar apăsați CTRL + F3.

În fișierele de exerciții sunt incluse două imagini: una este graficul crucii, iar celălalt este graficul cu buletine. I-am importat pe acestea la un moment dat pe scenă și le-am transformat într-un filmClip făcând clic pe ele și apăsând pe F8. I-am dat numele instanțelor "BulletHole" și "CrossHair", asigurându-vă că punctele de înregistrare au fost stabilite în centru în ambele cazuri și au folosit același nume pentru clasă în legătura dintre fiecare simbol. Mai jos este o imagine a modului în care am creat BulletHole; este aceeași pentru CrossHair.

Pentru sunet, l-am importat în Bibliotecă, apoi am făcut clic dreapta și am selectat Properties. Apoi i-am dat numele GunShot și am setat clasa de legătură și ca GunShot.

Acum, când avem gata toate elementele jocului, putem să ne aruncăm în cod.


Pasul 3: Configurați pachetul și clasa principală

Aici am creat pachetul nostru și clasa principală pentru jocul nostru

Mai întâi vom importa câteva clase de care avem nevoie, apoi ne-am înființat clasa de documente. Această clasă principală trebuie să extindă fie MovieClip, fie Sprite; aici extindem filmul MovieClip. Apoi declarăm câteva variabile pe care le vom folosi și codificăm funcția constructorului nostru. Funcția constructor adaugă un buton de ascultare a evenimentelor la butonul, unde ne-am înființat restul jocului.

 pachet import flash.display.MovieClip; importul flash.events.MouseEvent; import flash.ui.Mouse; import flash.media.Sound; import flash.media.SoundChannel; clasa publică Main extinde MovieClip // Clipurile video și sunetul din Biblioteca var crosshair: CrossHair = CrossHair nou (); var bullethole: BulletHole; var Gunshot: GunShot = nou GunShot (); // Necesar pentru sunetul cu focuri de armă var soundChannel: SoundChannel = nou SoundChannel; // Dacă utilizatorul a făcut clic pe 1 timp var firstShot = true;  funcția publică principală () // Afișați cursorul de mână când mouse-ul de utilizator trece peste butonul startGame.buttonMode = true; startGame.addEventListener (MouseEvent.CLICK, startTheGame); 

Pasul 4: Codarea codului incepe jocul() Funcţie

incepe jocul() este apelată când utilizatorul face clic pe buton. Această funcție elimină butonul din scenă, ascunde mouse-ul și adaugă parafra pe scena. Apoi adaugăm pe scenă doi participanți la eveniment.

 funcția privată startTheGame (e: MouseEvent): void // Scoateți butonul din stadiul removeChild (startGame); // Ascunde mouse-ul Mouse.hide (); // adaugă firele de cruce și își stabilește proprietățile x și y la coordonatele x și y ale mouse-ului addChild (crosshair); crosshair.x = mouseX; crosshair.y = mouseY; stage.addEventListener (MouseEvent.MOUSE_MOVE, moveCursor); stage.addEventListener (MouseEvent.CLICK, FireShot); 

Pasul 5: Codificarea moveCursor () și FireShot ()

moveCursor () funcția se numește ori de câte ori utilizatorul mută mouse-ul, datorită ascultătorului de evenimente MOUSE_MOVE pe care l-am adăugat la scenă. În această funcție, pur și simplu asigurați-vă că firele de cruce sunt în aceeași poziție cu Mouse-ul prin utilizarea mouseX și mousey.

 funcția privată moveCursor (e: MouseEvent): void // Asigurați-vă că traversarea x și y este întotdeauna // unde mouse-ul x și y este crosshair.x = mouseX; crosshair.y = mouseY; 

FireShot () funcția este apelată ori de câte ori utilizatorul face clic pe scenă. Mai întâi verificăm dacă aceasta este prima dată când utilizatorul a făcut clic; daca nu este, atunci vom juca sunetul de foc si vom adauga bulletHole in aceeasi pozitie pe scena in care utilizatorul a dat click folosind e.stageX șie.stageY. Evenimentul deține informații despre sine - puteți vedea ce conține prin utilizarea trace (e.toString ()).

Dacă nu am verificat dacă a fost prima dată, atunci când utilizatorul a dat clic pe butonul Start, s-ar adăuga o cruce și va reda sunetul de foc (nu vrem).

 funcția privată fireShot (e: MouseEvent): void // Dacă au făcut clic o dată, atunci facem acest lucru dacă (firstShot == false) // Redă sunetul soundChannel = gunshot.play (); // Creează un nou glonț și adaugă-l în faza // în locul în care utilizatorul a dat clic pe bullethole = BulletHole () nou; addChild (bullethole); bullethole.x = e.stageX; bullethole.y = e.stageY; // Intotdeauna dorim crucea de pe partea de sus pentru a schimba "Adancurile" / / de crosshair si bullet swapChildren (bullethole, crosshair);  firstShot = false;  // Închideți clasa // Închideți pachetul

Concluzie

Aceasta ar putea fi baza pentru multe jocuri de tip "shoot-up". Ar fi foarte ușor să cânți niște dușmani și apoi să faceți o verificare hitTestPoint () cu mouse-ul X și Y împotriva obiectului de afișare al inamicului.

Sper că v-ați bucurat de acest tutorial. Vă mulțumim pentru lectură!

Cod