Share
Questa è la seconda puntata del nostro tutorial sul gioco Corona Unlock per sbloccare Puzzle. Nel tutorial di oggi, aggiungeremo alla nostra interfaccia creando gli elementi interattivi del gioco di sblocco. 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 transition.to (titleBg, time = 300 , y = (display.contentHeight * 0.5) - (titleBg.height + 40)) 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); 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 visualizzazione, 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:
-- Gioco BG gameBg = display.newImage ('gameBg.png', 10, 10) Successivamente aggiungiamo il campo di testo dei movimenti allo stage. Questo conterà il numero di mosse fatte dal giocatore.
-- Movimenti Movimenti textfield = display.newText ('0', 211, 66, display.systemFont, 16) movimenti: setTextColor (224, 180, 120) Questa parte crea i blocchi definiti nella variabile di Livello usando un doppio per dichiarazione.
-- Crea livello hblocks = display.newGroup () vblocks = display.newGroup () per i = 1, # l1 do per j = 1, # l1 [1] do if (l1 [i] [j] == 1) quindi locale v = display.newImage ('vrect.png', 10 + (j * 50) -50, 120 + (i * 50) -50) v: addEventListener ('touch', dragV) vblocks: insert (v) elseif ( l1 [i] [j] == 2) quindi locale h = display.newImage ('hrect.png', 10 + (j * 50) -50, 120 + (i * 50) -50) h: addEventListener (' touch ', dragH) hblocks: insert (h) elseif (l1 [i] [j] == 3) then s = display.newImage (' square.png ', 10 + (j * 50) -50, 120 + ( i * 50) -49) s: addEventListener ('touch', dragH) end end end gameListeners ('add') end Questa funzione aggiunge gli ascoltatori necessari per avviare la logica di gioco.
function gameListeners (action) if (action == 'add') then Runtime: addEventListener ('enterFrame', update) else Runtime: removeEventListener ('enterFrame', update) end end La prossima funzione gestisce la resistenza orizzontale dei blocchi.
function dragH (e) e.target.lastX = 0 local currentX = 0 local initX = 0 if (e.phase == 'started') then e.target.lastX = ex - e.target.x initX = e.target .x movements.text = tostring (tonumber (movements.text) + 1) elseif (e.phase == 'moved') then e.target.x = ex - e.target.lastX currentX = e.target.x - - Calcola la direzione se (initX < currentX) then dir = 'hl' --horizontal-left elseif(initX > currentX) then dir = 'hr' --horizontal-right end end end
Ora creiamo la funzione di trascinamento verticale.
function dragV (e) e.target.lastY = 0 local currentY = 0 local initY = 0 if (e.phase == 'started') then e.target.lastY = ey - e.target.y initY = e.target .y movements.text = tostring (tonumber (movements.text) + 1) elseif (e.phase == 'moved') then e.target.y = ey - e.target.lastY currentY = e.target.y - - Calcola la direzione se (initY < currentY) then dir = 'vu' --Vertical-upwards elseif(initY > currentY) then dir = 'vd' --Vertical-down end end end
Useremo una funzione eccellente e utile per il rilevamento delle collisioni senza fisica. È possibile trovare l'esempio e la fonte originali sul sito Web di scambio codici di CoronaLabs.
function hitTestObjects (obj1, obj2) local left = obj1.contentBounds.xMin <= obj2.contentBounds.xMin and obj1.contentBounds.xMax >= obj2.contentBounds.xMin right locale = obj1.contentBounds.xMin> = obj2.contentBounds.xMin e obj1.contentBounds.xMin <= obj2.contentBounds.xMax local up = obj1.contentBounds.yMin <= obj2.contentBounds.yMin and obj1.contentBounds.yMax >= obj2.contentBounds.yMin local down = obj1.contentBounds.yMin> = obj2.contentBounds.yMin e obj1.contentBounds.yMin <= obj2.contentBounds.yMax return (left or right) and (up or down) end
Questo codice limita il movimento creando bordi virtuali.
aggiornamento della funzione (e) - Bordi verticali per i = 1, vblocks.numChildren do if (vblocks [i] .y> = 370) quindi vblocks [i] .y = 370 elseif (vblocks [i] .y <= 170) then vblocks[i].y = 170 end
Qui gestiamo le collisioni tra i blocchi verticali e orizzontali.
-- Hit Test if (hitTestObjects (vblocks [i], hblocks [i]) e dir == 'vu') quindi vblocks [i] .y = hblocks [i] .y + 75 elseif (hitTestObjects (vblocks [i], hblocks [i]) e dir == 'vd') quindi vblocks [i] .y = hblocks [i] .y - 75 end if (hitTestObjects (vblocks [i], hblocks [i]) e dir == 'hr' ) quindi hblocks [i] .x = vblocks [i] .x + 75 elseif (hitTestObjects (vblocks [i], hblocks [i]) e dir == 'hl') quindi hblocks [i] .x = vblocks [i ] .x - 75 end if (hitTestObjects (s, vblocks [i])) then sx = vblocks [i] .x - 50 end end
Questo codice limita il movimento in orizzontale creando bordi virtuali.
-- Bordi orizzontali per j = 1, hblocks.numChildren do if (hblocks [j] .x> = 260) quindi hblocks [j] .x = 260 elseif (hblocks [j] .x <= 60) then hblocks[j].x = 60 end end -- Square if(s.x >= 320) quindi display.remove (s) display.remove (vblocks) display.remove (hblocks) alert () elseif (s.x <= 35) then s.x = 35 end end
La funzione di avviso arresta il gioco, visualizza un messaggio e rimuove i listener attivi.
function alert () gameListeners ('rmv') local alertView = display.newImage ('alert.png', 80, display.contentHeight * 0.5 - 41) transition.from (alertView, time = 300, y = -82) fine fine Per iniziare il gioco, il Principale la funzione deve essere chiamata. Con il codice sopra riportato, lo faremo qui:
Principale()
Il Default.png file è un'immagine che verrà visualizzata proprio 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 compilatore 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.
Non ha bisogno di 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!
In questo tutorial hai imparato come rendere la nostra interfaccia prendere vita consentendo all'utente di interagire con i pezzi del gioco. 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!
