Crea un gioco di combattimento aereo in Corona Interface

Cosa starai creando

introduzione

In questa breve serie, ti mostrerò come creare un gioco di combattimento aereo che ricorda il vecchio gioco arcade del 1942. Lungo la strada, imparerai la funzionalità dello storyboard di Corona, i timer, lo spostamento di un personaggio e un po 'di trigonometria.

La grafica utilizzata in questo tutorial è stata creata da Ari Feldman e fornita con la Common Public License, il che significa che sono liberi di usare. Assicurati di controllare SpriteLib di Ari Feldman. Iniziamo.

1. Nuovo progetto

Aprire il simulatore Corona, fare clic Nuovo progetto, e configurare il progetto come mostrato di seguito. Seleziona una posizione per salvare il tuo progetto e clicca ok. Questo creerà una cartella con un numero di icone e tre file che sono importanti per noi, main.lua, config.lua, e build.settings. Daremo un'occhiata a ciascun file nei prossimi passaggi.

2. Build.Settings

Il build.settings il file è responsabile delle proprietà del tempo di costruzione del progetto. Apri questo file, rimuovi il suo contenuto e compilalo con il seguente frammento di codice.


settings = orientation = default = "portrait", supportato = "portrait",,

Nel build.settings, stiamo impostando l'orientamento predefinito e limitando l'applicazione per supportare solo un orientamento verticale. Puoi scoprire quali altre impostazioni puoi includere build.settings esplorando la documentazione Corona.

3. Config.lua

Il config.lua il file gestisce la configurazione dell'applicazione. Come abbiamo fatto con build.settings, apri questo file, rimuovi il suo contenuto e aggiungi il seguente codice.


application = content = width = 768, height = 1024, scale = "letterbox", fps = 30,

Questo imposta la larghezza e l'altezza predefinite dello schermo, utilizza letterbox per ridimensionare le immagini e imposta i fotogrammi al secondo 30.

Puoi scoprire quali altre proprietà puoi impostare config.lua controllando la documentazione Corona.

4. Main.lua

Il main.lua file è il file che l'applicazione carica per primo e utilizza per avviare l'applicazione. Useremo main.lua per impostare alcune impostazioni predefinite per l'applicazione e il storyboard modulo per caricare la prima schermata.

Se non hai familiarità con il modulo Corona's Storyboard, allora ti consiglio di dare una lettura veloce alla Documentazione. In breve, Storyboard è la soluzione integrata per creare e gestire scene ("schermi") in Corona. Questa libreria offre agli sviluppatori un modo semplice per creare e passare da una scena all'altra.

5. Nascondi barra di stato

Non vogliamo che la barra di stato mostri nella nostra applicazione. Aggiungi il seguente snippet di codice a main.lua per nascondere la barra di stato.


display.setStatusBar (display.HiddenStatusBar)

6. Imposta punti di ancoraggio predefiniti

Per impostare l'ancoraggio predefinito (punti di registrazione), aggiungere quanto segue a main.lua.

display.setDefault ("anchorX", 0) display.setDefault ("anchorY", 0)

Il anchorX e anchorY le proprietà specificano dove si desidera che sia il punto di registrazione degli oggetti di visualizzazione. Si noti che il valore varia da 0.0 a 1.0. Ad esempio, se desideri che il punto di registrazione sia il centro dell'oggetto di visualizzazione, devi impostare entrambe le proprietà su 0.5.

7. Generatore casuale di semi

Il nostro gioco userà Lua's Math.random funzione per generare numeri casuali. Per assicurarsi che i numeri siano veramente casuali ogni volta che si esegue l'applicazione, è necessario fornire un valore di inizializzazione. Se non si fornisce un valore di inizializzazione, l'applicazione genererà la stessa casualità ogni volta.

Un buon valore di seme è Lua's os.time funzione poiché sarà diversa ogni volta che viene eseguita l'applicazione. Aggiungi il seguente snippet di codice a main.lua.

math.randomseed (os.time ()) 

8. Richiedi Storyboard

Prima di poter utilizzare il modulo Storyboard, dobbiamo prima richiedercelo. Aggiungi il seguente a main.lua.

storyboard locale = richiede "storyboard"

9. Caricamento della schermata iniziale

Inserisci il seguente snippet di codice sotto la riga in cui hai richiesto il modulo Storyboard.

storyboard.gotoScene ("start")

Questo farà andare l'applicazione sullo schermo chiamato inizio, che è anche un file Lua, start.lua. Non è necessario aggiungere l'estensione del file quando si chiama il gotoScene funzione.

10. Schermata iniziale

Crea un nuovo file Lua chiamato start.lua nella directory principale del progetto. Questo sarà un file storyboard, il che significa che è necessario richiedere il modulo Storyboard e creare una scena storyboard. Aggiungi il seguente snippet a start.lua.

storyboard locale = require ("storyboard") local scene = storyboard.newScene ()
La chiamata a newScene fa start.lua parte dello storyboard dell'applicazione. Ciò significa che diventa uno schermo all'interno del gioco, sul quale possiamo chiamare i metodi dello storyboard.

11. Variabili locali

Abbiamo solo bisogno di una variabile locale, pulsante Start, nella parte principale di start.lua. Questa variabile locale viene utilizzata per fare riferimento al pulsante di avvio in questa scena.

