Share
Questa è la seconda parte del tutorial del gioco Corona Popping Bubble SDK. Nel tutorial di oggi, aggiungeremo alla nostra interfaccia codificando 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, a 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 + 30)) 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 del titolo viene interpolata e rimossa rivelando la vista di gioco. Ci sono molte parti coinvolte in questa visualizzazione, 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) Successivamente aggiungiamo i muri al palco. Vengono creati utilizzando l'API di disegno.
-- Walls left = display.newLine (0, 240, 0, 720) right = display.newLine (320, 240, 320, 720) top = display.newLine (160, 0, 480, 0) bottom = display.newLine (160 , 480, 480, 480)
Questa parte crea cinque bolle sullo schermo in una posizione casuale.
bubbles = display.newGroup () per i = 1, 5 fa locale rx = 21 + math.floor (math.random () * (display.contentWidth - 42)) local ry = 21 + math.floor (math.random ( ) * (display.contentHeight - 42)) local b = display.newImage ('bubble.png', rx, ry) b.name = 'bubble' Qui aggiungiamo fisica alla nostra nuova bolla.
-- Bubble Physics physics.addBody (b, 'dynamic', radius = 21, bounce = 1) b: setLinearVelocity (100, 100) bubbles: insert (b) end
E fare lo stesso con le nostre mura.
-- Walls Physics.addBody (left, 'static') physics.addBody (right, 'static') physics.addBody (top, 'static') physics.addBody (in basso, 'static')
Ora aggiungiamo il livello, i fumetti e i campi di testo richiesti.
-- Level TextField level = display.newImage ('level.png', 2, 0) levelN = display.newText ('1', 54, 5, native.systemFont, 15) levelN: setTextColor (255, 255, 255) - Popped TextField popped = display.newImage ('popped.png', 126, 0) poppedN = display.newText ('0', 187, 5, native.systemFont, 15) poppedN: setTextColor (255, 255, 255) - Required TextField required = display.newImage ('required.png', 231, 0) requiredN = display.newText ('4', 306, 5, native.systemFont, 15) requiredN: setTextColor (255, 255, 255) punti elenco = display.newGroup () fine Questa funzione aggiunge gli ascoltatori necessari per avviare la logica di gioco.
function gameListeners (action) if (action == 'add') then bg: addEventListener ('tap', createBullets) else bg: removeEventListener ('tap', createBullets) Runtime: removeEventListener ('enterFrame', update) end end Questo codice viene eseguito quando viene toccato lo sfondo.
Per prima cosa creiamo la grafica del proiettile.
function createBullets (e) per i = 1, 4 fa local bullet = display.newImage ('bullet.png', e.x, e.y) Poi gli diamo una direzione impostando la velocità lineare.
-- Imposta direzione se (i == 1) quindi bullet.x = bullet.x - 8 physics.addBody (bullet, 'kinematic', radius = 7) bullet: setLinearVelocity (-150, 0) end --left if ( i == 2) quindi bullet.x = bullet.x + 8 physics.addBody (bullet, 'kinematic', radius = 7) bullet: setLinearVelocity (150, 0) end --right if (i == 3) quindi bullet.y = bullet.y - 8 physics.addBody (bullet, 'kinematic', radius = 7) bullet: setLinearVelocity (0, -150) end --up if (i == 4) then bullet.y = bullet.y + 8 physics.addBody (bullet, 'kinematic', radius = 7) bullet: setLinearVelocity (0, 150) end --down bullet: addEventListener ('collision', onCollision) bullet: insert (bullet) bg: removeEventListener ('tap', createBullets) end Runtime: addEventListener ('enterFrame', update) end Le collisioni vengono gestite dalla funzione successiva. Viene riprodotto un suono, il punteggio aumenta e rimuove la bolla dello schermo.
funzione onCollision (e) if (e.other.name == 'bubble') quindi audio.play (pop) display.remove (e.other) poppedN.text = tostring (tonumber (poppedN.text) + 1) end end
Questo codice rimuoverà qualsiasi proiettile che non è visibile.
aggiornamento della funzione (e) - Verifica la presenza di proiettili fuori campo per i = 1, bullets.numChildren do if (proiettili [i] ~ = nil) poi se (punti [i] .x < 0 or bullets[i].x > 320 o proiettili [i] .y < 0 or bullets[i].y > 480) quindi display.remove (proiettili [i]) end end end
Qui controlliamo se le bolle scoppiettate hanno raggiunto la quantità richiesta e chiamiamo a vincere avviso se è vero.
-- Controllare se sono state scattate bolle richieste se (bullets.numChildren == 0 e tonumber (poppedN.text)> = tonumber (requiredN.text)) quindi alert ('win') elseif (bullets.numChildren == 0 e tonumber (poppedN. testo) < tonumber(requiredN.text)) then alert('lose') end end La funzione di avviso visualizza un messaggio in base al tipo di avviso chiamato (livello completato o non riuscito).
function alert (action) gameListeners ('rmv') if (action == 'win') then local alertView = display.newImage ('won.png', 80, display.contentHeight * 0.5 - 41) transition.from (alertView, time = 300, y = -82, delay = 500) else alertView = display.newImage ('lost.png', 80, display.contentHeight * 0.5 - 41) transition.from (alertView, time = 300, y = -82, delay = 500) 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!
