Share
In questa serie di tutorial, ti mostrerò come creare un gioco di scroller infinito con il Corona SDK creando un gioco di Strick Runner. Imparerai a scorrere gli oggetti, manipolare la fisica, i controlli tattili e il rilevamento delle collisioni. L'obiettivo del gioco è spostare il personaggio e raccogliere oggetti per aumentare il punteggio. Continuare a leggere!
Usando la grafica pre-creata codificheremo un gioco divertente usando le API Lua e Corona SDK.
Il giocatore sarà in grado di utilizzare il touch screen sul dispositivo per spostare il personaggio e raccogliere gli oggetti. È possibile modificare i parametri nel codice per personalizzare il gioco.
La prima cosa che dobbiamo fare è selezionare la piattaforma in cui vogliamo far funzionare la nostra app, in questo modo potremo scegliere la dimensione per le immagini che useremo.
La piattaforma iOS ha queste caratteristiche:
Perché Android è una piattaforma aperta, ci sono molti diversi dispositivi e risoluzioni. Alcune delle caratteristiche dello schermo più comuni sono:
In questo tutorial, ci concentreremo sulla piattaforma iOS con il design grafico, in particolare lo sviluppo per la distribuzione su un iPhone / iPod touch, ma il codice presentato qui dovrebbe applicarsi anche allo sviluppo Android con il Corona SDK.
Verrà utilizzata un'interfaccia semplice e amichevole. L'interfaccia coinvolgerà più forme, pulsanti, bitmap e altro ancora.
Le risorse grafiche dell'interfaccia necessarie per questo tutorial sono disponibili nel download allegato.
A seconda del dispositivo selezionato, potrebbe essere necessario esportare la grafica nell'IPP consigliato. Puoi farlo usando il tuo editor di immagini preferito.
Ho usato il Regola dimensioni ... funzione nell'app Anteprima su Mac OS X.
Ricordarsi di assegnare alle immagini un nome descrittivo e di salvarle nella cartella del progetto.
Verrà utilizzato un file esterno per rendere l'applicazione disponibile a schermo intero su tutti i dispositivi config.lua file. Questo file mostra le dimensioni originali dello schermo e il metodo utilizzato per ridimensionare il contenuto nel caso in cui l'app venga eseguita con una risoluzione dello schermo diversa.
application = content = width = 320, height = 480, scale = "letterbox",
Adesso scriviamo l'applicazione!
Apri l'editor Lua preferito (qualsiasi editor di testo funzionerà, ma non avrai l'evidenziazione della sintassi) e preparati a scrivere la tua fantastica app. Ricordarsi di salvare il file come main.lua nella cartella del tuo progetto.
Struttureremo il nostro codice come se fosse una classe. Se conosci ActionScript o Java, dovresti trovare la struttura familiare.
Necesary Classes Variable and Constants Declare Funzione contructor (funzione principale) metodi di classe (altre funzioni) chiamata Main function
display.setStatusBar (display.HiddenStatusBar)
Questo codice nasconde la barra di stato. La barra di stato è la barra in cima allo schermo del dispositivo che mostra l'ora, il segnale e altri indicatori.
Useremo la libreria di fisica per gestire le collisioni. Usa questo codice per importarlo:
Accentsconagua
-- Fisica fisica locale = richiede ('fisica') physics.start () 
Un semplice grafico viene utilizzato come sfondo per l'interfaccia dell'applicazione, la riga successiva del codice lo memorizza.
-- Grafica - [Sfondo] local bg = display.newImage ('bg.png') 
Questa è la Vista Titolo, sarà la prima schermata interattiva a comparire nel nostro gioco. Queste variabili memorizzano i componenti:
-- [Titolo vista] titolo locale locale playBtn crediti localiBtn titleView locale
Questa vista mostrerà i crediti e il copyright del gioco. Questa variabile verrà utilizzata per memorizzarla:
-- [CreditsView] creditsView locali
Lo sfondo del livello, aggiunge anche il campo di testo del punteggio.
-- Gioco Sfondo gioco localeBg
All'inizio del gioco comparirà un messaggio di istruzioni, che verrà interrotto dopo 2 secondi.
-- Istruzioni locali ins
La grafica del personaggio. L'obiettivo del gioco è spostarlo su e giù sullo schermo per raccogliere le ciliegie.
-- Struzzo locale di struzzo
La grafica della ciliegia. Ci sono anche le amarene che ti faranno perdere la partita.
-- Cherrys cherrys locali
La grafica del pad. Toccale per spostare il personaggio.
-- Pad local local down
Questo è l'avviso che verrà visualizzato quando viene raccolta una ciliegia errata. Completerà il livello e terminerà il gioco.
-- Avvisa locale alertView
Useremo gli effetti sonori per migliorare la sensazione del gioco, puoi trovare la musica utilizzata in questo esempio su playonloop.com. I suoni sono stati creati in as3sfxr.
-- Suona local bgMusic = audio.loadStream ('POL-purple-hills-short.mp3') local cherrySnd = audio.loadSound ('cherry.mp3') local badCherrySnd = audio.loadSound ('badCherry.mp3') Queste sono le variabili che useremo. Leggi i commenti nel codice per saperne di più su di loro.
-- Variables local timerSrc - aggiungi il timer ciliegia yPos locale = 108, 188, 268 - possibile ostrich y posiziona la velocità locale = 5 - cherry speed local speedTimer - timer per cambiare la velocità dei cherrys
Dichiara tutte le funzioni come Locale all'inizio.
-- Funzioni locali Main = local startButtonListeners = local showCredits = local hideCredits = local showGameView = local gameListeners = local startGame = local createCherry = local movePlayer = local increaseSpeed = aggiornamento locale = locale onCollision = avviso locale =
Successivamente creeremo la funzione che inizializzerà tutta la logica di gioco:
funzione Main () - code ... end
Ora posizioniamo il TitleView nello stage e chiamiamo una funzione che aggiungerà il rubinetto ascoltatori ai pulsanti.
function Main () titleBg = display.newImage ('title.png', 113, 43) playBtn = display.newImage ('playBtn.png', 219, 160) creditsBtn = display.newImage ('creditsBtn.png', 205, 223) titleView = display.newGroup (bg, titleBg, playBtn, creditsBtn) startButtonListeners ('add') fine Questa funzione aggiunge gli ascoltatori necessari a TitleView pulsanti.
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', -130, display.contentHeight-140) transition.to (creditsView, time = 300, x = 65, 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) playBtn.isVisible = true creditsBtn.isVisible = true transition.to (creditsView, time = 300, y = display.contentHeight + creditsView.height, onComplete = function () creditsView: removeEventListener ('tap' , hideCredits) display.remove (creditsView) creditsView = nil end) end Quando il Giocare 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 passaggi successivi.
function showGameView: tap (e) transition.to (titleView, time = 300, x = -titleView.height, onComplete = function () startButtonListeners ('rmv') display.remove (titleView) titleView = nil end) Le seguenti linee aggiungono le istruzioni di gioco.
-- Istruzioni Message ins = display.newImage ('ins.png', 187, 199) Questa parte crea il punteggio TextField sul palco.
-- TextFields scoreTF = display.newText ('0', 258, 26.5, 'Marker Felt', 16) scoreTF: setTextColor (184, 165, 104) Aggiungi il personaggio dello struzzo al livello.
-- Ostrich ostrich = display.newImage ('ostrich.png', 11, 180) Questi sono i controlli sullo schermo per il gioco.
-- Pad up = display.newImage ('up.png', 418, 20) down = display.newImage ('down.png', 418, 258) up.name = 'up' down.name = 'down' Successivamente, aggiungiamo la fisica agli oggetti del gioco. Creiamo anche a tavolo per le ciliegie e chiama il gameListeners funzione.
-- Aggiungi Ostrich Physics physics.addBody (ostrich) ostrich.isSensor = true cherrys = display.newGroup () gameListeners ('add') end Questa funzione aggiunge gli ascoltatori necessari per avviare la logica di gioco.
function gameListeners (action) if (action == 'add') then ins: addEventListener ('tap', startGame) Runtime: addEventListener ('enterFrame', update) up: addEventListener ('tap', movePlayer) down: addEventListener (' toccare ', movePlayer) speedTimer = timer.performWithDelay (5000, increaseSpeed, 5) altro Runtime: removeEventListener (' enterFrame ', update) up: removeEventListener (' tap ', movePlayer) down: removeEventListener (' tap ', movePlayer) timer. cancel (timerSrc) timerSrc = nil timer.cancel (speedTimer) speedTimer = nil end end In questa parte, rimuoviamo il messaggio di istruzioni, iniziamo a riprodurre la musica di sottofondo del gioco e creiamo un timer che aggiungerà una ciliegia ogni 400 millisecondi.
function startGame () ins: removeEventListener ('tap', startGame) display.remove (ins) audio.play (bgMusic, loops = -1, channel = 1) timerSrc = timer.performWithDelay (400, createCherry, 0) fine Il frammento di codice successivo crea una ciliegia normale o errata basata su un numero casuale e la posiziona sullo schermo. L'oggetto risultante viene aggiunto al motore fisico per verificare la presenza di collisioni.
function createCherry () local cherry locale rnd = math.floor (math.random () * 4) + 1 if (rnd == 4) then cherry = display.newImage ('badCherry.png', display.contentWidth, yPos [matematica .floor (math.random () * 3) +1]) cherry.name = 'bad' else cherry = display.newImage ('cherry.png', display.contentWidth, yPos [math.floor (math.random () * 3) +1]) cherry.name = 'cherry' end - Cherry fisica physics.addBody (cherry) cherry.isSensor = true cherry: addEventListener ('collision', onCollision) cherrys: insert (cherry) end Cambiamo la posizione Y dello struzzo usando il control pad che abbiamo creato in precedenza.
function movePlayer (e) if (e.target.name == 'up' e ostrich.y ~ = 122) then ostrich.y = ostrich.y - 80 elseif (e.target.name == 'down' e ostrich. y ~ = 282) quindi ostrich.y = ostrich.y + 80 end end
Un timer aumenterà la velocità ogni 5 secondi. Viene visualizzata un'icona per avvisare il giocatore del cambio di velocità.
function increaseSpeed () speed = speed + 2 - Icon local icon = display.newImage ('speed.png', 204, 124) transition.from (icona, time = 200, alpha = 0.1, onComplete = function () timer .performWithDelay (500, function () transition.to (icona, time = 200, alpha = 0.1, onComplete = function () display.remove (icona) icon = nil end) end) end) end Questa funzione gestisce il movimento delle ciliegie. Usa la variabile di velocità per determinare quanti pixel spostare la ciliegia ogni fotogramma.
funzione update () if (cherrys ~ = nil) quindi per i = 1, cherrys.numChildren do cherrys [i] .x = cherrys [i] .x - velocità end end end
Ora controlliamo se la ciliegia si scontra con lo struzzo usando il seguente codice. Il punteggio aumenta quando una ciliegia normale si scontra e viene chiamato un avviso quando viene toccata una ciliegia acerba. In entrambi i casi, la ciliegia viene rimossa e viene riprodotto un suono.
function onCollision (e) e.target:removeEventListener('collision ', onCollision) display.remove (e.target) if (e.target.name ==' cherry ') then --Score scoreTF.text = tostring (tonumber ( scoreTF.text) + 50) audio.play (cherrySnd) - Bad cherry elseif (e.target.name == 'bad') quindi audio.play (badCherrySnd) alert () end end La funzione di avviso crea una vista di avviso, la anima e termina la partita.
funzione alert () audio.stop (1) audio.dispose () bgMusic = nil gameListeners ('rmv') alertView = display.newImage ('alert.png', 160, 115) transition.from (alertView, time = 300 , xScale = 0.5, yScale = 0.5) score score = display.newText (scoreTF.text, (display.contentWidth * 0.5) - 12, (display.contentHeight * 0.5) + 5, 'Marker Felt', 18): setTextColor (184, 165, 104) - Attendi 100 ms per arrestare la fisica timer.performWithDelay (1000, function () physics.stop () end, 1) 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 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 è 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 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!
In questa serie, abbiamo imparato a conoscere il comportamento della fisica, a toccare gli ascoltatori e le collisioni. Queste abilità possono essere davvero utili in un ampio numero di giochi!
Sperimenta il risultato finale e prova a creare la tua versione personalizzata del gioco!
Spero che questo tutorial ti sia piaciuto e lo trovi utile. Grazie per aver letto!
