Share
Due volte al mese, rivisitiamo alcuni dei post preferiti dei nostri lettori da tutta la storia di Activetuts +. Questo tutorial è stato pubblicato per la prima volta nel febbraio 2010.
In questo tutorial creerai una classe Punteggio riutilizzabile che conta fino al nuovo totale quando i punti vengono aggiunti (invece di saltare al nuovo punteggio). Copriremo la creazione di grafica e il codice.
In alcuni giochi quando guadagni punti, vedrai immediatamente il tuo punteggio saltare al nuovo totale. Penso che sia molto più interessante se il punteggio conta uno alla volta, quindi il giocatore può "accumulare punti". Questo è quello che faremo qui.
Ecco un esempio della classe del punteggio in azione:
L'idea principale alla base di questo tutorial è di insegnarti come programmare la funzionalità di "conteggio in avanti", ma ti mostrerò anche come creare il fantastico display a LED visto nell'anteprima. Inizieremo progettando i numeri:
Crea un nuovo file Flash (ActionScript 3.0). Le impostazioni del film variano a seconda del gioco. Per questa demo sto configurando il mio film come 500x300, sfondo nero e 30 fps.
Crea un nuovo simbolo di clip filmato (Inserisci> Nuovo simbolo). Dare a questo simbolo il nome "cifra".
All'interno del clip filmato digitale utilizzare lo strumento Testo per aggiungere un numero 0 al simbolo. Sto usando un font chiamato Digital Readout, ma qualsiasi carattere di tipo LED dovrebbe funzionare.
Impostare la dimensione del testo su 40 pt e renderla di colore ambra / arancione chiaro (# F4C28B). Imposta il formato del paragrafo su centrato.
Aggiungi due filtri luminosi separati al tuo campo di testo. Impostare il colore su rosso (# FF0000) per entrambi e impostare la forza di entrambi su 200%.
Seleziona la casella di controllo Bagliore interno per uno e imposta Sfocatura su 2 pixel. Lascia l'altro a 5px Blur.
Puoi usare un colore diverso se vuoi (blu o verde sembrerebbero entrambi belli). Il trucco per farlo sembrare realistico è rendere il colore del testo un po 'sbiadito e impostare i bagliori su un colore più saturo. Questo fa sembrare che emetta luce.
Creare fotogrammi chiave sui fotogrammi 1-10 del filmato a cifre. Un modo semplice per farlo è selezionare i fotogrammi 1-10 (fare clic sulla cornice 1, quindi premere il tasto Maiusc e fare clic sulla cornice 10) e premere F6.
Ora dovresti avere 10 frame, ciascuno con un keyframe con il tuo campo di testo 0 luminoso. Passare attraverso ogni fotogramma e modificare i numeri in modo da avere le cifre 0-9. Il fotogramma 1 avrà "0", il fotogramma 2 avrà "1", il fotogramma 3 avrà "2", ecc.
Denominare questo livello "numeri".
Ora aggiungeremo uno stato "off" per i numeri di LED, così sarete in grado di vedere i segmenti non illuminati del display a LED.
Copia le tue 8 cifre (nel frame 9). Crea un nuovo livello denominato "background". Con il nuovo livello selezionato usa Incolla in posizione (Modifica> Incolla in posizione) per incollare le 8 cifre nella posizione esatta come quella copiata.
Rimuovi i bagliori dalla nuova 8 cifre e cambia il suo colore in grigio scuro (# 333333). Aggiungi un filtro sfocatura con Sfocatura impostata su 3px. Sposta questo livello sotto il livello "numeri".
Ora puoi scorrere i fotogrammi e vedere come i segmenti non illuminati del LED mostrano dietro ogni numero.
Crea un altro nuovo livello chiamato "azioni". Aprire il pannello Azioni e aggiungere un'azione stop () sul fotogramma 1.
Ciò manterrà il display che mostra '0' finché non lo diciamo diversamente.
Perché stiamo inserendo manualmente ogni cifra sul proprio frame invece di utilizzare un campo di testo dinamico? Buona domanda.
La ragione principale è che così facendo diventa più flessibile l'aggiornamento della grafica in seguito. Se si desidera modificare il design e utilizzare bitmap per i numeri o avere ciascuna cifra visualizzata con un font o un colore diverso, è facile farlo.
Inoltre, se designer e sviluppatori lavorano insieme su un progetto, è meglio creare le cose in un modo che dia ai progettisti un facile accesso a tutta la parte grafica possibile.
Sento che questa configurazione fa più che usare il testo dinamico.
Crea un nuovo filmato chiamato "Punteggio". Seleziona "Esporta per ActionScript" e imposta anche il nome della classe su "Punteggio".
Trascina il clip filmato della cifra dalla Libreria nel clip filmato di Score. Duplica la clip di cifre (Modifica> Duplica) sei volte (quindi hai sette cifre) e distanziali uniformemente.
Dato che abbiamo solo sette cifre, il punteggio massimo che saremo in grado di visualizzare è 9.999.999. Se il tuo gioco dovrà ospitare punteggi più alti, aggiungi di conseguenza più cifre.
Aggiungi un po 'più di spazio tra ogni terza cifra per consentire separatori di virgola.
Selezionare il clip filmato della cifra più a sinistra e assegnargli il nome di istanza "digit1". Assegna un nome alla successiva "digit2", quindi "digit3" e così via.
Crea un nuovo livello chiamato "virgole".
Il modo più semplice per far apparire le virgole esattamente come i numeri è inserire una delle cifre e copiare uno dei campi di testo numerici.
Tornando all'interno del clip filmato di Score, incolla il campo di testo nel livello di virgole e cambia il numero in una virgola. Duplicalo e spostalo tutte le volte che vuoi.
Per lo sfondo del punteggio aggiungeremo semplicemente un rettangolo arrotondato semplice.
Crea un nuovo livello chiamato "sfondo" e posizionalo dietro i livelli di numeri e virgole. Seleziona lo strumento Rettangolo e fai Option-clic (Alt-clic) sul palco. Crea un rettangolo di 200 px x 40 px con angoli di 3 px (aumenta la tua durata se hai più cifre). Rendi il riempimento nero e il tratto 1px grigio (# 666666).
Per qualche motivo Flash distorce sempre i tratti sui rettangoli arrotondati. Per aggirare questo, selezionare il tratto e scegliere Modifica> Forma> Converti linee in riempimenti. Questo converte il tratto da una linea a una forma piena e non si distorcerà più.
Se pensi che questo sia un trucco totale di una soluzione alternativa per le funzionalità di base che avrebbe dovuto essere risolto anni fa, ti invito a contattare Adobe e far loro sapere.
Quale grafica sarebbe completa senza un tocco di eleganza iPhone?
Crea un nuovo livello sopra ogni altra cosa chiamata "lucentezza". Aggiungi un nuovo rettangolo arrotondato, leggermente più piccolo di quello sullo sfondo. Questa volta non dare alcun tratto e riempirlo con un gradiente bianco dal 20% di Alpha a 0% di Alpha.
Crea un nuovo file Actionscript chiamato "Score.as". Salvalo nella stessa directory del tuo file Flash principale. Poiché il nome di questa classe e il nome della classe di esportazione del clip filmato di Score sono gli stessi, Flash li collegherà automaticamente.
Aggiungi questo codice al file Score.as:
package import flash.display.MovieClip; import flash.events.Event; la classe pubblica Score estende MovieClip // COSTRUTTORE funzione pubblica Score ()
Questo è solo un guscio vuoto di una classe per ora. Dobbiamo estendere la classe MovieClip poiché questa classe è collegata a un clip filmato nella libreria, quindi dobbiamo anche importare la classe MovieClip. Useremo l'evento ENTER_FRAME, quindi importeremo anche la classe Event.
Aggiungi queste due linee alla classe Punteggio appena sopra la funzione di costruzione.
private const SPEED: int = 1; // quanto velocemente conta NUM_DIGITS: int = 7; // quante cifre ci sono nel punteggio
Queste sono due costanti - tipo di impostazioni simili per la classe.
Ora aggiungiamo un paio di variabili. Metti questi appena sotto le costanti:
private var _totalScore: int = 0; private var _displayScore: int = 0;
Queste variabili terranno le due diverse versioni del nostro punteggio. "_totalScore" sarà il punteggio effettivo. "_displayScore" sarà il numero corrente
viene mostrato sul display a LED. Se aggiungo 50 al punteggio, il _totalScore sarà immediatamente 50, ma il _displayScore sarà 1, quindi 2, quindi 3, fino a raggiungere 50.
Se hai bisogno di conoscere il punteggio reale (come inviare alle tue schede di punteggio elevato) utilizzerai _totalScore poiché _displayScore potrebbe non essere accurato.
Sto usando caratteri di sottolineatura all'inizio dei nomi delle variabili per indicare che si tratta di variabili private.
Quindi, se _totalScore è una variabile privata, come accediamo dall'esterno della classe Score? Useremo un metodo "accessor" o "getter".
Aggiungi questo metodo sotto la funzione di costruzione:
// accesso pubblico per la funzione public totalScore get totalScore (): int return _totalScore;
Questo metodo restituisce semplicemente il valore della variabile _totalScore. Ci dà un modo per accedere a quel valore senza dover esporlo come variabile pubblica.
Avremo bisogno di un modo per aggiungere punti al punteggio. Aggiungi questo metodo:
// aggiungi un importo al punteggio public function add (amount: int): void _totalScore + = amount; addEventListener (Event.ENTER_FRAME, updateScoreDisplay); // avvia il conteggio del display
Questo metodo accetta un intero "importo" che aggiunge alla variabile _totalScore. La seconda riga avvia un evento ENTER_FRAME che chiama un metodo chiamato updateScoreDisplay ogni frame. Lo aggiungeremo dopo.
Ora aggiungi un metodo updateScoreDisplay. È qui che accadrà tutta la funzionalità di conteggio. Deve accettare un evento poiché viene richiamato da un evento ENTER_FRAME.
// esegue ogni frame per aggiornare la funzione privata score scoreScoreDisplay (e: Event): void
Ora aggiungiamo alcune funzionalità. La prima cosa che questo metodo farà è incrementare la variabile _displayScore in base alla quantità impostata nella nostra costante SPEED:
// incrementa il punteggio visualizzato per l'importo della velocità _displayScore + = SPEED;
C'è un potenziale problema qui però. Cosa succede se la nostra velocità è impostata su 10 e cerchiamo di aggiungere 5 al punteggio? Il displayScore sarà superiore al totalScore. Aggiungiamo un paio di righe per risolvere il problema:
// assicurati che il punteggio del display non sia superiore al punteggio reale se (_displayScore> _totalScore) _displayScore = _totalScore;
Questo controlla se il displayScore è superiore al totalScore e, in caso affermativo, imposta il displayScore come uguale al totalScore.
Successivamente dobbiamo aggiungere gli zeri iniziali al punteggio. Lo faremo convertendo displayScore in una stringa e aggiungendo zeri fino a quando la lunghezza è uguale al numero di cifre definite dalla costante NUM_DIGITS:
var scoreStr: String = String (_displayScore); // cast displayScore come stringa // aggiunge gli zeri iniziali mentre (scoreStr.length < NUM_DIGITS) scoreStr = "0" + scoreStr;
Ora per visualizzare effettivamente la partitura scorreremo ciclicamente ognuna delle nostre clip di cifre (ricordiamo che abbiamo chiamato "digit1", "digit2", ecc.) E usiamo il numero corrispondente dalla stringa di punteggio per impostare il numero di fotogramma del clip:
// scorre e aggiorna ogni cifra per (var i: int = 0; i < NUM_DIGITS; i ++) var num = int (scoreStr.charAt (i)); questa ["cifra" + (i + 1)]. gotoAndStop (num + 1); // imposta la cifra mc sulla cornice destra
Il metodo charAt recupera il carattere da una stringa nella posizione specificata. Questo ci permette di andare personaggio dopo carattere attraverso la stringa del punteggio.
Le parentesi nella riga successiva ci consentono di creare dinamicamente il nome della clip. Il codice, questo [ "cifra" + (i + 1)] accede alla clip con il nome "digit1" o "digit2", ecc., a seconda del valore di io.
Stiamo usando "num + 1" come numero di frame perché i numeri di frame sono sfalsati di 1 dalle cifre che contengono (il frame 1 mostra 0, il frame 2 mostra 1, ecc.)
L'ultima cosa che dobbiamo fare in questo metodo è controllare se il displayScore e il totalScore sono uguali. Se è così, possiamo rimuovere l'ascoltatore e smettere di chiamare questo metodo per ora.
// se il punteggio del display è uguale al punteggio totale rimuovi l'evento enterframe se (_totalScore == _displayScore) removeEventListener (Event.ENTER_FRAME, updateScoreDisplay);
Se ti perdi da qualche parte in quella fase, puoi controllare i file sorgente per vedere la classe completata.
Per utilizzare questa classe trascina il clip filmato Punteggio dalla Libreria sullo stage e assegnagli il nome di istanza "myScore". Puoi aggiungere punti al tuo punteggio usando questa linea nella tua Document Class:
myScore.add (50);
Puoi vedere un esempio di questo nei file sorgente. Sto aggiungendo al punteggio quando si fa clic sui pulsanti del paraurti, ma è più probabile che tu stia chiamando add () quando si verificano eventi nel tuo gioco.
Se hai bisogno di conoscere il punteggio del giocatore puoi ottenere il totalScore usando:
myScore.totalScore
Questo chiamerà il metodo accessor e restituirà il valore di _totalScore.
Ora hai una classe Punteggio conteggio riutilizzabile che puoi utilizzare in uno qualsiasi dei tuoi giochi.
Penso che l'aspetto dei LED sia fantastico, ma dovresti sicuramente modificare il design per adattarlo all'aspetto del tuo gioco. Ecco alcune idee per diversi progetti per iniziare:
Grazie per aver letto questo tutorial. Fatemi sapere cosa ne pensate!
Accentsconagua