Share
In questa serie di tutorial in due parti, imparerai come creare un gioco di flipper. L'obiettivo del gioco è colpire la palla usando i paddle 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 colpire una palla usando i pulsanti sul palco. È possibile modificare i parametri nel codice per personalizzare il gioco.
La prima cosa che dobbiamo fare è selezionare la piattaforma su cui vogliamo eseguire la nostra app, in questo modo potremo scegliere la dimensione per le immagini che usiamo.
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 intuitiva, che comprende 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 nel ppi consigliato, è possibile farlo nell'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 gli effetti sonori per migliorare la sensazione del gioco, puoi trovare i suoni usati in questo esempio in Soungle.com usando le parole chiave campana e ronzio.
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",
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 locale = require ('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 suoi componenti.
-- [Titolo vista] titolo localeBg riproduzione localeBtn crediti localiBtn titleView locale
Questa vista mostrerà i crediti e il copyright del gioco, questa variabile verrà utilizzata per memorizzarla.
-- [CreditsView] creditsView locali
Le pareti in cui la palla sarà in grado di rimbalzare.
Dato che useremo la fisica per creare esattamente gli stessi poligoni, spezzeremo ogni lato in quattro parti. Le parti sono contrassegnate da linee rosse.
-- [Pareti] locale l1 locale l2 locale l3 locale l4 locale r1 locale r2 locale r3 locale r4
Questa è la grafica della palla, referenziata nella prossima variabile.
-- [Palla] palla locale
Aggiungeremo alcuni ostacoli nel gioco, questi saranno loro.
-- [Hit Lines] hitLine1 local hitLine2 locale
Queste palle sono il bersaglio del flipper, colpendole aumenterà il nostro punteggio.
-- [Hit Balls] hit localeBall1 local hitBall2 local hitBall3
Pagaia sinistra e destra. Usato per colpire la palla
-- [Paddles] pRight locale pLeft locale
Questi pulsanti spostano i paddle facendo rimbalzare la palla.
-- [Pulsanti paddle] rBtn locale lBtn locale
Una variabile punteggio viene aggiunta per visualizzarla più tardi sullo schermo.
-- Punteggio locale
Le righe successive memorizzano un riferimento per i file audio.
local bell = audio.loadSound ('bell.caf') local buzz = audio.loadSound ('buzz.caf') Questa è la variabile che useremo, leggere i commenti nel codice per saperne di più.
-- Variabili locali lastY - utilizzate per ricordare la posizione del titolo bmp
Dichiara tutte le funzioni come Locale all'inizio.
-- Funzioni locali Main = local startButtonListeners = local showCredits = local hideCredits = local showGameView = local gameListeners = local movePaddle = local onCollision = local update =
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', display.contentCenterX - 97, 96) playBtn = display.newImage ('playBtn.png', display.contentCenterX - 30, display.contentCenterY + 10) creditsBtn = display.newImage ('creditsBtn.png', display.contentCenterX - 44.5, display.contentCenterY + 65) titleView = display.newGroup (titleBg, playBtn, creditsBtn) startButtonListeners ('add') end Questa funzione aggiunge gli ascoltatori necessari al 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, 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 + 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 In questa parte della serie hai imparato l'interfaccia e la configurazione di base del gioco. Nella parte successiva e finale della serie, gestiremo il movimento della paletta, il rilevamento delle collisioni e i passaggi finali da eseguire prima del rilascio come il test delle app, creando una schermata iniziale, aggiungendo un'icona e, infine, costruendo l'app. Restate sintonizzati per la parte finale!