startbutton locale 

È importante capire che le variabili locali nel blocco principale vengono richiamate una sola volta, quando la scena viene caricata per la prima volta. Durante la navigazione attraverso lo storyboard, ad esempio, invocando metodi come gotoScence, le variabili locali saranno già inizializzate.

Questo è importante da ricordare se si desidera reinizializzare le variabili locali quando si ritorna a una determinata scena. Il modo più semplice per farlo è rimuovere la scena dallo storyboard chiamando il removeScence metodo. La prossima volta che navigherai su quella scena, verrà automaticamente ricaricata. Questo è l'approccio che seguiremo in questo tutorial.

12. Eventi Storyboard

Se hai avuto il tempo di leggere la Documentazione sugli storyboard a cui mi sono collegato in precedenza, avrai notato che la documentazione include un modello che contiene ogni possibile evento dello storyboard. I commenti sono molto utili in quanto indicano quali eventi sfruttare per inizializzare risorse, timer, ecc.

Il modello può sembrare un po 'opprimente all'inizio. Tuttavia, per questo tutorial, ci interessano solo tre eventi, createSceneenterScene, e exitScene.

13. Crea scena

Aggiungi il seguente a snippet a start.lua.

scena della funzione: createScene (evento) local group = self.view local background = display.newRect (0, 0, display.contentWidth, display.contentHeight) background: setFillColor (0, .39, .75) gruppo: insert (background) local bigplane = display.newImage ("bigplane.png", 0,0) gruppo: insert (bigplane) startbutton = display.newImage ("startbutton.png", 264,670) gruppo: insert (startbutton) end

Questo metodo viene chiamato quando la vista della scena non esiste ancora. Qui è dove devi inizializzare gli oggetti di visualizzazione e aggiungerli alla scena. Il gruppo la variabile sta puntando a self.view, il quale è un GroupObject per l'intera scena.

Quindi disegniamo un rettangolo per lo sfondo. Corona di Display oggetto viene fornito con alcuni metodi di disegno, come newCircle, nuova linea, e, come mostrato nello snippet precedente, newRect. Invochiamo anche SetFillColor per dare al rettangolo un colore bluastro. I parametri che passiamo sono percentuali.

Inseriamo quindi il sfondo nel gruppo. È importante inserire oggetti di visualizzazione nel gruppo della vista per assicurarsi che vengano rimossi quando viene rimossa la vista principale. Infine, crea il pulsante di avvio e aggiungilo anche al gruppo. Il display l'oggetto ha il nuova immagine metodo, che prende come parametri il percorso dell'immagine e il X e y valori per la posizione dell'immagine sullo schermo.

14. Entra in scena

Il enterScene il metodo viene chiamato immediatamente dopo lo spostamento della scena sullo schermo. Qui puoi aggiungere i listener di eventi, avviare i timer, caricare l'audio, ecc. Aggiungere il seguente snippet sotto il codice aggiunto nel passaggio precedente.


scena della funzione: enterScene (evento) startbutton: addEventListener ("tap", startGame) end

Nel enterScene, stiamo aggiungendo un listener di eventi al pulsante Start, che chiamerà il inizia il gioco funzione quando gli utenti toccano il pulsante di avvio.

15. Esci dalla scena

Il exitScene il metodo viene chiamato quando la scena sta per spostarsi fuori dallo schermo. Questo è dove vuoi disfare qualunque cosa tu abbia impostato nel enterScene metodo, come rimuovere i listener di eventi, fermare i timer, scaricare l'audio, ecc. Aggiungere il seguente snippet sotto il codice aggiunto nel passaggio precedente.

function scene: exitScene (evento) startbutton: removeEventListener ("tap", startGame) end

Tutto ciò che facciamo nel exitScene metodo sta rimuovendo il listener di eventi che abbiamo aggiunto al pulsante Start.

16. Inizia partita

Il inizia il gioco la funzione è semplice Ha lo storyboard caricare il gamelevel scena.

function startGame () storyboard.gotoScene ("gamelevel") fine

17. Aggiunta di ascoltatori alla scena

Avendo aggiunto il createScene, enterScene, e exitScene metodi, dobbiamo registrare la scena per ascoltare questi eventi. Inserisci il seguente frammento di codice per farlo.

scena: addEventListener (scena "createScene", scena): addEventListener (scena "enterScene", scena): addEventListener ("exitScene", scena)

18. Restituisci la scena

L'ultima cosa che devi assicurarti di fare in uno storyboard è restituire la scena, perché è un modulo.

scena di ritorno

19. Aggiunta della scena GameLevel

Prima di poter testare i nostri progressi, dobbiamo aggiungere il gamelevel scena. Creare un nuovo file Lua nella directory principale del progetto e nominarlo gamelevel.lua. Aggiungi il seguente snippet di codice al file appena creato.

storyboard locale = require ("storyboard") scena locale = storyboard.newScene () restituisce la scena

Come abbiamo visto in precedenza, prima richiediamo il modulo storyboard, creiamo una nuova scena e restituiamo la scena. Il gamelevel scena è la scena in cui implementeremo il gameplay del gioco.

Conclusione

Questo porta alla conclusione la prima parte di questa serie. Nella parte successiva di questa serie, inizieremo ad implementare il gameplay del gioco. Grazie per la lettura e ci vediamo lì.