Suggerimento rapido cursore personalizzato Crosshair e suono di arma da fuoco

In questo suggerimento rapido creeremo un mirino personalizzato insieme a un suono di arma da fuoco. Questa potrebbe essere la base per un gioco sparatutto. In questo esempio, posizioniamo i fori dei proiettili sul palco nel punto in cui si fa clic.


Nota: Nonostante la nuova funzionalità di Native Cursor introdotta in FP10.2, questo metodo old-school è ancora un modo valido per creare un cursore personalizzato. Ha il vantaggio di permetterti di utilizzare una grafica più grande, inoltre funzionerà con le versioni precedenti di Flash Player. Daremo un'occhiata a Native Cursor's in FP10.2 domani :)

Breve panoramica

Nel file SWF vedrai un pulsante Start. Quando fai clic su questo pulsante, il tuo mouse diventa un mirino pronto a fare danni. Mentre fai clic in giro sul palco, viene riprodotto un suono di arma da fuoco e una grafica del foro di proiettile viene aggiunta al palco nel punto in cui hai fatto clic con il mouse.


Passaggio 1: impostazione del documento

Aprire un nuovo documento Flash e impostare le seguenti proprietà

  • Dimensioni del documento: 500 x 400 px
  • Colore di sfondo: #FFFFFF

Passaggio 2: impostazione degli elementi di gioco

Per il pulsante Start, ho disegnato un rettangolo arrotondato e ho inserito del testo con la scritta Start su di esso. Ho quindi convertito il pulsante e il testo in una MovieClip disegnando una selezione intorno a loro e premendo F8. Ho dato il nome al pulsante inizia il gioco, e anche usato inizia il gioco come Nome istanza nel pannello Proprietà. Se il pannello Proprietà non viene visualizzato, vai a Menu-> Finestra-> Proprietà o semplicemente premi CTRL + F3.

Nei file degli esercizi sono incluse due immagini: una è la grafica a mirino e l'altra è la grafica a forma di proiettile. Li ho importati uno alla volta sul palco e li ho convertiti in MovieClip facendo clic su di essi e premendo F8. Ho dato loro i nomi di istanza "BulletHole" e "CrossHair", assicurandomi che i punti di registrazione fossero impostati al centro in entrambi i casi, e usato lo stesso nome per la Classe nel Linkage di ciascun simbolo. Di seguito un'immagine di come ho configurato il BulletHole; è lo stesso per CrossHair.

Per il suono, l'ho importato nella Libreria, quindi ho fatto clic con il pulsante destro del mouse e ho selezionato Proprietà. Poi gli ho dato il nome GunShot e ho impostato anche il Linkage Class come GunShot.

Ora che abbiamo tutti i nostri elementi di gioco pronti possiamo tuffarci nel codice.


Passaggio 3: impostare il pacchetto e la classe principale

Qui impostiamo il nostro pacchetto e la Main Class per il nostro gioco

Per prima cosa importiamo alcune classi di cui avremo bisogno, quindi impostiamo la nostra classe di documenti. Questa classe principale deve estendere MovieClip o Sprite; qui estendiamo MovieClip. Quindi dichiariamo alcune variabili che useremo e codifichiamo la nostra funzione di costruzione. La funzione di costruzione aggiunge un Listener di eventi al pulsante, che è il punto in cui impostiamo il resto del gioco.

 package import flash.display.MovieClip; import flash.events.MouseEvent; import flash.ui.Mouse; import flash.media.Sound; import flash.media.SoundChannel; public class Main estende MovieClip // I clip filmato e Sound nella libreria var crosshair: CrossHair = new CrossHair (); var bullethole: BulletHole; var gunshot: GunShot = new GunShot (); // Necessario per il suono dello sparo var soundChannel: SoundChannel = new SoundChannel; // Se l'utente ha fatto clic su 1 ora var firstShot = true;  public function Main () // Mostra il cursore a forma di mano quando l'utente esegue il mouse sul pulsante startGame.buttonMode = true; startGame.addEventListener (MouseEvent.CLICK, startTheGame); 

Passaggio 4: codifica del inizia il gioco() Funzione

Il inizia il gioco() la funzione viene chiamata quando l'utente fa clic sul pulsante. Questa funzione rimuove il pulsante dallo stage, nasconde il mouse e aggiunge il mirino allo stage. Quindi aggiungiamo due ascoltatori di eventi sul palco.

 funzione privata startTheGame (e: MouseEvent): void // Rimuovi il pulsante dallo stage removeChild (startGame); // Nasconde il mouse Mouse.hide (); // Aggiunge il mirino e imposta le sue proprietà x e y // alle coordinate x e y del mouse addChild (mirino); crosshair.x = mouseX; crosshair.y = mouseY; stage.addEventListener (MouseEvent.MOUSE_MOVE, MoveCursor); stage.addEventListener (MouseEvent.CLICK, FireShot); 

Passaggio 5: codifica MoveCursor () e FireShot ()

Il MoveCursor () la funzione viene chiamata ogni volta che l'utente muove il mouse, a causa del listener di eventi MOUSE_MOVE che abbiamo aggiunto allo stage. In questa funzione ci assicuriamo semplicemente che il mirino si trovi nella stessa posizione del mouse usando mouseX e MouseY.

 funzione privata moveCursor (e: MouseEvent): void // Fa in modo che il mirino xey sia sempre // in cui x e y del mouse sono crosshair.x = mouseX; crosshair.y = mouseY; 

Il FireShot () la funzione viene chiamata ogni volta che l'utente fa clic sul palco. Per prima cosa controlliamo se questa è la prima volta che l'utente fa clic; se non lo è, riproduciamo il suono di arma da fuoco e aggiungiamo il proiettile alla stessa posizione sul palco in cui l'utente ha fatto clic utilizzando e.stageX ee.stageY. L'evento contiene informazioni su se stesso - puoi vedere cosa contiene usando trace (e.toString ()).

Se non avessimo verificato se fosse la prima volta, quando l'utente ha fatto prima clic sul pulsante Start, aggiungeva un mirino e riproduceva il suono di arma da fuoco (non lo vogliamo).

 funzione privata fireShot (e: MouseEvent): void // Se hanno fatto clic una volta, lo facciamo se (firstShot == false) // Riproduce il suono soundChannel = gunshot.play (); // Crea un nuovo proiettile e lo aggiunge allo // stage nel punto in cui l'utente ha fatto clic su bullethole = new BulletHole (); addChild (bullethole); bullethole.x = e.stageX; bullethole.y = e.stageY; // Vogliamo sempre il mirino sulla parte superiore in modo da scambiare le "Profondità" // del mirino e del proiettile dei proiettili (proiettile, mirino);  firstShot = false;  // Chiudi la classe // Chiudi il pacchetto

Conclusione

Questa potrebbe essere la base per molti giochi tipo shoot-up. Sarebbe molto facile generare alcuni nemici e quindi eseguire un controllo hitTestPoint () con X e Y del mouse contro l'oggetto di visualizzazione del nemico.

Spero ti sia piaciuto questo tutorial. Grazie per aver letto!