Suggerimento rapido una visualizzazione semplice del punteggio per i giochi Flash

Quasi tutti i giochi là fuori usano un sistema di punteggio per aiutare i giocatori a vedere i loro progressi. È essenziale mostrare il punteggio del giocatore in modo chiaro e divertente. In questo Suggerimento rapido impareremo come fare proprio questo!


introduzione

Fai clic sul pulsante per aggiungere 20.000 punti al tuo punteggio:

In questo Suggerimento rapido impareremo come creare una visualizzazione dei punteggi. Per migliorare la qualità del nostro display, faremo due cose:

  1. Aggiungi virgole al nostro punteggio, quindi legge 1.600.000 anziché 1600.000. Ciò rende più facile per il giocatore capire quanto è grande il suo punteggio.
  2. Effettua la transizione del punteggio tra i valori, invece di cambiare immediatamente. Questo dà al giocatore un senso di realizzazione, perché lui o lei effettivamente vede crescere il suo punteggio.

Alla fine avremo una classe molto semplice e utile, che puoi usare facilmente all'interno dei tuoi progetti.

Questa classe si occuperà solo di mostrare il punteggio, non di calcolarlo.


Step 1: Creare la nostra classe

Per prima cosa creiamo la nostra classe; L'ho chiamato ScoreDisplay:

 pacchetto import flash.display.Sprite; public class ScoreDisplay estende Sprite public function ScoreDisplay () 

Passaggio 2: aggiunta delle nostre variabili di punteggio

Aggiungiamo lentamente alcune variabili:

 pacchetto import flash.display.Sprite; public class ScoreDisplay estende Sprite // il punteggio che viene mostrato, mentre aumenta public var currentScore: uint; // punteggio del giocatore privato punteggio var: uint; funzione pubblica ScoreDisplay () 

Mostreremo il nostro punteggio in a Campo di testo. Se desideri utilizzare un simbolo quando lavori con ScoreDisplay, non è necessario creare il campo di testo in base al codice. Tuttavia, se non si desidera utilizzare un simbolo, è necessario chiamare createScoreField ().

Ricordare che se si desidera utilizzare il proprio simbolo, è necessario fornire al campo di testo all'interno del simbolo il nome dell'istanza di currentScoreField.

 pacchetto import flash.display.Sprite; import flash.text.TextField; public class ScoreDisplay estende Sprite // il campo di testo che mostrerà currentScore public var currentScoreField: TextField; // il punteggio che viene mostrato, mentre sta aumentando public var currentScore: uint; // punteggio del giocatore privato punteggio var: uint; public function ScoreDisplay ()  // se lo sviluppatore non collegherà questa classe a un simbolo, questo metodo deve essere chiamato public function createScoreField (): void currentScoreField = new TextField (); addChild (currentScoreField); 

Passaggio 3: modifica e impostazione del nostro punteggio

Ora iniziamo a pensare a cosa vorremmo fare con il nostro ScoreDisplay classe. Ci piacerebbe essere in grado di impostare un punteggio, così come aggiungere o sottrarre dal punteggio del giocatore. Quindi creiamo questi metodi!

 pacchetto import flash.display.Sprite; import flash.text.TextField; public class ScoreDisplay estende Sprite // il campo di testo che mostrerà currentScore public var currentScoreField: TextField; // punteggio del giocatore privato punteggio var: uint; // il punteggio che viene mostrato, mentre è in aumento private var currentScore: uint; public function ScoreDisplay ()  // se lo sviluppatore non collegherà questa classe a un simbolo, questo metodo deve essere chiamato public function createScoreField (): void currentScoreField = new TextField (); addChild (currentScoreField);  public function setScore (_value: uint): void score = _value;  public function changeScore (_change: uint): void score + = _change; 

Step 4: Visualizzazione del nostro punteggio

Fin qui tutto bene, ora possiamo impostare e modificare il valore del punteggio. Ma come lo mostreremo? Anche se potrebbe non sembrare ancora molto utile, useremo un listener di eventi enter frame. Non preoccuparti, avrà senso!

 pacchetto import flash.display.Sprite; import flash.events.Event; import flash.text.TextField; public class ScoreDisplay estende Sprite // il campo di testo che mostrerà currentScore public var currentScoreField: TextField; // punteggio del giocatore privato punteggio var: uint; // il punteggio che viene mostrato, mentre è in aumento private var currentScore: uint; public function ScoreDisplay () addEventListener (Event.ENTER_FRAME, showScore, false, 0, true);  // se lo sviluppatore non collegherà questa classe a un simbolo, questo metodo deve essere chiamato public function createScoreField (): void currentScoreField = new TextField (); addChild (currentScoreField);  public function setScore (_value: uint): void score = _value;  public function changeScore (_change: uint): void score + = _change;  funzione privata showScore (evento: evento): void currentScoreField.text = String (score); 

