Share
Segui le semplici istruzioni di questo Tutorial Premium per creare un divertente gioco di Slot Machine in Flash. Fai girare le ruote e guarda cosa potresti vincere!
Usando gli strumenti di disegno di Flash creeremo un'interfaccia grafica di bell'aspetto che sarà alimentata da diverse classi ActionScript 3.
L'utente sarà in grado di scommettere importi diversi per vincere i premi.
Apri Flash e crea un documento di 480 pixel di larghezza e 320 pixel di altezza. Imposta la frequenza dei fotogrammi su 30 fps.
Verrà visualizzata un'interfaccia scura; questo comporta più forme, pulsanti, bitmap e altro ancora.
Continuare con i passaggi successivi per imparare come creare questa GUI.
Crea un rettangolo di 480x320 px e riempilo con questo gradiente radiale: # 404040, # 080808.
Usa il pannello Allinea (Cmd + K) per centrarlo nello stage.
Aggiungiamo un titolo al nostro gioco; a seconda del tema della tua Slot Machine puoi modificare la grafica in base alle tue esigenze. Qui ho usato il logo Tuts +.
Usa lo Strumento Rettangolo Primitivo (R) per creare un rettangolo di 320x160 px. Cambia il raggio dell'angolo a 10 e riempilo con questo gradiente lineare: # F5DA95, # 967226, # 91723B.
Duplica la forma, cambia le sue dimensioni in 316x156px e cambia il suo colore con il gradiente lineare nero che abbiamo usato prima.
Queste sono le grafiche che useremo come oggetti per le slot machine - sentiti libero di usare qualsiasi grafica che desideri nel tuo gioco!
Per creare lo sfondo per i rulli, utilizzare lo strumento Rettangolo (R) per creare un rettangolo di 98x146 px e riempirlo con questo gradiente: # 8F8459, # F8F4C7, # 8F8459.
Duplicare le forme e allinearle nell'area delle fessure.
Disporre gli elementi grafici nell'ordine desiderato e convertirli in filmati. Utilizzeremo il rettangolo di sfondo della bobina dell'ultimo passaggio per creare l'effetto ombra: cambia il suo colore in nero e modifica i suoi valori alfa in 65, 15, 0.
Questa può essere una parte difficile, quindi assicurati di scaricare i file sorgente per aiutarti.
Come puoi vedere, ho usato due Nettuts + loghi e due Psdtuts + loghi, ma solo uno ciascuno dei logo Activetuts + e Vectortuts +. Ciò significa che esiste una maggiore possibilità di abbinamento di tre Nettuts + loghi rispetto a tre corrispondenti Activetuts + loghi.
Usa l'ombra come livello maschera e la linea temporale per animare gli oggetti verso il basso. Ho usato l'animazione fotogramma per fotogramma spostando gli elementi di 20 px in ogni fotogramma. Potresti usare un'interpolazione, se lo desideri.
Duplica questo MoveClip e posizionali nello slot corretto. Usa i seguenti nomi di istanze: articoli1, articoli2, articoli3.
Le etichette della sequenza temporale verranno utilizzate per verificare la combinazione vincente. Crea un nuovo livello ed etichetta ogni fotogramma dove il nostro oggetto si trova al centro.
Usa lo strumento Testo (T) per creare tre campi di testo statici: Titoli di coda, Scommessa e Vincitore pagato.
Con lo strumento Testo ancora selezionato, crea tre campi di testo dinamici, posizionali sopra quelli statici e nominali, da sinistra a destra: creditsT, betT e paidT.
Usa lo Strumento Rettangolo Primitivo per creare tre quadrati da 45x45 px, modifica il raggio dell'angolo su 4 e riempilo con: # CD0202, # 910202. Aggiungi l'etichetta di testo corrispondente a ciascuna, converti ciascuna in un pulsante e assegnale un nome: payTabB, betMaxB e betOneB.
Il pulsante Spin è un po 'più grande degli altri e ha anche un altro colore.
Utilizza lo stesso processo degli altri pulsanti, ma modifica le dimensioni in 50x50 px e il colore in: # 5DA012, 3C670C.
Nominare il pulsante spinB.
Useremo gli effetti sonori per migliorare la sensazione del gioco, puoi trovare i suoni usati in questo esempio in Soungle.com usando le parole chiave slot machine.
Useremo un motore di interpolazione diverso dal predefinito incluso in Flash, questo aumenterà le prestazioni e sarà più facile da usare.
È possibile scaricare TweenNano dal suo sito Web ufficiale.
Creare una nuova classe ActionScript 3.0 (Cmd + N) e salvarla come Main.as nella tua cartella di classe.
Crea la tua struttura di base per iniziare a scrivere il tuo codice.
> pacchetto import flash.display.Sprite; public class Main estende Sprite public function Main (): void // constructor code
Queste sono le classi che dovremo importare affinché la nostra classe funzioni; il importare direttiva rende disponibili classi e pacchetti definiti esternamente al codice.
import flash.display.Sprite; import flash.events.MouseEvent; import com.greensock.TweenNano; import flash.utils.Timer; import flash.events.TimerEvent;
Queste sono le variabili che useremo, leggere i commenti nel codice per saperne di più su di loro.
var payTable: PayTable; // Un timer var di istanza di Pay Table: Timer; // Oggetto timer che controlla la durata degli spin / * Suoni * / var buttonS: ButtonS = new ButtonS (); var spinS: SpinS = new SpinS (); var stopS: StopS = new StopS (); var winS: WinS = new WinS ();
Il costruttore è una funzione che viene eseguita quando un oggetto viene creato da una classe, questo codice è il primo ad essere eseguito quando si crea un'istanza di un oggetto, o viene eseguito quando il primo SWF viene caricato se appartiene alla classe del documento.
Chiama le funzioni necessarie per iniziare il gioco. Controlla quelle funzioni nei passaggi successivi.
funzione pubblica finale Main (): void // Code
Evita che i filmati MovieClip vengano riprodotti immediatamente.
items1.stop (); items2.stop (); items3.stop ();
Qui usiamo una funzione personalizzata per aggiungere gli eventi del mouse ai nostri pulsanti; questa funzione verrà creata più tardi nella classe.
buttonListeners ( 'add');
Quindi usiamo un'altra funzione personalizzata che impedirà gli eventi Mouse del pulsante Spin.
Accentsconagua
pulsanti ('disable', spinB); Questa funzione aggiunge o rimuove un evento MouseUp ai pulsanti in base al parametro specificato.
private final function buttonListeners (e: String): void if (e == 'add') spinB.addEventListener (MouseEvent.MOUSE_UP, spinBtn); betMaxB.addEventListener (MouseEvent.MOUSE_UP, betMax); betOneB.addEventListener (MouseEvent.MOUSE_UP, betOne); payTabB.addEventListener (MouseEvent.MOUSE_UP, payTableHandler); else spinB.removeEventListener (MouseEvent.MOUSE_UP, spinBtn); betMaxB.removeEventListener (MouseEvent.MOUSE_UP, betMax); betOneB.removeEventListener (MouseEvent.MOUSE_UP, betOne); payTabB.removeEventListener (MouseEvent.MOUSE_UP, payTableHandler);
La seguente funzione utilizza i suoi parametri per interpolare il valore alfa del pulsante specificato e disabilitare / abilitare le interazioni del mouse.
pulsanti funzione privata finale (azione: String ,? btns): void var btnsLen: int = btns.length; if (action == 'enable') per (var i: int = 0; i < btnsLen; i++) btns[i].enabled = true; btns[i].mouseEnabled = true; TweenNano.to(btns[i], 0.5, alpha:1); else for(var j:int = 0; j < btnsLen; j++) btns[j].enabled = false; btns[j].mouseEnabled = false; TweenNano.to(btns[j], 0.5, alpha:0.2);
Il pulsante Puntata massima è gestito da questa funzione.
Riproduce il suono dello spin, cambia i campi di testo dei crediti e chiama la funzione spin.
funzione finale privata betMax (e: MouseEvent): void / * Sound * / spinS.play (); / * Giri se abbastanza crediti * / if (int (creditsT.text)> = 3) betT.text = '3'; pulsanti ('disable', spinB, betOneB, betMaxB, payTabB); rotazione(); Il pulsante Scommessa Uno è gestito da questa funzione.
Aumenta la puntata di uno (se possibile) e riproduce il suono del pulsante corrispondente. Abilita anche il pulsante Spin.
funzione finale privata betOne (e: MouseEvent): void / * Sound * / buttonS.play (); / * Scommetti One * / if (betT.text == '3') betT.text = '1'; else betT.text = String (int (betT.text) + 1); / * Abilita pulsante di rotazione * / if (spinB.enabled == false) pulsanti ('enable', spinB); Il pulsante Tabella pagamenti viene gestito da questa funzione.
Controlla se la tabella dei pagamenti è già sul palco e, in caso contrario, utilizza un Tween per visualizzarlo e centrarlo. Gli altri pulsanti sono disabilitati mentre è visualizzata la tabella.
funzione finale privata payTableHandler (e: MouseEvent): void / * Sound * / buttonS.play (); / * Mostra se non in stage * / if (payTable == null) payTable = new PayTable (); payTable.x = stage.stageWidth * 0.5; payTable.y = stage.stageHeight * 0.5; addChild (paytable); TweenNano.from (payTable, 0.2, scaleX: 0.4, scaleY: 0.4); / * Disabilita pulsanti * / pulsanti ('disable', spinB, betMaxB, betOneB); else TweenNano.to (payTable, 0.2, scaleX: 0.1, scaleY: 0.1, alpha: 0, onComplete: function destroyPT (): void removeChild (payTable); payTable = null); / * Abilita i pulsanti * / if (betT.text! = '0') pulsanti ('enable', spinB); pulsanti ('abilita', betMaxB, betOneB); Il pulsante Spin è gestito da questa funzione.
Suona il suono dello spin e la funzione Spin se i crediti sono corretti.
funzione finale privata spinBtn (e: MouseEvent): void / * Sound * / spinS.play (); / * Spin se sufficienti crediti * / if (int (creditsT.text)> = int (betT.text)) spin (); pulsanti ('disable', spinB, betOneB, betMaxB, payTabB); Una delle funzioni principali del gioco, la funzione di rotazione gestisce la vincita e la spesa dei crediti, gira gli oggetti negli slot e utilizza un timer per fermarli. Leggi i prossimi passi per una visione più dettagliata di queste azioni.
private final function spin (): void // Code
Questo controlla se sono disponibili crediti da aggiungere dal paidT campo di testo e reimposta il suo valore su 0.
creditsT.text = String (int (creditsT.text) + int (paidT.text)); paidT.text = '0';
Questo sottrae i crediti utilizzati nell'ultima scommessa.
creditsT.text = String (int (creditsT.text) - int (betT.text));
Questa funzione anima i rulli, per far girare gli oggetti.
items1.play (); items2.play (); items3.play ();
Questo timer determina (casualmente) il tempo necessario per far girare gli elementi della bobina, è diverso in ogni giro.
timer = new Timer (Math.floor (Math.random () * 1000) + 500); timer.addEventListener (TimerEvent.TIMER, handleTimer); timer.start ();
Questa funzione viene eseguita ogni volta che il timer termina il conteggio.
Arresta la rotazione dello slot corrente e riproduce il suono di arresto. Quando tutti gli elementi sono fermi, cancella il timer e chiama il checkWin () funzione.
private function handleTimer (e: TimerEvent): void if (timer.currentCount == 1) stopItem (items1.currentFrame, items1); / * Sound * / stopS.play (); if (timer.currentCount == 2) stopItem (items2.currentFrame, items2); / * Sound * / stopS.play (); if (timer.currentCount == 3) stopItem (items3.currentFrame, items3); / * Sound * / stopS.play (); / * Stop Timer * / timer.stop (); timer.removeEventListener (TimerEvent.TIMER, handleTimer); timer = null; / * Abilita pulsanti * / pulsanti ('abilita', spinB, betOneB, betMaxB, payTabB); / * Controlla gli articoli per una combinazione vincente * / checkWin (); Poiché il timer può terminare in una cornice in cui l'elemento corrente non è al centro, controlliamo il fotogramma corrente di MovieClip e usiamo gotoAndStop () per visualizzare l'elemento più vicino.
funzione finale privata stopItem (cFrame: int, targetItem: MovieClip): void if (cFrame> = 2 && cFrame <= 5) targetItem.gotoAndStop(5); else if(cFrame >= 6 && cFrame <= 9) targetItem.gotoAndStop(9); else if(cFrame >= 10 && cFrame <= 13) targetItem.gotoAndStop(13); else if(cFrame >= 14 && cFrame <= 17) targetItem.gotoAndStop(17); else if(cFrame >= 18 && cFrame <= 21) targetItem.gotoAndStop(21); else if(cFrame >= 22 && cFrame <= 24) targetItem.gotoAndStop(1); else if(cFrame == 1) targetItem.stop();
Potrebbe essere necessario modificare questo codice per abbinare i simboli e l'animazione di rotazione che hai scelto.
Questa funzione verifica se i tre elementi sono uguali, se è vero, riproduce il suono vincente e aggiunge l'importo corrispondente al pagato campo di testo.
private final function checkWin (): void if (items1.currentLabel == items2.currentLabel && items2.currentLabel == items3.currentLabel) / * Sound * / winS.play (); / * Ottieni l'etichetta corrente per determinare il valore dell'oggetto * / var lbl: String = items1.currentLabel; if (lbl == 'a') paidT.text = String (100 * int (betT.text)); else if (lbl == 'v') paidT.text = String (50 * int (betT.text)); else if (lbl == 'p') paidT.text = String (25 * int (betT.text)); else if (lbl == 'n') paidT.text = String (10 * int (betT.text));
Stiamo facendo uso della Document Class in questo tutorial, se non sai come usarlo o sei un po 'confuso per favore leggi questo QuickTip.
Imposta la classe di documento del FLA su Principale.
Ora siamo pronti per testare il film e vedere se tutto funziona come previsto, non dimenticare di provare tutti i pulsanti!
Il risultato finale è un gioco personalizzabile e divertente; prova ad aggiungere la tua grafica e i tuoi premi personalizzati! Potresti anche provare a modificare la probabilità di rendere più facile o più difficile la vittoria.
Spero che questo tutorial ti sia piaciuto, grazie per la lettura!
