Questa è la seconda puntata del nostro tutorial sui puzzle di fisica Corona SDK. Nel tutorial di oggi, aggiungeremo alla nostra interfaccia e all'interazione del gioco. Continuare a leggere!
Assicurati di leggere la prima parte del tutorial per capire e preparare completamente questo tutorial.
Questa funzione aggiunge gli ascoltatori necessari a TitleView pulsanti.
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 di pulsante. 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', -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) playBtn.isVisible = true creditsBtn.isVisible = true transition.to (creditsView, time = 300, y = display.contentHeight + creditsView.height, onComplete = function () creditsView: removeEventListener ('tap' , hideCredits) display.remove (creditsView) creditsView = nil end) end
Quando il giocare Tocca il pulsante, la vista titolo viene interpolata e rimossa per mostrare la vista di gioco. Ci sono molte parti coinvolte in questa visualizzazione, quindi le suddivideremo nel passaggio successivo.
function showGameView: tap (e) transition.to (titleView, time = 300, x = -titleView.height, onComplete = function () startButtonListeners ('rmv') display.remove (titleView) titleView = nil end)
Le seguenti righe aggiungono il messaggio di istruzioni. Lo mostreremo per due secondi e poi lo spegneremo.
-- Istruzioni Messaggio local ins = display.newImage ('ins.png', 32, 182) transition.from (ins, time = 200, alpha = 0.1, onComplete = function () timer.performWithDelay (2000, function () transition. a (ins, time = 200, alpha = 0.1, onComplete = function () display.remove (ins) ins = nil end) end) end) lvlImg = display.newImage ('level.png', 202, 2 )
Questo codice crea un rettangolo nella parte inferiore dello stage da utilizzare come pavimento.
-- Floor local floor = display.newRect (0, 320, 480, 1)
Questa parte gestisce la creazione del livello. Inizia creando le scatole sul palco. Impareremo di più su questa funzione nei prossimi passaggi.
-- Scatole di livello addBox ('g', 60, 272) addBox ('s', 148, 284) addBox ('s', 148, 248) addBox ('s', 148, 212) addBox ('s', 148, 176) addBox ('n', 297, 272) addBox ('n', 297, 224) addBox ('n', 297, 176) addBox ('w', 148, 164)
Questo codice aggiunge la palla al livello.
-- Ball ball = display.newImage ('ball.png', 234, 138) ball.name = 'palla'
Qui aggiungiamo fisica al pavimento e alla palla.
-- Aggiungi fisica physics.addBody (floor, 'static') physics.addBody (ball, 'dynamic', radius = 12) end
La funzione successiva utilizza tre parametri per creare un oggetto casella. È possibile specificare il tipo di box nel primo parametro e la sua posizione nei due successivi. Con questo metodo è possibile creare livelli complessi utilizzando solo poche righe di codice. Aggiungerà fisica alla nuova casella e anche a un ascoltatore di tocchi.
function addBox (type, X, Y) local b = display.newImage (tipo ... 'Box.png', X, Y) physics.addBody (b, 'dynamic') if (tipo ~ = 'g') then b: addEventListener ('tap', removeBox) elseif (type == 'g') then b: addEventListener ('collision', onCollision) end end
Questa funzione rimuove la casella di destinazione quando viene toccata.
funzione removeBox (e) display.remove (e.target) end
Useremo questo codice per vedere se la palla si scontra con la casella obiettivo e chiamare un avviso se è vero.
function onCollision (e) if (e.other.name == 'ball') then display.remove (ball) alert () end end
La funzione di avviso crea una vista di avviso, la anima e termina la partita.
function alert (action) gameListeners ('rmv') if (action == 'lose') then alertView = display.newImage ('lose.png', 110, 218) else alertView = display.newImage ('win.png', 110, 218) end transition.from (alertView, time = 200, alpha = 0.1) end
Per iniziare il gioco, il Principale la funzione deve essere chiamata. Lo faremo con il seguente codice in atto.
Principale()
Il Default.png file è un'immagine che verrà visualizzata proprio quando si avvia l'applicazione. Verrà aggiunto automaticamente dal compilatore Corona quando lo aggiungi alla cartella di origine del progetto.
Usando la grafica creata in precedenza, puoi creare una bella icona. La dimensione dell'icona per l'icona dell'iPhone non retina è 57x57px, ma la versione della retina è 114x114px e il negozio iTunes richiede a 512x512px versione. Suggerisco di creare il 512x512 prima versione e ridimensionamento per le altre dimensioni.
Non ha bisogno di avere angoli arrotondati o un bagliore trasparente. iTunes e l'iPhone lo faranno per te.
È tempo di fare il test finale. Apri il simulatore Corona, vai alla cartella del tuo progetto e 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 l'invio per la distribuzione!
In questa serie abbiamo imparato a conoscere il comportamento della fisica, a toccare gli ascoltatori e le collisioni. Queste sono abilità che possono essere davvero utili in un ampio numero di giochi.
Sperimenta il risultato finale e prova a creare la tua versione personalizzata del gioco!
Spero che questa serie ti sia piaciuta e l'ho trovata utile. Grazie per aver letto!