Costruisci un gioco Snake - Creazione di interfacce

In questa serie di tutorial, imparerai come creare un gioco come Snake. L'obiettivo del gioco è quello di afferrare le mele sullo schermo per aumentare il punteggio. Continuare a leggere!


Passaggio 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 colpire un disco trascinando la paletta sullo schermo, è possibile modificare i parametri nel codice per personalizzare il gioco.

Passaggio 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: 1024x768px, 132 ppi
  • iPad 3: 2048x1536, 264 ppi
  • iPhone / iPod Touch: 320x480px, 163 ppi
  • iPhone 4 / iPod Touch: 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.


Passaggio 3: interfaccia

Verrà utilizzata un'interfaccia semplice e amichevole. Ciò include più forme, pulsanti, bitmap e altro ancora.

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


Passaggio 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.


Passaggio 5: suono

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


Passaggio 6: 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",

Passaggio 7: 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.


Passaggio 8: 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

Passaggio 9: 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.


Passaggio 10: 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')

Passaggio 11: Vista titolo

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

 -- [Titolo vista] titolo localeBg riproduzione localeBtn crediti localiBtn titleView locale

Passaggio 12: Vista dei crediti

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

 -- [CreditsView] creditsView locali

Step 13: Sfondo del gioco

Questa immagine verrà posizionata in cima al nostro precedente sfondo. Le seguenti righe memorizzano anche la grafica per il pad sullo schermo.

 -- [Sfondo del gioco] gioco localeBg - [Pad] local up locale locale locale in basso a destra

Passaggio 14: Apple

Questa è la grafica della mela, referenziata nella prossima variabile. Afferrando questi oggetti si aumenteranno le dimensioni / parti del serpente.

 -- [Apple] mela locale

Step 15: Testa

La prima parte del serpente, sarà sul palco all'inizio. UN colpire l'area verrà creato sopra di esso ed entrambi saranno raggruppati in capo variabile.

 -- Responsabile locale headGFX locale headHitArea locale

Step 16: Parte del serpente

Questo grafico verrà aggiunto ogni volta che il serpente mangia una mela.


Passaggio 17: Punteggio

La riga successiva gestisce il campo di testo che visualizzerà i punteggi.

 -- Punteggio locale

Passaggio 18: variabili

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

 -- Variabile locale dir - corrente della direzione locale del serpente - utilizzata per avviare il timer locale timerSrc velocità locale = 500 locale mConst = 17 - numero di pixel per spostare ogni conteggio del tempo mele locali - gruppo di applicazioni lastPart locale --last parte aggiunta a snake local firstPart local parts - parts group local current = 0 --un numero assegnato a ciascuna parte

Passaggio 19: dichiarare funzioni

Dichiara tutte le funzioni come Locale all'inizio.

 -- Funzioni locali Main =  local startButtonListeners =  local showCredits =  local hideCredits =  local showGameView =  local gameListeners =  local movePlayer =  local hitTestObjects =  local update = 

Passaggio 20: costruttore

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

 funzione Main () - code ... end

Passaggio 21: Aggiungi vista titolo

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

 function Main () titleBg = display.newImage ('titleBg.png', display.contentCenterX - 100.5, 40.5) playBtn = display.newImage ('playBtn.png', display.contentCenterX - 27, display.contentCenterY + 10) creditsBtn = display.newImage ('creditsBtn.png', display.contentCenterX - 48, display.contentCenterY + 65) titleView = display.newGroup (titleBg, 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 il movimento Snake, il rilevamento delle collisioni e i passaggi finali da eseguire prima della versione dell'app come test, creando una schermata iniziale, aggiungendo un'icona e, infine, creando l'app. Restate sintonizzati per la parte finale!