Crea un gioco ispirato a Lander Lunar - Creazione di interfacce

In questa serie di tutorial, imparerai come creare un gioco ispirato a Lunar Lander. L'obiettivo del gioco è quello di afferrare le stelle sullo schermo e poi atterrare in sicurezza nel punto indicato. Continuare a leggere!


Passaggio 1: Panoramica dell'applicazione

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.


Passaggio 2: dispositivo di destinazione

La prima cosa che dobbiamo fare è selezionare la piattaforma su cui vogliamo eseguire 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:

  • iPad 1/2: 1024x768px, 132 ppi
  • iPad 3: 2048x1536, 264 ppi
  • iPhone / iPod Touch: 320x480px, 163 ppi
  • iPhone 4 / iPod Touch: 960x640px, 326 ppi
  • iPhone 5 / iPod Touch: 1136x640, 326 ppi

Perché Android è una piattaforma aperta, ci sono molti diversi dispositivi e risoluzioni. Alcune delle caratteristiche dello schermo più comuni sono:

  • Tablet Asus Nexus 7: 800x1280 px, 216 ppi
  • Motorola Droid X: 854x480px, 228 ppi
  • Samsung Galaxy SIII: 720x1280px, 306 ppi

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.


Passaggio 3: interfaccia

Verrà utilizzata un'interfaccia semplice e amichevole. Coinvolgerà più forme, pulsanti, bitmap e altro ancora.

Le risorse grafiche dell'interfaccia necessarie per questo tutorial sono disponibili nel download allegato.

Carattere di libertà (gratuito per uso commerciale). Moon and Rocket Graphics da openclipart.org.


Passaggio 4: Esporta grafica

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 di salvarle nella cartella del progetto.


Passaggio 5: suono

Useremo effetti sonori per migliorare la sensazione del gioco. I suoni utilizzati in questa app sono stati generati da AS3SFXR.


Passaggio 6: configurazione dell'app

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",

Passaggio 7: Main.lua

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.


Passaggio 8: Struttura del codice

Struttureremo il nostro codice come se fosse una classe. Se conosci ActionScript o Java, dovresti trovare la struttura familiare.

 Classi Necessarie Variabili e costanti Denuncia Funzione Funzioni del costruttore (Funzione principale) metodi (altre funzioni) chiamata Funzione principale

Passaggio 9: Nascondi barra di stato

 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.


Passaggio 10: Importa fisica

Useremo la libreria di fisica per gestire le collisioni. Utilizzare questo codice per importare la libreria fisica:

 fisica locale = require ('fisica') physics.start ()

Passaggio 11: Multitouch

Useremo anche la libreria multi-touch per gestire più dita sullo schermo. Usa questo codice per importarlo:

 -- Sistema multitouch.activate ('multitouch')

Step 12: Background

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')

Passaggio 13: Vista titolo

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

Passaggio 14: Vista dei crediti

Questa vista mostrerà i crediti e il copyright del gioco, questa variabile verrà utilizzata per memorizzarla.

 -- [CreditsView] creditsView locali

Step 15: Game Pad

Questa immagine verrà posizionata in cima al nostro precedente sfondo. Le seguenti righe memorizzano la grafica per il pad sullo schermo.

 -- [Sfondo del gioco] gioco localeBg - [Pad] local up locale a sinistra locale a destra

Step 16: Lune

Queste sono le grafiche delle lune, referenziate nelle prossime variabili. La luna più grande sarà usata come punto di atterraggio.

 -- [Lune] locale m1 locale m2 locale m3 locale bigM

Passaggio 17: stelle

Gli oggetti da collezionare. Quattro oggetti devono essere raccolti prima di atterrare.

 -- Stelle locali s1 locali s2 locali s3 locali s4

Step 18: Rocket

Questa è la grafica che sarà controllata dal giocatore, usando il pad sullo schermo.

 -- Rocket (giocatore) razzo locale

Step 19: Landing Point

L'indicatore del punto di atterraggio diventa attivo quando vengono raccolte le quattro stelle.


Passaggio 20: variabili

Queste sono le variabili che useremo. Leggi i commenti nel codice per sapere di più su come si inseriranno.

 -- Variabili freccia locale stelle locali = 0 - stelle raccolte dir locale - direzione corrente hitMoon = false - utilizzato per il rilevamento delle collisioni su aggiornamento locale starHit local hitStar = false - utilizzato per il rilevamento delle collisioni su update local hitGoal = false - used per il rilevamento delle collisioni sull'aggiornamento locale completo

Passaggio 21: dichiarare funzioni

Dichiara tutte le funzioni come Locale all'inizio.

 -- Funzioni locali Main =  local startButtonListeners =  local showCredits =  local hideCredits =  local showGameView =  local gameListeners =  local movePlayer =  local update =  local onCollision = 

Passaggio 22: Costruttore

Successivamente, creeremo la funzione che inizializzerà tutta la logica di gioco:

 funzione Main () - code ... end

Passaggio 23: Aggiungi vista titolo

Ora posizioniamo il TitleView nello stage e chiamiamo una funzione che aggiungerà il rubinetto ascoltatori ai pulsanti.

 function Main () titleBg = display.newImage ('titleBg.png', display.contentCenterX - 100.5, 20.5) creditsBtn = display.newImage ('creditsBtn.png', 14, display.contentHeight - 57) titleView = display.newGroup ( titleBg, creditsBtn) startButtonListeners ('add') end

La prossima volta…

In questa parte della serie hai imparato l'interfaccia e l'impostazione di base del gioco. Nella parte successiva e finale della serie, gestiremo le azioni del game pad, il rilevamento delle collisioni e i passaggi finali da eseguire prima del rilascio, come il test delle app, la creazione di una schermata iniziale, l'aggiunta di un'icona e, infine, la creazione del app. Restate sintonizzati per la parte finale!