Crea un gioco di puzzle basato sulla fisica - Creazione di interfacce

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!


Disponibile anche in questa serie:

  1. Crea un gioco di puzzle basato sulla fisica - Creazione di interfacce
  2. Crea un gioco di puzzle basato sulla fisica - Aggiunta di interazione

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 utilizzare il touch screen sul dispositivo per rimuovere le caselle sul palco. È possibile modificare i parametri nel codice per personalizzare il gioco.


2. Dispositivo di destinazione

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.

  • iPad 1/2 / Mini: 1024x768px, 132 PPI
  • Retina iPad: 2048x1536, 264 PPI
  • iPhone / iPod Touch: 320x480px, 163 PPI
  • Retina per iPhone / iPod: 960x640px, 326 PPI
  • iPhone 5 / iPod Touch: 1136x640, 326 PPI

Poiché Android è una piattaforma aperta, ci sono molti dispositivi e risoluzioni diversi. Ecco alcune delle caratteristiche dello schermo più comuni.

  • 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 sviluppiamo per la distribuzione su un iPhone / iPod touch. Il codice presentato qui dovrebbe applicarsi anche allo sviluppo Android con Corona SDK.


3. Interfaccia

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.


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 nel Anteprima app su Mac OS X.

Ricordarsi di assegnare alle immagini un nome descrittivo e salvarle nella cartella del progetto.


5. Configurazione dell'app

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

6. Main.lua

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.


7. Struttura del codice

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

8. 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.


9. Importa fisica

Useremo la libreria fisica per gestire le collisioni. Usa il codice qui sotto per importarlo.

 -- Fisica fisica locale = richiede ('fisica') physics.start ()

10. Contesto

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

11. Vista del titolo

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

12. Vista dei crediti

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

 -- [CreditsView] creditsView locali

13. Scatole

Le scatole creano il livello. Ci sono tre dimensioni in questa applicazione.


14. Messaggio di istruzioni

Un messaggio di istruzioni apparirà all'inizio del gioco. Sarà interrotto dopo due secondi.

 -- Istruzioni locali ins

15. Palla

Questa è la grafica della palla. L'obiettivo del gioco è mettere questo oggetto nella casella obiettivo.

 -- Palla palla locale

16. Scatola degli obiettivi

Questo codice memorizza la grafica del riquadro obiettivo.

 -- GoBox Box gBox locale

17. Avviso

Questo è l'avviso che verrà visualizzato quando vinci il gioco. Completerà il livello e terminerà il gioco.

 -- Avvisa locale alertView

18. Suoni

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

19. Variabili

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

20. Dichiarare funzioni

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 = 

21. Costruttore

Successivamente creeremo la funzione che inizializzerà tutta la logica di gioco.

 funzione Main () - code ... end

22. Aggiungi la vista del titolo

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

La prossima volta…


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!