Share
In questa serie di tutorial, imparerai come creare un gioco Retro Racing. L'obiettivo del gioco è arrivare al traguardo senza superare un ostacolo. Continuare a leggere!
Usando la grafica pre-generata codificheremo un gioco divertente usando le API Lua e Corona SDK.
Il giocatore sarà in grado di controllare una macchina da corsa per evitare ostacoli, è 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 include 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 nel 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.
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.
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:
Accentsconagua
fisica locale = require ('fisica') physics.start () physics.setGravity (0,0) 
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 verrà posizionata in cima al nostro precedente sfondo. Questo sarà lo sfondo del gioco.
-- Gioco Sfondo gioco localeBg
La grafica della macchina. Questo sarà posizionato sul palco nella posizione in basso al centro.
-- Auto locale
Le linee autostradali sono utilizzate per rappresentare la strada in movimento.
-- Linee urbane Linee locali1 Linee locali2
Devi evitare che questi superino il livello.
-- Ostacoli ostacoli locali
Utilizzato per visualizzare le informazioni di gioco correnti come Punteggio, Livello e Velocità.
-- TextFields localizza la velocità locale locale a livello locale
Questo è l'avviso che verrà mostrato quando il gioco sarà finito. Completerà il livello e terminerà il gioco.
-- Avvisa locale alertView
Queste sono le variabili che useremo, leggere i commenti nel codice per saperne di più su di loro.
-- Variabili locali ultime - utilizzate per interpolare i crediti visualizza moveTimer locale - questo timer gestisce gli oggetti movimento locale a sinistraBtn locale a destraBtn locale oTimer - timer ostacolo posizioni localiTabella = 36, 90, 144 - disponibili posizioni x per ostacoli localmente avviati - vero se il primo ostacolo è stato creato
Dichiara tutte le funzioni come Locale all'inizio.
-- Funzioni locali Main = local startButtonListeners = local showCredits = local hideCredits = local showGameView = local gameListeners = local moveCar = local addObstacle = local update = local 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 ('titleBg.png', 70, 50) playBtn = display.newImage ('playBtn.png', 119, 222) creditsBtn = display.newImage ('creditsBtn.png', 85, 282) titleView = display.newGroup (titleBg, playBtn, creditsBtn) startButtonListeners ('add') end In questa parte della serie hai imparato l'interfaccia e l'impostazione di base del gioco. Nella parte successiva e finale della serie, gestiremo la creazione del livello, il rilevamento delle collisioni e i passaggi finali da eseguire prima del rilascio come test delle app, creando una schermata iniziale, aggiungendo un'icona e, infine, costruendo l'app!
Leggi la seconda parte di questa serie