Step 5: La nostra classe parzialmente finita

Se volessimo usare la nostra classe in un progetto, sarebbe come questo. Sembra funzionare bene - il punteggio cambia - ma non abbiamo finito. Ricorda cosa volevamo fare?

  1. Aggiungi virgole al nostro punteggio, quindi legge 1.600.000 anziché 1600.000.
  2. Effettua la transizione del punteggio tra i valori, invece di cambiare immediatamente.

Passaggio 6: aggiunta di virgole

Iniziamo con il primo obiettivo, aggiungendo le virgole.

 pacchetto import flash.display.Sprite; import flash.events.Event; import flash.text.TextField; public class ScoreDisplay estende Sprite // il campo di testo che mostrerà currentScore public var currentScoreField: TextField; // punteggio del giocatore privato punteggio var: uint; // il punteggio che viene mostrato, mentre è in aumento private var currentScore: uint; public function ScoreDisplay () addEventListener (Event.ENTER_FRAME, showScore, false, 0, true);  // se lo sviluppatore non collegherà questa classe a un simbolo, questo metodo deve essere chiamato public function createScoreField (): void currentScoreField = new TextField (); addChild (currentScoreField);  public function setScore (_value: uint): void score = _value;  public function changeScore (_change: uint): void score + = _change;  private function showScore (event: Event): void currentScoreField.text = addCommas (score);  funzione privata addCommas (_score: uint): String // una stringa, che avrà il punteggio con virgole var scoreString: String = new String (); // la quantità di caratteri che il nostro punteggio (senza virgole) ha var scoreLength: uint = _score.toString (). length; scoreString = ""; // aggiungi le virgole alla stringa per (var i: uint = 0; i 

Passaggio 7: transizione tra i punteggi

Ora lavoriamo sul nostro secondo obiettivo; transizione tra valori di punteggio, invece di passare immediatamente al nuovo valore.

Per questo possiamo usare le fantastiche capacità del Gemello classe. La maggior parte delle volte pensiamo alla classe Tween per spostare gli oggetti di visualizzazione, ma puoi usarla per modificare qualsiasi valore numerico, incluso il nostro punteggio.

 package import fl.transitions.Tween; importare fl.transitions.easing. *; import flash.display.Sprite; import flash.events.Event; import flash.text.TextField; public class ScoreDisplay estende Sprite // la quantità di tempo (in ms) necessaria per passare da un valore di punteggio a un altro const statico privato TRANSITION_LENGTH: uint = 500; // il punteggio che viene mostrato, mentre sta aumentando public var currentScore: uint; // punteggio del giocatore privato punteggio var: uint; // il campo di testo che mostrerà currentScore private var currentScoreField: TextField; // questo interporrà il valore del punteggio corrente private var currentScoreTween: Tween; public function ScoreDisplay () addEventListener (Event.ENTER_FRAME, showScore, false, 0, true);  // se lo sviluppatore non collegherà questa classe a un simbolo, questo metodo deve essere chiamato public function createScoreField (): void currentScoreField = new TextField (); addChild (currentScoreField);  public function setScore (_value: uint): void score = _value; tweenCurrentScore ();  public function changeScore (_change: uint): void score + = _change; tweenCurrentScore ();  private function showScore (event: Event): void currentScoreField.text = addCommas (currentScore);  private function tweenCurrentScore (): void currentScoreTween = new Tween (this, "currentScore", None.easeNone, currentScore, TRANSITION_LENGTH, true);  funzione privata addCommas (_score: uint): String // una stringa, che avrà il punteggio con virgole var scoreString: String = new String (); // la quantità di caratteri che il nostro punteggio (senza virgole) ha var scoreLength: uint = _score.toString (). length; scoreString = ""; // aggiungi le virgole alla stringa per (var i: uint = 0; i 

Sono stati fatti!

E questo è tutto! Potresti estendere questa classe e magari aggiungere suoni o "grafica di fantasia". Spero ti sia divertito e hai imparato qualcosa, evviva!