In questa serie di tutorial, ti mostrerò come creare un puzzle game basato sulla fisica in Corona SDK. Imparerai a conoscere la manipolazione della fisica e i controlli tattili. L'obiettivo del gioco è portare la palla nel contenitore toccando le caselle corrette. 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 rimuovere le caselle sul palco. È possibile modificare i parametri nel codice per personalizzare il gioco.
Per prima cosa selezioneremo la piattaforma su cui vogliamo eseguire la nostra app. Questo ci permetterà di scegliere la dimensione per le immagini che useremo.
La piattaforma iOS ha le seguenti caratteristiche.
Poiché Android è una piattaforma aperta, ci sono molti dispositivi e risoluzioni diversi. Ecco alcune delle caratteristiche dello schermo più comuni.
In questo tutorial ci concentreremo sulla piattaforma iOS con il design grafico, in particolare lo sviluppiamo per la distribuzione su un iPhone / iPod touch. Il codice presentato qui dovrebbe applicarsi anche allo sviluppo Android con 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 nel tuo editor di immagini preferito.
Ho usato il Regola dimensioni ... funzione nel Anteprima app 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 a schermo intero su tutti i dispositivi. Questo è il 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 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 un Classe. Se sai ActionScript o Giava, troverai 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 fisica per gestire le collisioni. Usa il codice qui sotto per importarlo.
-- 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 del 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 e questa variabile verrà utilizzata per memorizzarla.
-- [CreditsView] creditsView locali
Le scatole creano il livello. Ci sono tre dimensioni in questa applicazione.
Un messaggio di istruzioni apparirà all'inizio del gioco. Sarà interrotto dopo due secondi.
-- Istruzioni locali ins
Questa è la grafica della palla. L'obiettivo del gioco è mettere questo oggetto nella casella obiettivo.
-- Palla palla locale
Questo codice memorizza la grafica del riquadro obiettivo.
-- GoBox Box gBox locale
Questo è l'avviso che verrà visualizzato quando vinci il gioco. Completerà il livello e terminerà il gioco.
-- Avvisa locale alertView
Useremo effetti sonori per migliorare la sensazione del gioco. I suoni utilizzati in questa app sono stati generati da AS3SFXR.
-- Suona local win = audio.loadSound ('win.caf')
Queste sono le variabili che useremo. Leggi i commenti nel codice per saperne di più su di loro.
-- Variables local lvlImg - memorizza il titolo dell'immagine del livello corrente
Dichiara tutte le funzioni come Locale all'inizio.
-- Funzioni locali Main = local startButtonListeners = local showCredits = local hideCredits = local showGameView = local addBox = local removeBox = local onCollision = local alert =
Successivamente creeremo la funzione che inizializzerà tutta la logica di gioco.
funzione Main () - code ... end
Ora posizioniamo il TitleView nello stage e chiama una funzione che aggiungerà il rubinetto ascoltatori ai pulsanti.
function Main () titleBg = display.newImage ('titleBg.png', 84, 12) playBtn = display.newImage ('playBtn.png', 220, 150) creditsBtn = display.newImage ('creditsBtn.png', 204, 202) titleView = display.newGroup (titleBg, playBtn, creditsBtn) startButtonListeners ('add') end
In questa parte della serie abbiamo appreso 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 prima del rilascio. Analizzeremo i test delle app, creeremo una schermata iniziale, aggiungiamo un'icona e, infine, costruiamo l'app. Restate sintonizzati per la parte finale!