Crea un gioco di puzzle basato sulla fisica - Aggiunta di interazione

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!


Disponibile anche in questa serie:

  1. Crea un gioco di puzzle basato sulla fisica - Creazione di interfacce
  2. Crea un gioco di puzzle basato sulla fisica - Aggiunta di interazione

Da dove siamo partiti ...

Assicurati di leggere la prima parte del tutorial per capire e preparare completamente questo tutorial.


1. Avvia i pulsanti di ascolto

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

2. Mostra crediti

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

3. Nascondi crediti

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

4. Mostra vista gioco

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)

5. Messaggio di istruzioni

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 )

6. Piano

Questo codice crea un rettangolo nella parte inferiore dello stage da utilizzare come pavimento.

 -- Floor local floor = display.newRect (0, 320, 480, 1)

7. Scatole di livello

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)

palla 8

Questo codice aggiunge la palla al livello.

 -- Ball ball = display.newImage ('ball.png', 234, 138) ball.name = 'palla'

9. Fisica

Qui aggiungiamo fisica al pavimento e alla palla.

 -- Aggiungi fisica physics.addBody (floor, 'static') physics.addBody (ball, 'dynamic', radius = 12) end

10. Aggiungi funzione casella

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

11. Rimuovi la scatola

Questa funzione rimuove la casella di destinazione quando viene toccata.

 funzione removeBox (e) display.remove (e.target) end

12. Collisioni

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

13. Avviso

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

14. Chiamare la funzione principale

Per iniziare il gioco, il Principale la funzione deve essere chiamata. Lo faremo con il seguente codice in atto.

 Principale()

15. Schermata di caricamento

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.


16. Icona

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.


17. Test in Simulator

È 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!


18. Build

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!


Conclusione

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!