Benvenuti alla seconda parte del Come far saltare in aria con l'SDK Corona serie di tutorial. In questo tutorial, miglioreremo la nostra app dimostrativa dalla prima parte consentendo all'utente di posizionare sullo schermo una bomba reale con un'esplosione ritardata. Modificheremo l'effetto esplosione perché occasionalmente le casse possano effettivamente esplodere piuttosto che volare via dallo schermo.
Nella parte I di questa serie, abbiamo avuto un'idea di come impostare un ambiente dinamico con la libreria fisica di Corona facile da usare. L'ambiente includeva oggetti statici, come il pavimento, e oggetti dinamici generati a livello di codice come le casse. Un evento tattile dell'utente genererebbe quindi una forza esplosiva che manderebbe in volo le casse. Se non hai ancora letto la parte I, ti suggerisco di farlo prima di continuare. Il lettore dovrebbe avere una certa comprensione dei concetti di fisica essenziale spiegati nella Parte I per essere in grado di comprendere la Parte II.
Iniziamo con un piccolo aggiornamento su come impostiamo il nostro ambiente di fisica nella parte I. Includeremo il nostro set di casse generato a livello di codice che sono impilate e sedute sul nostro pavimento:
fisica locale = require ("fisica") physics.start () physics.setScale (40) display.setStatusBar (display.HiddenStatusBar) - Il parametro "true" finale sovrascrive il ridimensionamento automatico di Corona delle immagini di grandi dimensioni local background = display.newImage ("bricks.png", 0, 0, vero) background.x = display.contentWidth / 2 background.y = display.contentHeight / 2 local floor = display.newImage ("floor.png", 0, 280, true) physics.addBody (floor, "static", friction = 0.5) casse locali = per i = 1, 5 do per j = 1, 5 do crates [i] = display.newImage ("crate.png", 140 + (i * 50), 220 - (j * 50)) physics.addBody (casse [i], densità = 0,2, attrito = 0,1, rimbalzo = 0,5) fine
Tutti i meccanismi del codice di cui sopra sono completamente spiegati nella Parte I del tutorial, quindi controllalo se qualcosa sembra confuso.
Per il nostro primo passo aggiungeremo un piccolo aggiornamento grafico al nostro metodo setBomb. Invece di un evento tattile che genera immediatamente l'esplosione, metteremo una bomba sullo schermo come il suo oggetto fisico:
funzione locale setBomb (evento) if (event.phase == "started") then bombial locale = display.newImage ("bomb.png", event.x, event.y) physics.addBody (bomb, density = 0.2, attrito = 0.1, rimbalzo = 0.5) fine fine background: addEventListener ("touch", setBomb)
Proprio come prima, stiamo aggiungendo un listener di eventi allo sfondo per controllare eventuali eventi touch e attivare il metodo setBomb quando si verifica uno. All'interno del metodo, stiamo isolando qualsiasi attività nella fase "iniziata" dell'evento. Se non isoliamo questa fase, il codice verrà eseguito più volte in quanto gli eventi di tocco hanno molte fasi.
Il metodo setBomb così com'è ora fa molto poco. Carica un bell'aspetto grafico e lo aggiunge allo schermo come oggetto di fisica dinamica. Ora integreremo il nostro metodo di esplosione nel codice come una funzione locale chiamata blast:
cerchia locale = "" esplosione locale = "" esplosione della funzione locale (evento) circle = display.newCircle (bomb.x, bomb.y, 80) explosion = display.newImage ("explosion.png", bomb.x, bomb. y) circle: setFillColor (0,0,0, 0) physics.addBody (circle, "static", isSensor = true) circle.myName = "circle" circle.collision = cerchio onLocalCollision: addEventListener ("collision", cerchio) end blast ()
L'oggetto cerchio qui ci aiuta a calcolare il nostro raggio di esplosione. Stiamo aggiungendo un listener di eventi di collisione per rilevare quale delle casse rientra nella zona dell'esplosione. Inoltre, aggiungiamo un grafico di esplosione allo schermo nella stessa posizione del grafico della bomba una volta che l'esplosione è esplosa.
Se provi a fare il codice a questo punto, noterai che tutto accade molto velocemente e alcuni elementi grafici degli artefatti vengono lasciati indietro. Per renderlo più pieno di suspense, sostituiremo la nostra chiamata di funzione "blast ()" con un timer che ritarderà l'esplosione della bomba di 3 secondi:
timer.performWithDelay (3000, esplosione)
Semplice come quella! La classe timer ha una funzione chiamata performWithDelay () con due parametri: il numero di millisecondi da attendere e il metodo da chiamare. Quindi, in questo caso, i 3000 millisecondi equivalgono a 3 interi secondi di ritardo.
Dato che la bomba esploderà dopo il ritardo di 3 secondi, è necessario rimuovere questo oggetto dallo schermo una volta esplosa l'esplosione. Questo può essere fatto molto facilmente. Tutti gli oggetti presenti sullo schermo sono dotati di una comoda funzione removeSelf (). Una volta che un oggetto si rimuove dallo schermo, il motore di Physics è abbastanza intelligente da poterlo raccogliere e rimuoverlo da tutti i calcoli fisici. Possiamo aggiungere la seguente riga alla fine della funzione esplosione:
bomba: removeSelf ()
Oltre a rimuovere la bomba, rimuoveremo il nostro oggetto raggio di esplosione del cerchio e il grafico dell'esplosione che abbiamo aggiunto per l'effetto. Dal momento che abbiamo bisogno di dare al nostro raggio del raggio di esplosione un po 'di tempo per creare collisioni con le nostre casse, lo rimuoveremo 1/10 di secondo dopo aver chiamato la funzione esplosione. Questo può essere ottenuto sostituendo la nostra chiamata di funzione esplosione a tempo con il seguente codice:
funzione locale removeStuff (event) circle: removeSelf () explosion: removeSelf () end timer.performWithDelay (3000, blast) timer.performWithDelay (3100, removeStuff)
Come puoi vedere, stiamo chiamando la funzione esplosione dopo un ritardo di 3 secondi dal toccare lo schermo come prima. Abbiamo ora aggiunto un'altra chiamata ritardata che viene eseguita 3,1 secondi dopo aver toccato lo schermo che ripulisce i nostri oggetti rimanenti con la funzione removeSelf ().
L'intera funzione che abbiamo creato ora si presenta così:
funzione locale setBomb (evento) if (event.phase == "started") then bombial locale = display.newImage ("bomb.png", event.x, event.y) physics.addBody (bomb, density = 0.2, attrito = 0,1, rimbalzo = 0,5) cerchia locale = "" esplosione locale = "" esplosione della funzione locale (evento) media.playEventSound (explosionSound) circle = display.newCircle (bomb.x, bomb.y, 80) esplosione = display .newImage ("explosion.png", bomb.x, bomb.y) bomb: removeSelf () circle: setFillColor (0,0,0, 0) physics.addBody (circle, "static", isSensor = true) circle.myName = "circle" circle.collision = cerchio onLocalCollision: addEventListener ("collision", circle) end function locale removeStuff (event) circle: removeSelf () esplosione: removeSelf () fine timer.performWithDelay (3000, esplosione) timer. performWithDelay (3100, removeStuff) end-end background: addEventListener ("touch", setBomb)
Nella parte I del nostro tutorial, la nostra funzione di rilevamento delle collisioni assomigliava a questo:
funzione locale onLocalCollision (self, event) if (event.phase == "started" e self.myName == "circle") then forcex locale = event.other.x-self.x local forcey = event.other.y- self.y if (forcex < 0) then forcex = 0-(80 + forcex)-12 else forcex = 80 - forcex+12 end event.other:applyForce( forcex, forcey, self.x, self.y ) end end
Ha semplicemente trovato tutte le casse all'interno del nostro raggio di esplosione e ha applicato una forza per allontanarle dall'epicentro dell'esplosione. Per rendere le cose più interessanti, aggiungeremo una soglia di distruzione alle casse che le farà esplodere se la forza applicata a loro è abbastanza alta. Può essere fatto in questo modo:
se (math.abs (forcex)> 60 o math.abs (forcey)> 60) quindi esplosione locale = display.newImage ("explosion.png", event.other.x, event.other.y) event.other: removeSelf () funzione locale removeExplosion (event) explosion: removeSelf () end timer.performWithDelay (100, removeExplosion) end
Dobbiamo osservare la forza che abbiamo applicato a ciascuna delle casse per rilevare se è superiore a 60. 60 in questo caso in un numero arbitrario basato sul nostro calcolo delle forze. Usiamo la funzione math.abs per ottenere il valore assoluto della forza. Nel nostro esempio, le forze possono essere positive o negative a seconda della direzione della forza applicata. In questo caso non siamo preoccupati per la direzione, vogliamo semplicemente sapere se la forza supera la soglia di 60. Sentiti libero di giocare con questo numero di soglia per cambiare quanto sono deboli o forti le casse.
Nella Parte I, la nostra forza di esplosione è stata calcolata in un modo che ha causato una diminuzione ulteriore di una cassa dall'epicentro dell'esplosione. Quindi le casse che sono più vicine all'epicentro hanno una maggiore probabilità di essere distrutte, e le altre semplicemente voleranno via dallo schermo. Come abbiamo fatto in precedenza con la nostra classe di timer, stiamo visualizzando un grafico di esplosione nella posizione precedente di una cassa distrutta, e quindi lo rimuoviamo dallo schermo 1/10 di secondo dopo. Il metodo di rilevamento collisione finale sarà simile a questo:
funzione locale onLocalCollision (self, event) if (event.phase == "started" e self.myName == "circle") then forcex locale = event.other.x-self.x local forcey = event.other.y- self.y if (forcex < 0) then forcex = 0-(80 + forcex)-12 else forcex = 80 - forcex+12 end event.other:applyForce( forcex, forcey, self.x, self.y ) if(math.abs(forcex) > 60 o math.abs (forza)> 60) quindi esplosione locale = display.newImage ("explosion.png", event.other.x, event.other.y) event.other: removeSelf () funzione locale removeExplosion (evento) explosion: removeSelf () end timer.performWithay (50, removeExplosion) end end end
Come passo finale del nostro tutorial, suoneremo un effetto sonoro esplosivo quando esploderà la nostra bomba. Come tutto il resto in Corona, è sorprendentemente semplice farlo. Inizieremo includendo la libreria multimediale nella parte superiore del nostro progetto e pre-caricando il nostro file audio:
media locale = require ("media") local explosionSound = media.newEventSound ("explosion.mp3")
Per suonare il suono aggiungeremo la seguente linea alla nostra funzione blast () che si trova nella nostra funzione setBomb ():
funzione locale scoppio (evento) media.playEventSound (explosionSound)? fine
Ora ogni volta che viene chiamata la funzione blast (), utilizzerà la funzione playEventSound dal media library per riprodurre il nostro file sonoro "explosion.mp3". Non potrebbe essere più semplice se ci provassimo!
E lì ce l'abbiamo! Ora abbiamo un esempio più completo di quanto sia facile creare esplosioni nella piattaforma Corona. Sentiti libero di scaricare le zip per la Parte I e II del tutorial e giocare!