Share
In questo tutorial, ti mostrerò come creare un gioco di rimbalzo con il Corona SDK. Imparerai di più sull'API di disegno, sui controlli tattili e sui numeri casuali. L'obiettivo di questo gioco è di usare una pagaia per evitare che le palline tocchino il pavimento. Per saperne di più, continua a leggere!
Useremo la grafica pre-creata per codificare un gioco entusiasmante utilizzando le API Lua e Corona SDK.
Al completamento, il giocatore utilizzerà il touch screen sul dispositivo per controllare una pagaia. I parametri nel codice possono essere modificati per personalizzare il gioco.
La prima cosa che dobbiamo fare è selezionare la piattaforma in cui vogliamo far funzionare la nostra app. In questo modo saremo in grado di scegliere la dimensione per le immagini che useremo.
La piattaforma iOS ha le seguenti caratteristiche:
Perché Android è una piattaforma aperta, ci sono molti diversi dispositivi e risoluzioni. Alcune delle caratteristiche comuni dello schermo sono:
In questo tutorial ci concentreremo sulla piattaforma iOS con il design grafico, in particolare per lo sviluppo da distribuire a un iPhone / iPod touch, ma il codice presentato qui si applica anche allo sviluppo Android con il Corona SDK.
Verrà utilizzata un'interfaccia semplice e amichevole. Ciò include più forme, pulsanti, bitmap e altro.
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 con 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 salvarle nella cartella del progetto.
Useremo un file esterno per rendere l'applicazione diventata a schermo intero su tutti i dispositivi (il config.lua file). Questo file mostra le dimensioni dello schermo originale e il metodo utilizzato per ridimensionare quel contenuto nel caso in cui l'app venga eseguita con una risoluzione dello schermo diversa.
application = content = width = 320, height = 480, scale = "letterbox",
Scriviamo l'applicazione!
Apri il tuo 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, troverai la struttura familiare.
Classi necessarie Variabili e costanti Dichiarate Funzioni Funzioni della classe contructor (funzione principale) (altre funzioni) chiamata Funzione principale
display.setStatusBar (display.HiddenStatusBar)
Il codice precedente 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.
Un vettore semplice viene utilizzato come sfondo per l'interfaccia dell'applicazione. La prossima riga di codice lo crea.
-- Grafica - [Sfondo] local bg = display.newRect (0, 0, display.contentWidth, display.contentHeight) bg: setFillColor (52, 46, 45)
Questa è la Vista Titolo, sarà la prima schermata interattiva a comparire nel nostro gioco. Queste variabili memorizzano i suoi 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
Un messaggio di istruzioni apparirà all'inizio del gioco e verrà interrotto dopo 2 secondi. È possibile modificare l'ora successiva nel codice.
-- Istruzioni locali ins
Ecco i cerchi o le palle. L'obiettivo del gioco è di impedire che tocchino la parte inferiore dello schermo.
-- Cerchi colore cerchi locali = display.newGroup ()
Questo è l'avviso che verrà visualizzato quando una palla tocca il pavimento. Mostrerà il punteggio e terminerà il gioco.
-- Avvisa locale alertView
Useremo effetti sonori per migliorare la sensazione del gioco. I suoni usati in questo gioco sono stati creati in As3sfxr.
Accentsconagua
-- Suoni local bounceSnd = audio.loadSound ('bounce.wav') local loseSnd = audio.loadSound ('lose.wav') Queste sono le variabili che useremo. Puoi leggere i commenti nel codice per saperne di più su di loro.
-- Variabile circleTimer locale - Aggiunge un nuovo cerchio ogni volta che si chiama colori locali = 71, 241, 255, 255, 204, 0, 245, 94, 91, 0, 255, 204, 250, 140, 254, - Possibili colori per i cerchi (R, G, B)
Quindi, dichiara tutte le funzioni come Locale all'inizio.
-- Funzioni locali Main = local startButtonListeners = local showCredits = local hideCredits = local showGameView = local gameListeners = local moveBar = local addCircle = local onCollision = alert locale =
Durante questo passaggio creeremo la funzione che inizializza la logica di gioco:
funzione Main () - code ... end
Ora inseriremo il TitleView nello stage e chiama una funzione che aggiunge il rubinetto ascoltatori ai pulsanti.
function Main () title = display.newImage ('title.png') playBtn = display.newImage ('playBtn.png', 130, 248) creditsBtn = display.newImage ('creditsBtn.png', 125, 316) titleView = display.newGroup (title, playBtn, creditsBtn) startButtonListeners ('add') end 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 di pulsante, 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) transition.to (creditsView, time = 300, y = display. contentHeight - (creditsView.height - 40), 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 + 40, onComplete = function () creditsBtn.isVisible = true playBtn.isVisible = true creditsView: removeEventListener ('tap', hideCredits ) display.remove (creditsView) creditsView = nil end) end Quando il Giocare il pulsante viene toccato, il TitleView è interpolato e rimosso, rivelando il GameView. 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) Le seguenti righe aggiungono il messaggio di istruzioni:
ocal ins = display.newImage ('ins.png', 160, 355) transition.from (ins, time = 200, alpha = 0.1, onComplete = function () timer.performWithDelay (2000, function () transition.to ( ins, time = 200, alpha = 0.1, onComplete = function () display.remove (ins) ins = nil end) end) end) Questo passaggio crea la paletta e la posiziona sul palco. Un nome può essere aggiunto in seguito per un accesso più semplice.
-- Aggiungi Bar = display.newRoundedRect (70, 340, 160, 10, 3) bar.name = 'bar'
Ora creeremo muri attorno allo schermo per impedire alle palle di lasciare il palco.
-- Walls left = display.newLine (0, 240, 0, 720) left.isVisible = false right = display.newLine (320, 240, 320, 720) right.isVisible = false bottom = display.newLine (160, 480, 480 , 480) bottom.isVisible = false
Ecco un punteggio Campo di testo per creare in alto a destra del palco:
-- Punteggio punteggio = display.newText ('0', 300, 0, 'Futura', 15) Quindi abbiamo bisogno di aggiungere fisica ai nostri oggetti. Qui useremo il Filtro proprietà che impedisce ad alcuni oggetti di scontrarsi l'uno con l'altro. Questo impedisce ai nostri cerchi di scontrarsi mantenendo le collisioni tra le pareti e la pagaia. Puoi trovare una semplice spiegazione del suo comportamento nel sito Corona.
-- Fisica fisica.addBody (bar, 'static', filter = categoryBits = 4, maskBits = 7) physics.addBody (left, 'static', filter = categoryBits = 4, maskBits = 7) fisica .addBody (right, 'static', filter = categoryBits = 4, maskBits = 7) physics.addBody (in basso, 'static', filter = categoryBits = 4, maskBits = 7) gameListeners (' aggiungi ') fine La seguente funzione aggiunge gli ascoltatori necessari per avviare la logica di gioco:
function gameListeners (action) if (action == 'add') then bg: addEventListener ('touch', moveBar) circleTimer = timer.performWithDelay (2000, addCircle, 5) bar: addEventListener ('collision', onCollision) bottom: addEventListener ('collisione', avviso) else bg: removeEventListener ('touch', moveBar) timer.cancel (circleTimer) circleTimer = nil bar: removeEventListener ('collision', onCollision) bottom: removeEventListener ('collision', alert) end end Toccando lo sfondo si chiama la funzione successiva che gestisce il movimento della paletta. Segue il dito e rimane sopra di esso.
funzione moveBar (e) if (e.phase == 'moved') quindi bar.x = e.x bar.y = e.y - 40 end - Mantieni la barra 1/3 dall'alto se (bar.y < 160) then bar.y = 160 end end
Il circleTimer chiama questo codice Crea un cerchio o una palla nella parte superiore dello schermo (che viene poi abbassata per gravità) e gli dà una dimensione e un colore casuale scelti dal nostro colori Tavolo. I valori dei colori vengono quindi memorizzati per cambiare anche la paletta. Viene aggiunta una piccola spinta in una direzione casuale calcolata dal dir e r variabili.
function addCircle () local r = math.floor (math.random () * 12) + 13 local c = display.newCircle (0, 0, r) cx = math.floor (math.random () * (display.contentWidth - (r * 2))) cy = - (r * 2) - Colore del cerchio colore locale = math.floor (math.random () * 4) + 1 c.c1 = colors [color] [1] c. c2 = colors [color] [2] c.c3 = colors [color] [3] c: setFillColor (c.c1, c.c2, c.c3) physics.addBody (c, 'dynamic', radius = r , bounce = 0.95, filter = categoryBits = 2, maskBits = 4) circles: insert (c) --Move Dir orizzontalmente locale if (r < 18) then dir = -1 else dir = 1 end c:setLinearVelocity((r*2) * dir, 0 ) end
Questa funzione viene eseguita quando la pagaia si scontra con una palla. Riproduce un suono, aumenta il punteggio e cambia il colore della paletta.
function onCollision (e) barra audio.play (bounceSnd): setFillColor (e.other.c1, e.other.c2, e.other.c3) score.text = tostring (tonumber (score.text) + 50): setTextColor (e.other.c1, e.other.c2, e.other.c3) score.x = 300 end
La funzione di avviso crea una vista di avviso, la anima e termina la partita.
funzione alert () audio.play (loseSnd) gameListeners ('rmv') alertView = display.newImage ('alert.png', 90, 200) transition.from (alertView, time = 200, alpha = 0.1) punteggio localeTF = display.newText (score.text, 145, 253, 'Futura', 17) scoreTF: setTextColor (255, 255, 255) - Attendi 100 ms per interrompere la fisica timer.performWithDelay (100, function () physics.stop ( ) fine, 1) 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 viene visualizzata all'avvio dell'applicazione mentre iOS carica i dati di base da mostrare nella schermata principale. Aggiungi questa immagine alla cartella sorgente del tuo progetto, poi verrà automaticamente aggiunta dal complice Corona.
Usando la grafica creata in precedenza, ora puoi creare un'icona di bell'aspetto. La dimensione dell'icona per l'icona dell'iPhone non retina è 57x57px, ma la versione retina è 114x114px. Tieni presente che il negozio 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 fanno per te.
È l'ora del test finale. Apri il simulatore Corona, vai alla cartella del progetto, quindi fai clic Aperto. Se tutto funziona come previsto, sei pronto per l'ultimo passaggio!
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 è pronta per il test del dispositivo e / o l'invio per la distribuzione!
In questo tutorial, abbiamo imparato a disegnare API, timer, numeri casuali e altre abilità che possono essere incredibilmente utili in un ampio numero di giochi.
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!
