In questa serie di tutorial, imparerai come creare una partita di Air Hockey. L'obiettivo del gioco è quello di colpire il disco 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 un disco trascinando la paletta sullo schermo. È 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 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 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, dovresti trovare 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)
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:
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
Questa immagine sarà posizionata in cima al nostro precedente sfondo per aggiungere una sensazione simile ad un hockey.
-- [Sfondo del gioco] gioco localeBg
Questa è la grafica del puck, referenziata nella prossima variabile.
-- [Puck] disco locale
Player and Enemy o CPU paddle. Usato per colpire il disco.
-- [Paddles] nemico locale del giocatore locale
Le variabili del punteggio vengono aggiunte per visualizzarle successivamente sullo schermo.
-- Partiture local playerScore local enemyScore
Useremo gli effetti sonori per migliorare la sensazione del gioco, puoi trovare il suono utilizzato in questo esempio in Soungle.com utilizzando la parola chiave campana.
-- Suona campana locale = audio.loadSound ('bell.caf')
Le pareti in cui la palla sarà in grado di rimbalzare. Questi vengono creati utilizzando l'API Corona Display e quindi aggiunti al motore fisico.
-- [Pareti] locale locale locale sinistro locale superiore locale sinistro locale superiore locale superiore locale inferiore destro
Queste sono le variabili che useremo, leggere i commenti nel codice per saperne di più su di loro.
-- Variabili locali, infine, utilizzate per animare la schermata dei crediti. Timer locale Sinc - un timer per il movimento nemico / CPU
Dichiara tutte le funzioni come Locale all'inizio.
-- Funzioni locali Main = local startButtonListeners = local showCredits = local hideCredits = local showGameView = local gameListeners = local moveEnemy = update 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', display.contentCenterX - 143.5, 50) playBtn = display.newImage ('playBtn.png', display.contentCenterX - 39.5, display.contentCenterY) creditsBtn = display. newImage ('creditsBtn.png', display.contentCenterX - 40.5, display.contentCenterY + 65) titleView = display.newGroup (titleBg, playBtn, creditsBtn) startButtonListeners ('add') end
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!