Share
Questa è la seconda puntata del nostro tutorial Corona SDK Lunar Lander. Nel tutorial di oggi, aggiungeremo alla nostra interfaccia e all'interazione del gioco. Continuare a leggere!
Assicurati di controllare la parte 1 della serie per comprendere appieno e preparare questo tutorial.
Questa funzione aggiunge gli ascoltatori necessari al TitleView pulsanti:
Accentsconagua
function startButtonListeners (action) if (action == 'add') then titleBg: addEventListener ('tap', showGameView) creditsBtn: addEventListener ('tap', showCredits) else titleBg: removeEventListener ('tap', showGameView) creditsBtn: removeEventListener ( 'tocca', mostraCrediti) fine La schermata dei crediti viene visualizzata quando l'utente tocca il pulsante about, a rubinetto l'ascoltatore viene aggiunto alla vista dei crediti per rimuoverlo.
function showCredits: tap (e) creditsBtn.isVisible = false creditsView = display.newImage ('credits.png', -130, display.contentHeight-140) transition.to (creditsView, time = 300, x = 65, onComplete = function () creditsView: addEventListener ('tap', hideCredits) end) end Quando viene toccato lo schermo dei crediti, verrà rimosso dal palco e rimosso.
function hideCredits: tap (e) creditsBtn.isVisible = true transition.to (creditsView, time = 300, y = display.contentHeight + creditsView.height, onComplete = function () creditsView: removeEventListener (visualizzazione 'tap', hideCredits). remove (creditsView) creditsView = nil end) end
Quando il Inizio Tocca il pulsante, la vista del titolo viene interpolata e rimossa rivelando la vista di gioco. Ci sono molte parti coinvolte in questa vista, quindi le suddivideremo nei passaggi successivi.
function showGameView: tap (e) transition.to (titleView, time = 300, x = -titleView.height, onComplete = function () startButtonListeners ('rmv') display.remove (titleView) titleView = nil end) Questo codice posiziona le lune sul palco.
-- Lune m1 = display.newImage ('moon.png', 386, 156) m2 = display.newImage ('moon.png', 252, 99) m3 = display.newImage ('moon.png', 131, 174) m1 .name = 'moon' m2.name = 'moon' m3.name = 'moon' Una luna più grande è usata come punto di atterraggio. Usa il prossimo codice per posizionarlo:
-- Big Moon bigM = display.newImage ('moonBig.png', 10, 53) bigM.name = 'moon' Il punto di atterraggio è rappresentato da un grafico a freccia. Viene creata una proprietà name per aiutare a identificare questi elementi quando si verifica una collisione.
-- Arrow arrow = display.newImage ('arrow.png', 44, 24) arrow.name = 'goal' Successivamente, aggiungiamo il razzo. Questo sarà il nostro elemento controllato dall'utente.
-- Rocket rocket = display.newImage ('rocket.png', 409,5, 114) Il seguente codice posizionerà le stelle sullo schermo:
-- Stelle s1 = display.newImage ('star.png', 341, 146) s2 = display.newImage ('star.png', 273, 48) s3 = display.newImage ('star.png', 190, 234) s4 = display.newImage ('star.png', 37, 135) s1.name = 'stella' s2.name = 'stella' s3.name = 'stella' s4.name = 'stella' Per spostare il missile sullo schermo avremo bisogno di un game pad, questo codice si prenderà cura di questo. UN rubinetto l'ascoltatore verrà aggiunto in seguito a ciascun pulsante per gestire il movimento.
-- Controlla up = display.newImage ('dirBtn.png', 404, 246) left = display.newImage ('dirBtn.png', 10, 246) right = display.newImage ('dirBtn.png', 84, 246) up .name = 'su' left.name = 'left' right.name = 'right' up.rotation = 90 right.rotation = 180 Qui aggiungiamo la fisica agli elementi grafici.
-- Aggiungi fisica physics.addBody (m1, 'static', radius = 35) physics.addBody (m2, 'static', radius = 35) physics.addBody (m3, 'static', raggio = 35) physics.addBody (bigM, 'static', radius = 40) physics.addBody (freccia, 'static') physics.addBody (razzo, 'dynamic') rocket.isFixedRotation = true rocket.isAwake = false --prevents iniziale explosion sound physics.addBody (s1, 'static', radius = 12) physics.addBody (s2, 'static', radius = 12) physics.addBody (s3, 'static', raggio = 12) physics.addBody (s4, 'static', radius = 12) arrow.isSensor = true s1.isSensor = true s2.isSensor = true s3.isSensor = true s4.isSensor = true
Questa funzione aggiunge gli ascoltatori necessari per avviare la logica di gioco.
function gameListeners () su: addEventListener ('touch', movePlayer) a sinistra: addEventListener ('touch', movePlayer) a destra: addEventListener ('touch', movePlayer) Runtime: addEventListener ('enterFrame', aggiornamento) razzo: addEventListener ('collisione ', onCollision) fine La variabile di direzione viene cambiata da questa funzione, questo farà andare il razzo nella direzione premuta.
function movePlayer (e) if (e.phase == 'started' e e.target.name == 'up') then dir = 'up' elseif (e.phase == 'ended' e e.target.name = = 'su') then dir = 'none' elseif (e.phase == 'started' e e.target.name == 'left') then dir = 'left' elseif (e.phase == 'begin' e e.target.name == 'right') then dir = 'right' elseif (e.phase == 'ended' e e.target.name == 'left') then dir = 'none' elseif (e.phase == 'ended' e e.target.name == 'right') then dir = 'none' end end
Queste linee muovono il razzo secondo la direzione stabilita dal moveplayer funzione creata nel passaggio 13.
aggiornamento della funzione (e) - Movimento del razzo if (dir == 'up') quindi razzo: setLinearVelocity (0, -80) elseif (dir == 'left') quindi razzo: setLinearVelocity (-100, 0) elseif (dir == 'right') quindi razzo: setLinearVelocity (100, 0) end
Il prossimo codice ascolta una variabile impostata su true quando si verifica una collisione tra il razzo e una luna, il valore della variabile viene modificato dal onCollision funzione che verrà creata in seguito.
Quando è vero, il razzo sarà posto nella sua posizione originale e messo in uno stato di sonno per evitare una collisione con la luna sotto di esso.
-- Rocket-Moon Collision if (hitMoon) poi rocket.x = 421.5 rocket.y = 134 hitMoon = false rocket.isAwake = false end
Un metodo simile è utilizzato nel rilevamento delle collisioni con razzo-stella.
-- Rocket-Star Collision if (hitStar) then display.remove (starHit) stars = stars + 1 hitStar = false end
Il livello sarà completo quando il giocatore ha raccolto le quattro stelle e atterra sulla luna più grande. Il seguente codice lo gestisce.
-- Obiettivo se (hitGoal e stelle == 4) quindi razzo.x = 52 razzo.y = 35 physics.stop () display.remove (freccia) audio.play (obiettivo) hitGoal = false complete = display.newImage ('completo. png ') elseif (hitGoal e stars ~ = 4) then hitGoal = false end Questa funzione viene eseguita quando il razzo si scontra con un altro corpo. Il nome del corpo viene quindi controllato per eseguire l'azione corretta. Fondamentalmente, viene riprodotto un suono e una variabile è impostata su true (per il aggiornare funzione da vedere) in base al nome dell'altro corpo.
function onCollision (e) if (e.other.name == 'moon') then hitMoon = true audio.play (explo) elseif (e.other.name == 'star') quindi audio.play (star) starHit = e.other hitStar = true elseif (e.other.name == 'goal') then hitGoal = true end end
Per iniziare il gioco, il Principale la funzione deve essere chiamata. Con il codice sopra riportato, lo faremo qui:
Principale()
Il file Default.png è un'immagine che verrà visualizzata quando si avvia l'applicazione mentre iOS carica i dati di base per mostrare la schermata principale. Aggiungi questa immagine alla cartella sorgente del progetto, verrà automaticamente aggiunta dal complino Corona.
Usando la grafica che hai creato prima ora puoi creare un'icona carina e di bell'aspetto. La dimensione dell'icona per l'icona dell'iPhone non retina è 57x57px, ma la versione retina è 114x114px e lo store iTunes richiede una versione 512x512px. Suggerisco di creare prima la versione 512x512 e poi ridimensionarla per le altre dimensioni.
Non è necessario avere gli angoli arrotondati o il bagliore trasparente, iTunes e l'iPhone lo faranno per te.
È tempo di fare il test finale. Apri il simulatore Corona, vai alla cartella del progetto, quindi fai clic su apri. Se tutto funziona come previsto, sei pronto per il passaggio finale!
Nel Corona Simulator vai a File> Crea e seleziona il tuo dispositivo di destinazione. Compila i dati richiesti e clicca costruire. Attendi qualche secondo e la tua app sarà pronta per il test del dispositivo e / o l'invio per la distribuzione!
Sperimenta il risultato finale e prova a creare la tua versione personalizzata del gioco!
Spero ti sia piaciuta questa serie di tutorial e la trovi utile. Grazie per aver letto!
