Crea un gioco di memoria basato su audio - Creazione di interfacce

In questa serie di tutorial, ti mostrerò come creare un gioco di memoria basato su audio con il Corona SDK. Imparerai a caricare e riprodurre suoni e a memorizzare le informazioni in Lua Tables. L'obiettivo del gioco è riprodurre il suono del livello toccando i quadrati di colore. Continuare a leggere!


Disponibile anche in questa serie:

  1. Crea un gioco di memoria basato su audio - Creazione di interfacce
  2. Crea un gioco basato su memoria sonora - Game Logic

1. Panoramica dell'applicazione

Usando la grafica pre-creata codificheremo un gioco divertente usando le API Lua e Corona SDK.

Il giocatore sarà in grado di utilizzare i pulsanti sullo schermo per riprodurre la sequenza audio corrente, è possibile modificare i parametri nel codice per personalizzare il gioco.


2. Dispositivo di destinazione

La prima cosa che dobbiamo fare è selezionare la piattaforma in cui vogliamo far funzionare la nostra app, in questo modo potremo scegliere la dimensione per le immagini che useremo.

La piattaforma iOS ha queste caratteristiche:

  • iPad 1/2 / Mini: 1024x768px, 132 ppi
  • Retina iPad: 2048x1536, 264 ppi
  • iPhone / iPod Touch: 320x480px, 163 ppi
  • Retina per iPhone / iPod: 960x640px, 326 ppi
  • iPhone 5 / iPod Touch: 1136x640, 326 ppi

Perché Android è una piattaforma aperta, ci sono molti diversi dispositivi e risoluzioni. Alcune delle caratteristiche dello schermo più comuni sono:

  • Tablet Asus Nexus 7: 800x1280 px, 216 ppi
  • Motorola Droid X: 854x480px, 228 ppi
  • Samsung Galaxy SIII: 720x1280px, 306 ppi

In questo tutorial ci concentreremo sulla piattaforma iOS con il design grafico, in particolare lo sviluppo per la distribuzione su un iPhone / iPod touch, ma il codice presentato qui dovrebbe applicarsi anche allo sviluppo Android con il Corona SDK.


3. Interfaccia

Verrà utilizzata un'interfaccia semplice e intuitiva, che comprende più forme, pulsanti, bitmap e altro ancora.

Le risorse grafiche dell'interfaccia necessarie per questo tutorial sono disponibili nel download allegato.


4. Esporta grafica

A seconda del dispositivo selezionato, potrebbe essere necessario esportare la grafica nel PPI consigliato, è possibile farlo nell'editor di immagini preferito.

Ho usato il Regola dimensioni ... funzione nell'app Anteprima su Mac OS X.

Ricordarsi di assegnare alle immagini un nome descrittivo e salvarle nella cartella del progetto.


5. Configurazione dell'app

Verrà utilizzato un file esterno per rendere l'applicazione disponibile a schermo intero su tutti i dispositivi config.lua file. Questo file mostra le dimensioni originali dello schermo e il metodo utilizzato per ridimensionare il contenuto nel caso in cui l'app venga eseguita con una risoluzione dello schermo diversa.

 application = content = width = 320, height = 480, scale = "letterbox",

6. Main.lua

Scriviamo l'applicazione!

Apri l'editor Lua preferito (qualsiasi editor di testo funzionerà, ma non avrai l'evidenziazione della sintassi) e
preparati a scrivere la tua fantastica app. Ricordarsi di salvare il file come main.lua nella cartella del tuo progetto.


7. Struttura del codice

Struttureremo il nostro codice come se fosse una classe. Se conosci ActionScript o Java, dovresti trovare la struttura familiare.

 Necesary Classes Variable and Constants Declare Funzione contructor (funzione principale) metodi di classe (altre funzioni) chiamata Main function

8. Nascondi barra di stato

 display.setStatusBar (display.HiddenStatusBar)

Questo codice nasconde la barra di stato. La barra di stato è la barra in cima allo schermo del dispositivo che mostra l'ora, il segnale e altri indicatori.


9. Sfondo

Un semplice grafico viene utilizzato come sfondo per l'interfaccia dell'applicazione, la riga successiva del codice lo memorizza.

 -- Grafica - [Sfondo] local bg = display.newImage ('bg.png')

10. Vista del titolo

Questa è la Vista Titolo, sarà la prima schermata interattiva a comparire nel nostro gioco, queste variabili memorizzano i suoi componenti.

 -- [Titolo vista] titolo locale locale playBtn crediti localiBtn titleView locale

11. Vista dei crediti

Questa vista mostrerà i crediti e il copyright del gioco, questa variabile verrà utilizzata per memorizzarla.

 -- [CreditsView] creditsView locali

12. Pulsanti quadrati

I pulsanti utilizzati per riprodurre il suono.

 -- Color Piazze locali r =  local g =  local ye =  local b = 

13. Messaggio di istruzioni

All'inizio del gioco apparirà un messaggio di istruzioni, quando il messaggio verrà eliminato verrà riprodotta la sequenza sonora.

 -- Istruzioni locali ins

14. Pulsante di controllo

Questo pulsante confronta l'input dell'utente con il livello corrente per determinare se la sequenza è corretta o meno.

 -- Controlla il controllo locale del pulsante

15. Avviso

Questo è l'avviso che verrà visualizzato quando vinci il gioco. Completerà il livello e terminerà il gioco.

 -- Avvisa locale alertView

16. Suoni

Useremo effetti sonori per migliorare la sensazione del gioco. I suoni utilizzati in questa app sono stati generati da AS3SFXR.

 -- Suoni rs = audio.loadSound ('1.mp3') gs = audio.loadSound ('2.mp3') ye.s = audio.loadSound ('3.mp3') bs = audio.loadSound ('4.mp3' )

17. Variabili

Queste sono le variabili che useremo, leggere i commenti nel codice per saperne di più su di loro.

 -- Livelli, modifica queste tabelle per modificare o aggiungere più livelli, ogni lettera rappresenta un pulsante / suono cioè r = rosso, ye = giallo e così via local l1 = r, ye, g, b local l2 = ye, r, b, g, b, r, g, ye - Variabili locali lastY local currentLevel = l1 local gameTimer local times = 1 local userInput =  --stores i bottoni toccati local correct = 0

18. Dichiarare funzioni

Dichiara tutte le funzioni come Locale all'inizio.

 -- Funzioni locali Main =  local startButtonListeners =  local showCredits =  local hideCredits =  local showGameView =  local gameListeners =  local playLevel =  local onTap =  local checkInput =  alert locale =  

19. Costruttore

Successivamente creeremo la funzione che inizializzerà tutta la logica di gioco:

 funzione Main () - code ... end

20. Aggiungi la vista del titolo

Ora posizioniamo il TitleView nello stage e chiamiamo una funzione che aggiungerà il rubinetto ascoltatori ai pulsanti.

 function Main () title = display.newImage ('title.png', 73, 53) playBtn = display.newImage ('playBtn.png', 140, 245) creditsBtn = display.newImage ('creditsBtn.png', 124, 305) titleView = display.newGroup (title, playBtn, creditsBtn) startButtonListeners ('add') end

La prossima volta…

In questa parte della serie hai imparato l'interfaccia e la configurazione di base del gioco. Nella parte successiva e finale della serie, gestiremo la creazione del livello, il confronto delle tabelle e i passaggi finali da eseguire prima del rilascio, come il test delle app, la creazione di una schermata iniziale, l'aggiunta di un'icona e, infine, la creazione dell'app. Leggi la parte finale ora!