Costruisci un gioco di Air Hockey - Creazione di interfacce

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!


Disponibile anche in questa serie:

  1. Costruisci un gioco di Air Hockey - Creazione di interfacce
  2. Costruisci una partita di Air Hockey - Aggiunta di interazione

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 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:

  • iPad: 1024x768px, 132 ppi
  • iPhone / iPod Touch: 320x480px, 163 ppi
  • iPhone 4: 960x640px, 326 ppi

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

  • Google Nexus One: 480x800px, 254 ppi
  • Motorola Droid X: 854x480px, 228 ppi
  • HTC Evo: 480x800px, 217 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 intuitiva, che comprende più forme, pulsanti, bitmap e altro ancora.

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


Passaggio 4: Esporta grafica

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.


Passaggio 5: suono

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.


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


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 Dichiarate Funzioni Funzioni della classe contructor (funzione principale) (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. Usa questo codice per importarlo:

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

Passaggio 11: sfondo

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 12: 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 13: Vista dei crediti

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

 -- [CreditsView] creditsView locali

Step 14: Sfondo del gioco

Questa immagine sarà posizionata in cima al nostro precedente sfondo per aggiungere una sensazione simile ad un hockey.

 -- [Sfondo del gioco] gioco localeBg

Step 15: Puck

Questa è la grafica del puck, referenziata nella prossima variabile.

 -- [Puck] disco locale

Step 16: Pagaie

Player and Enemy o CPU paddle. Usato per colpire il disco.

 -- [Paddles] nemico locale del giocatore locale

Passaggio 17: Punteggio

Le variabili del punteggio vengono aggiunte per visualizzarle successivamente sullo schermo.

 -- Partiture local playerScore local enemyScore

Passaggio 18: suono

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

Step 19: Pareti

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

Passaggio 20: variabili

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

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 moveEnemy =  update locale = 

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

La prossima volta…

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!