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.
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.
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.
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.
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.
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)
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
.
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 ())
Prima di poter utilizzare il modulo Storyboard, dobbiamo prima richiedercelo. Aggiungi il seguente a main.lua.
storyboard locale = richiede "storyboard"
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.
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.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.
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, createScene
, enterScene
, e exitScene
.
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.
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.
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
.
Il inizia il gioco
la funzione è semplice Ha lo storyboard caricare il gamelevel scena.
function startGame () storyboard.gotoScene ("gamelevel") fine
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)
L'ultima cosa che devi assicurarti di fare in uno storyboard è restituire la scena, perché è un modulo.
scena di ritorno
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.
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ì.