Share
Questa è la seconda puntata del nostro tutorial Corona SDK Pinball Game. Nel tutorial di oggi, aggiungeremo alla nostra interfaccia e quindi codificheremo l'interazione del gioco. Continuare a leggere!
Assicurati di controllare la parte 1 della serie per comprendere appieno e preparare questo tutorial.
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 prossimi passaggi.
Accentsconagua
function showGameView: tap (e) transition.to (titleView, time = 300, x = -titleView.height, onComplete = function () startButtonListeners ('rmv') display.remove (titleView) titleView = nil end) Qui posizioniamo il muro di sinistra, ricordiamoci che è stato diviso in parti per applicare la fisica più tardi.
-- Parti del muro sinistro l1 = display.newImage ('l1.png') l2 = display.newImage ('l2.png', 0, 214) l3 = display.newImage ('l3.png', 0, 273) l4 = display .newImage ('l4.png', 0, 387) Questo codice posiziona la parete destra usando lo stesso metodo.
-- Parti del muro destro r1 = display.newImage ('r1.png', 238, 0) r2 = display.newImage ('r2.png', 274, 214) r3 = display.newImage ('r3.png', 291, 273 ) r4 = display.newImage ('r4.png', 195, 387) Aggiungi la palla e HitLines con il prossimo codice:
ball = display.newImage ('ball.png', display.contentWidth * 0.5, 0) hitLine1 = display.newImage ('hitLine.png', 70, 28) hitLine2 = display.newImage ('hitLine.png', 110, 28) Gli obiettivi vengono aggiunti utilizzando le seguenti righe:
-- Hit balls hitBall1 = display.newImage ('hitBall.png', 160, 186) hitBall2 = display.newImage ('hitBall.png', 130, 236) hitBall3 = display.newImage ('hitBall.png', 187, 236) hitBall1.name = 'hBall' hitBall2.name = 'hBall' hitBall3.name = 'hBall' Successivamente aggiungiamo i paddle e diamo loro un nome per usarlo in seguito.
pLeft = display.newImage ('paddleL.png', 74, 425) pRight = display.newImage ('paddleR.png', 183, 425) pLeft.name = 'leftPaddle' pRight.name = 'rightPaddle' Questi pulsanti controllano i paddle, aggiungili usando questo codice:
lBtn = display.newImage ('lBtn.png', 20, 425) rBtn = display.newImage ('rBtn.png', 260, 425) lBtn.name = 'left' rBtn.name = 'right' Infine, aggiungiamo il campo di testo del punteggio.
-- Punteggio TextField score = display.newText ('0', 2, 0, 'Marker Felt', 14) punteggio: setTextColor (255, 206, 0) 
Probabilmente ti starai chiedendo perché abbiamo aggiunto le pareti in parti. Dato che stiamo eseguendo collisioni perfette con pixel su di loro, non possiamo semplicemente usare il ADDBODY metodo (dato che questo aggiungerà una casella che copre anche il canale alfa), invece usiamo il forma parametro per definire un poligono per l'immagine.
Perché non un singolo poligono?
Il parametro shape accetta solo convesso forme e un massimo di 8 lati, il nostro muro non è né l'uno né l'altro, quindi lo abbiamo semplicemente diviso in pezzi.
-- Parti della parete di sinistra physics.addBody (l1, 'static', shape = -40, -107, -11, -107, 40, 70, 3, 106, -41, 106) physics.addBody (l2, 'static', shape = -23, -30, 22, -30, 22, 8, 6, 29, -23, 29) physics.addBody (l3, 'static', shape = -14 , -56, 14, -56, 14, 56, -14, 56) physics.addBody (l4, 'static', shape = -62, -46, -33, -46, 61, 45, -62, 45) - Parti della parete destra physics.addBody (r1, 'statico', forma = 10, -107, 39, -107, 40, 106, -5, 106, -41, 70 ) physics.addBody (r2, 'static', shape = -22, -30, 22, -30, 22, 29, -6, 29, -23, 9) physics.addBody (r3, ' static ', shape = -14, -56, 14, -56, 14, 56, -14, 56) physics.addBody (r4,' static ', shape = 32, -46, 61, -46, 61, 45, -62, 45)
Metodi simili sono usati con le altre forme, ad eccezione dei cerchi che usano il raggio parametro.
physics.addBody (ball, 'dynamic', radius = 8, bounce = 0.4) physics.addBody (hitLine1, 'static', shape = -20, -42, -15, -49, -6, - 46, 18, 39, 15, 44, 5, 44,) physics.addBody (hitLine2, 'static', shape = -20, -42, -15, -49, -6, -46, 18 , 39, 15, 44, 5, 44,) physics.addBody (hitBall1, 'static', radius = 15) physics.addBody (hitBall2, 'static', radius = 15) physics.addBody ( hitBall3, 'static', radius = 15) physics.addBody (pRight, 'static', shape = -33, 11, 27, -12, 32, 1) physics.addBody (pLeft, 'static ', shape = -33, 1, -28, -12, 32, 11))
Una linea semplice viene aggiunta alla parte superiore dello schermo come un muro per far rimbalzare la palla.
-- Top Wall local topWall = display.newLine (display.contentWidth * 0.5, -1, display.contentWidth * 2, -1) physics.addBody (topWall, 'static')
Questa funzione aggiunge gli ascoltatori necessari per avviare la logica di gioco.
function gameListeners (action) if (action == 'add') then lBtn: addEventListener ('touch', movePaddle) rBtn: addEventListener ('touch', movePaddle) ball: addEventListener ('collision', onCollision) Runtime: addEventListener (' enterFrame ', update) else lBtn: removeEventListener (' touch ', movePaddle) rBtn: removeEventListener (' touch ', movePaddle) ball: removeEventListener (' collision ', onCollision) Runtime: removeEventListener (' enterFrame ', update) end end I pulsanti sullo schermo attiveranno la rotazione dei paddle. Questo codice lo gestisce.
function movePaddle (e) if (e.phase == 'started' e e.target.name == 'left') then pLeft.rotation = -40 elseif (e.phase == 'started' e e.target.name == 'right') quindi pRight.rotation = 40 end
La rotazione tornerà al suo stato iniziale quando il pulsante non viene più premuto.
if (e.phase == 'ended') then pLeft.rotation = 0 pRight.rotation = 0 end end
La palla verrà sparata quando si verifica una collisione con la paletta, ma solo se la rotazione della paletta è attiva. Ciò evita di sparare alla palla quando i pulsanti non vengono premuti.
function onCollision (e) - Spara se (e.phase == 'started' e e.other.name == 'leftPaddle' e e.other.rotation == -40) then ball: applyLinearImpulse (0.05, 0.05, ball .y, ball.y) elseif (e.phase == 'started' e e.other.name == 'rightPaddle' e e.other.rotation == 40) then ball: applyLinearImpulse (0.05, 0.05, ball.y , ball.y) fine
Il punteggio aumenta quando si verifica una collisione con un hitBall.
if (e.phase == 'ended' e e.other.name == 'hBall') then score.text = tostring (tonumber (score.text) + 100) score: setReferencePoint (display.TopLeftReferencePoint) score.x = 2 fine audio.play (campana)
Questo codice controlla se la palla cade attraverso lo spazio tra i paddle e reimposta la palla se è vera.
function update () - Controlla se palla ha colpito il fondo se (ball.y> display.contentHeight) quindi ball.y = 0 audio.play (buzz) end end
Per iniziare inizialmente 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 creata in precedenza, 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. L'icona non ha bisogno di avere gli angoli arrotondati o il bagliore trasparente, iTunes e l'iPhone lo faranno per te.
È ora di eseguire 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 l'ho trovata utile. Grazie per aver letto!
