Share
Questa è la seconda puntata del nostro tutorial sul gioco Corona SDK Retro Racing. 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. 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', 0, display.contentHeight) lastY = titleBg.y transition.to (titleBg, time = 300 , y = (display.contentHeight * 0.5) - (titleBg.height + 50)) 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 vista, quindi le suddivideremo nei prossimi passaggi.
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 l'immagine Car e la posizioniamo al centro del palco.
-- Car car = display.newImage ('car.png', 90, 412) Questa parte crea le linee Highway, questa immagine viene aggiunta due volte per creare un loop. Uno è visibile sullo schermo mentre l'altro attende nella parte superiore del palco.
-- Highway lines1 = display.newImage ('lines.png', 0, -18) lines2 = display.newImage ('lines.png', 0, -558) lines1: setReferencePoint (display.TopLeftReferencePoint) lines2: setReferencePoint (display.TopLeftReferencePoint ) obstacles = display.newGroup () Ora posizioniamo tre campi di testo per visualizzare il punteggio, il livello e la velocità.
-- TextFields score = display.newText ('0', 272, 38, native.systemFont, 17) score: setTextColor (0) level = display.newText ('1', 272, 108, native.systemFont, 17) livello: setTextColor (0) speed = display.newText ('1', 272, 178, native.systemFont, 17) velocità: setTextColor (0) Vengono aggiunti due pulsanti da utilizzare come controlli per l'auto: sinistra e destra.
-- Direction Buttons leftBtn = display.newImage ('button.png', -2, 420) leftBtn.name = 'l' rightBtn = display.newImage ('button.png', 260, 420) rightBtn.name = 'r' Ora aggiungiamo l'auto al motore fisico, in questo modo possiamo segnalare le collisioni.
-- Fisica fisica.addBody (auto, 'dinamica') gameListeners ('aggiungi') Questa funzione aggiunge gli ascoltatori necessari per avviare la logica di gioco.
Questa è una parte importante se provi a personalizzare il gioco. Il moveTimer controlla la velocità del gioco. Di default è 100 millisecondi per il Livello 1, quindi il livello 2 può essere 200 e così via.
La durata del gioco si basa sul numero di ostacoli presentati nel livello; questo è definito dal oTimer. Modifica il 15 valore per creare livelli più corti o più grandi.
function gameListeners (action) if (action == 'add') then leftBtn: addEventListener ('tap', moveCar) rightBtn: addEventListener ('tap', moveCar) moveTimer = timer.performWithDelay (100, aggiorna, 0) - livello speed oTimer = timer.performWithDelay (1400, addObstacle, 15) - auto di lunghezza del livello: addEventListener ('collision', onCollision) else leftBtn: removeEventListener ('tap', moveCar) rightBtn: removeEventListener ('tap', moveCar) timer. cancel (moveTimer) moveTimer = nil timer.cancel (oTimer) oTimer = nil car: removeEventListener ('collision', onCollision) end end Questa funzione controlla l'auto. Verifica il pulsante premuto e sposta l'auto nella posizione scelta, se disponibile.
function moveCar (e) if (e.target.name == 'l' e car.x ~ = 62) then car.x = car.x - 54 elseif (e.target.name == 'r' e car. x ~ = 170) quindi car.x = car.x + 54 end end
Gli ostacoli vengono aggiunti da un timer basato su una posizione calcolata a caso che può essere lasciata, centro o destra. Questa funzione crea un ostacolo, la dà fisica e quindi viene aggiunta a Gruppo per facilitarne il movimento e la rimozione.
function addObstacle (e) local rx = positionsTable [math.floor (math.random () * 3) + 1] local o = display.newImage ('obstacle.png', rx, -52) physics.addBody (o, ' static ') o.isSensor = true obstacles: insert (o) started = true end La funzione di aggiornamento è gestita da un timer per creare l'effetto brick-by-brick. Il prossimo codice scorre le linee autostradali.
aggiornamento della funzione (e) - Muovi le linee Highway1.y = lines1.y + 16 lines2.y = lines2.y + 16 - Ripristina posizione highway if (lines1.y> = 522) then lines1.y = -558 elseif ( lines2.y> = 522) quindi lines2.y = -558 end
Queste linee spostano gli ostacoli e rimuovono quelli che non sono più visibili. Il punteggio aumenta ogni volta che l'auto non colpisce un ostacolo.
per i = 1, obstacles.numChildren do - Move Obstacles if (obstacles [i] ~ = nil) quindi ostacoli [i] .y = ostacoli [i] .y + 16 end - Rimuovere gli ostacoli fuori dal campo se (ostacoli [i] ] ~ = nil e ostacoli [i] .y> = display.contentHeight + 26) then display.remove (obstacles [i]) score.text = tostring (tonumber (score.text) + 50) end end
Qui controlliamo se tutti gli ostacoli definiti sono già fuori dal palco e chiamiamo a vincere avviso se è vero.
-- Verificare il livello completo se (avviato e obstacles.numChildren == 0) quindi alert () end end
La funzione Collision controlla se l'auto è investita da un ostacolo e chiama a perdere avviso se è vero.
function onCollision (e) alert ('lose') end function alert (msg) gameListeners ('rmv') if (msg == 'lose') then alert = display.newImage ('alert.png', 52, 229.5) altro alert = display.newImage ('complete.png', 18, 229.5) end transition.from (alert, time = 300, xScale = 0.5, yScale = 0.5) fine physics.stop () 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 correttamente all'avvio dell'applicazione mentre iOS carica i dati di base per mostrare la schermata principale. Aggiungi questa immagine alla cartella di origine del progetto.
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 l'ho trovata utile. Grazie per aver letto!
