Share
Questa è la seconda puntata del nostro tutorial sul gioco Corona SDK Hundreds. Nel tutorial di oggi, aggiungeremo alla nostra interfaccia e all'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 lastX = titleBg.x transition.to (titleBg , time = 300, y = (display.contentHeight * 0.5) - (titleBg.height + 20), x = (display.contentWidth * 0.5) - (titleBg.width * 0.5) - 10) 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, x = lastX); 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 vista, 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) Questo codice posiziona l'immagine di sfondo del gioco sul palco.
-- Game Background display.remove (bg) gameBg = display.newImage ('gameBg.png') 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 cerchi nello schermo in una posizione casuale, il io variabile è usata per moltiplicare una costante che definirà il colore dei cerchi rendendola più leggera ogni volta. Viene creato anche un campo di testo ed entrambi sono contenuti all'interno di un gruppo per spostarli insieme.
-- Cerchi cerchi = display.newGroup () color color = 0 per i = 1, 5 do local rx = 21 + math.floor (math.random () * (display.contentWidth - 42)) local ry = 21 + math.floor (math.random () * (display.contentHeight - 42)) local cg = display.newCircle (rx, ry, 21) label locale = display.newText ('0', cg.x-4.2, cg.y-12.2 , native.systemFontBold, 13) cg.fillColor = color + (i * 40) cg: setFillColor (cg.fillColor) local c = display.newGroup (cg, label) c.pressed = false c.name = 'c' c .radius = 21 Qui aggiungiamo fisica alla nostra nuova cerchia.
-- Circle Physics physics.addBody (c, 'dynamic', radius = 21, bounce = 1) c: setLinearVelocity (100, 100) cerchi: insert (c) 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 i campi di testo del punteggio.
-- Punteggio TextField score = display.newText ('0', 257, 4, native.systemFont, 15) score: setTextColor (150, 150, 150) local total = display.newText ('/ 100', 267, 4, nativo. systemFont, 15) totale: setTextColor (150, 150, 150) gameListeners ('add') end Questa funzione aggiunge gli ascoltatori necessari per avviare la logica di gioco.
function gameListeners (action) if (action == 'add') then per i = 1, 5 do circles [i]: addEventListener ('touch', onTouch) circles [i]: addEventListener ('collision', onCollision) end else per i = 1, 5 do circles [i]: removeEventListener ('touch', onTouch) circles [i]: removeEventListener ('collision', onCollision) end end end Questo codice viene eseguito quando viene toccato il cerchio.
Per prima cosa aumentiamo il punteggio.
funzione onTouch (e) if (e.phase == 'started') then e.target.pressed = true - Aumenta contatore score.text = tostring (tonumber (score.text) + 2)
Quindi la dimensione del cerchio. Il cerchio crescerà quando il dito non sarà più su di esso.
-- Aumenta la dimensione e.target.radius = e.target.radius + 2
Cambia il colore da nero / grigio a rosso.
-- Cambia colore e.target [1]: setFillColor (224, 11, 0)
Ricreamo il cerchio e le sue proprietà al termine dell'evento tattile.
if (e.phase == 'ended') then e.target.pressed = false - Aggiorna fisica numero locale = tostring (tonumber (e.target [2] .text) +2) local r = e.target.radius local cg = display.newCircle (e.target.x, e.target.y, r) local label = display.newText (numero, cg.x-4.2, cg.y-12.2, native.systemFontBold, 13) cg: setFillColor (e.target [1] .fillColor) cg.fillColor = e.target [1] .fillColor local c = display.newGroup (cg, label) c.pressed = false c.name = 'c' c.radius = r cerchi: remove (e.target) physics.addBody (c, 'dynamic', radius = r, bounce = 1) c: setLinearVelocity (100, 100) c: addEventListener ('touch', onTouch) c: addEventListener (cerchi "collisione", onCollision): inserisci (c) - Sposta campo di testo quando il numero è 2 cifre se (numero (numero)> 9) quindi label.x = label.x - 5 fine Qui controlliamo se il punteggio ha raggiunto 100 punti e chiama a vincere avviso se è vero.
-- Verifica se il punteggio ha raggiunto 100 se (tonumber (score.text)> = 100) quindi locale bg = display.newImage ('gameBg.png') transition.from (bg, time = 500, alpha = 0, onComplete = alert ('win')) end end end Il gioco si perde quando un cerchio premuto si scontra con un altro. Gli ascoltatori vengono rimossi e a perso l'avviso è chiamato.
function onCollision (e) if (e.target.pressed e e.other.name == 'c') then - Attendi 0.1 secondi per arrestare la fisica timer.performWithDelay (100, function () physics.stop () end, 1 ) local r = e.target.radius local c = display.newCircle (e.target.x, e.target.y, r) c: setFillColor (224, 11, 0) gameListeners ('rmv') transition.to ( c, time = 700, xScale = 25, yScale = 25, onComplete = alert ('lost')) end end La funzione di avviso visualizza un messaggio in base al tipo di avviso chiamato.
funzione alert (azione) if (action == 'win') then alertView locale = display.newImage ('won.png', 10, display.contentHeight * 0.5 - 41) transition.from (alertView, time = 300, y = -82, delay = 500) else local alertView = display.newImage ('lost.png', 10, 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!
