Share
Questa è la seconda puntata del nostro tutorial Corona SDK Air Hockey Game. Nel tutorial di oggi, aggiungeremo alla nostra interfaccia e codificheremo l'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 playBtn: addEventListener ('tap', showGameView) creditsBtn: addEventListener ('tap', showCredits) else playBtn: removeEventListener ('tap', showGameView) creditsBtn: removeEventListener ( 'tocca', mostraCrediti) fine La schermata dei crediti viene visualizzata quando l'utente tocca il pulsante about. UN rubinetto l'ascoltatore viene aggiunto alla vista dei crediti per rimuoverlo.
function showCredits: tap (e) playBtn.isVisible = false creditsBtn.isVisible = false creditsView = display.newImage ('credits.png', 0, display.contentHeight) lastY = titleBg.y transition.to (titleBg, time = 300 , y = (display.contentHeight * 0.5) - (titleBg.height + 50)) transition.to (creditsView, time = 300, y = (display.contentHeight * 0.5) + 35, 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) transition.to (creditsView, time = 300, y = display.contentHeight + 25, onComplete = function () creditsBtn.isVisible = true playBtn.isVisible = true creditsView: removeEventListener ('tap', hideCredits display.remove (creditsView) creditsView = nil end) transition.to (titleBg, time = 300, y = lastY); fine Quando il Inizio Tocca il pulsante, la vista 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) Qui creiamo 6 linee che verranno utilizzate come pareti del tavolo.
-- Pareti a sinistra = display.newLine (-1, display.contentHeight * 0.5, -1, display.contentHeight * 2) right = display.newLine (display.contentWidth + 1, display.contentHeight * 0.5, display.contentWidth + 1, display .contentHeight * 2) topLeft = display.newLine (0, -1, display.contentWidth - 120, -1) topRight = display.newLine (display.contentWidth, -1, display.contentWidth * 1.6, -1) bottomLeft = display .newLine (0, display.contentHeight, display.contentWidth - 120, display.contentHeight) bottomRight = display.newLine (display.contentWidth, display.contentHeight, display.contentWidth * 1.6, display.contentHeight)
Questo codice posiziona lo sfondo del gioco sul palco.
-- Game Bg gameBg = display.newImage ('gameBg.png') Aggiungi la paddle Player con il prossimo codice:
-- Player player = display.newImage ('paddle1.png', display.contentCenterX-25, display.contentHeight-100) La paletta del nemico è creata da questa linea:
-- Nemico nemico = display.newImage ('paddle2.png', display.contentCenterX-25, 10) Successivamente aggiungiamo i punteggi TextField per utilizzarli in seguito.
-- Scores enemyScore = display.newText ('0', 289, 206, 'Courier-Bold', 20) enemyScore: setTextColor (227, 2, 2) playerScore = display.newText ('0', 289, 240, 'Courier- Bold ', 20) playerScore: setTextColor (227, 2, 2) Questo è il disco, apparirà al centro del palco.
-- Puck puck = display.newImage ('puck.png', display.contentCenterX-20, display.contentCenterY-20) Infine, aggiungiamo la fisica agli elementi grafici. Impostiamo anche una proprietà Puck su false per impedirne la rotazione.
-- Imposta fisica physics.addBody (left, 'static') physics.addBody (right, 'static') physics.addBody (topLeft, 'static') physics.addBody (bottomLeft, 'static') physics.addBody (topRight, 'static ') physics.addBody (bottomRight,' static ') physics.addBody (puck,' dynamic ', radius = 20, bounce = 0.4) puck.isFixedRotation = true physics.addBody (player,' dynamic ', radius = 25) physics.addBody (nemico, 'statico', raggio = 25) gameListeners ('add') end La prossima funzione gestisce il trascinamento del giocatore.
Utilizza un metodo diverso rispetto ai tutorial precedenti poiché vogliamo trascinare l'oggetto senza perdere le sue interazioni fisiche. Puoi leggere maggiori informazioni sul sito web di Corona.
function dragBody (event) gameUI.dragBody (event, maxForce = 20000, frequency = 10, dampingRatio = 0.2, center = true) end
Questa funzione aggiunge gli ascoltatori necessari per avviare la logica di gioco.
function gameListeners (action) if (action == 'add') then player: addEventListener ('touch', dragBody) Runtime: addEventListener ('enterFrame', update) timerSrc = timer.performWithDelay (100, moveEnemy, 0) altro player: removeEventListener ('touch', dragBody) Runtime: removeEventListener ('enterFrame', update) timer.cancel (timerSrc) timerSrc = nil end end Un Timer è usato per muovere il nemico, questo creerà un ritardo permettendo al nemico di perdere il colpire il disco.
function moveEnemy (e) - Move Enemy if (puck.y < display.contentHeight * 0.5) then transition.to(enemy, time = 300, x = puck.x) end end
La funzione di aggiornamento esegue ogni frame.
Questa parte del codice controlla se il disco ha lasciato il palco attraverso lo spazio in cui non sono stati aggiunti muri. Se è vero, aumenta il campo di testo del punteggio appropriato.
function update () - Punteggio if (puck.y> display.contentHeight) then enemyScore.text = tostring (tonumber (enemyScore.text) + 1) elseif (puck.y < -5) then playerScore.text = tostring(tonumber(playerScore.text) + 1) end
Queste linee ripristinano la posizione del disco quando lascia il palco e suonano un obiettivo.
-- Ripristina posizione Puck se (puck.y> display.contentHeight o puck.y < -5) then puck.x = display.contentCenterX puck.y = display.contentCenterY puck.isAwake = false audio.play(bell) end
Qui impediamo alla paletta del giocatore di entrare nella parte nemica del palco.
-- Tieni la pagaia sul lato giocatore se (player.y < display.contentWidth - 60) then player.y = display.contentWidth - 60 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 compilatore 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 simulatore Corona, 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!
