Crea un gioco Whack Groundhog - Creazione interfaccia

In questa serie di tutorial creeremo un gioco Whack-a-Groundhog. L'obiettivo del gioco è toccare le marmotte prima che scompaiano. Continuare a leggere!


1. Schermo introduttivo

La schermata di introduzione consentirà all'utente di impostare alcune opzioni o iniziare a giocare.


2. Schermata delle opzioni

La schermata delle opzioni consentirà all'utente di attivare / disattivare la musica e scegliere a quale velocità appaiono le marmotte.


3. Schermata di gioco

La schermata di gioco è dove si svolge tutta l'azione. Le marmotte saltano a caso fuori dai loro buchi,
e il giocatore prova a "picchiarli" prima che tornino dentro. Il giocatore può anche arrivare alla schermata delle opzioni da qui.


4. Nuovo progetto

Apri il simulatore Corona e scegli "Nuovo progetto".

Nella schermata che segue, scegli le seguenti impostazioni:

Premi il "Il prossimo"pulsante, quindi scegliere apri nell'editor. Questo si aprirà "Main.lua"nel tuo editor di testo predefinito.


5. Configurazione del progetto

Aperto "config.lua"ed elimina tutto. Aggiorna il file con il seguente:

 application = content = width = 320, height = 480, scale = "letterBox", fps = 30,

Questo imposta la larghezza, l'altezza, la scala e l'FPS predefiniti del progetto. Il "letterBox"Impostazione della scala significa che l'app si scalerà in entrambe le direzioni nel modo più uniforme possibile, se necessario il gioco visualizzerà" Letter Boxed ", come si vede in alcuni film in DVD o con vecchie app su un iPhone 5.


6. Nascondere la barra di stato

Non vogliamo che la barra di stato venga visualizzata nella nostra app, quindi inserisci quanto segue in "Main.lua":

 display.setStatusBar (display.HiddenStatusBar);

7. Variabili locali

Queste sono tutte le variabili che useremo in questo gioco. Leggi i commenti per capire a cosa serve ciascuno.

 local allGroundHogs =  - Tabella per contenere tutti i groundhog locali groundHogXPositions = 240,410,280,145,429,80,208,366 ground localeHogYPositions = 259,259,209,284,166,118,91,99 local gameScreenGroup - gruppo che contiene la schermata di gioco locale introScreenGroup - gruppo che contiene l'intro schermo opzioni localiScreenGroup - gruppo che mantiene la schermata delle opzioni isPlaying locale = falso - se il giocatore ha iniziato il gioco o meno GroundHogTimer locale - timer che viene utilizzato per generare Groundhogs GroundHogSpeed ​​= 1500

8. SetUpIntroScreen ()

Il setUpIntroScreen () la funzione viene utilizzata per impostare la prima schermata con la quale verrà presentato l'utente.

 funzione setUpIntroScreen () fine

9. SetUpOptionsScreen ()

Il setUpOptionsScreen () la funzione si occupa della configurazione della schermata delle opzioni.

 funzione setUpOptionsScreen () fine

10. SetUpGameScreen ()

Il setUpGameScreen () la funzione imposta la schermata di gioco.

 funzione setUpGameScreen () fine

11. GetRandomGroundHog ()

Il getRandomGroundHog () la funzione seleziona una marmotta casuale da visualizzare in uno dei fori.

 funzione getRandomGroundHog () fine

12. GroundHogSpriteListener ()

Questa funzione è usata per dire quando l'animazione del groundhog è terminata.

 funzione groundHogSpriteListener (evento) fine

13. GroundHogHit ()

Il groundHogHit (e) la funzione è usata per dire quando il giocatore ha toccato una marmotta.

 funzione groundHogHit (e) end

14. SoundComplete ()

Quando la musica smette di suonare usiamo questa funzione per ricominciare da capo.

 funzione soundComplete () end

15. Impostazione del gioco BackGround

In questo passaggio inizieremo a configurare la schermata di gioco. Inserisci il seguente codice all'interno del setUpGameScreen () funzione inserita nel passaggio precedente.

 gameScreenGroup = display.newGroup () local gameBackground = display.newImage ("background.png", true); gameScreenGroup: inserire (gameBackground)

Alla fine di "main.lua", inserisci quanto segue:

 setUpGameScreen ()

Se provi ora dovresti vedere lo sfondo del gioco.


16. Impostazione del foglio di immagine

Le marmotte sono animate usando un foglio sprite. Inserisci il seguente sotto la linea gameScreenGroup: inserire (gameBackground) che hai inserito nel passaggio sopra.

 opzioni locali = larghezza = 142, altezza = 91, numFrames = 7 local imageSheet = graphics.newImageSheet ("groundhogsheet.png", opzioni)

Il opzioni variabile è una tabella che contiene le opzioni per il foglio di immagine. Il larghezza e altezza sono la larghezza e l'altezza delle immagini nel "groundhogsheet.png", e il numFrames è uguale al numero di immagini nel file .png


17. Dati di sequenza

Ora che abbiamo il nostro imageSheet setup possiamo configurare le animazioni. I dati di animazione (sequenza) sono mantenuti in una variabile sequenceData. Inserisci quanto segue sotto il codice dall'alto.

 sequenceData locale = name = "show", start = 2, count = 3, time = 1000, loopCount = 0, loopDirection = "bounce"

Qui chiamiamo la sequenza "show", il inizio è il "frame" di imageSheet in cui inizia la sequenza e contare è il numero di frame nella sequenza.

Il loopCount è quante volte vuoi che la sequenza suoni. Zero significa per sempre, e il loopDirection è come vuoi che la sequenza suoni. L'opzione di rimbalzo significa play forward, quindi backwards.


18. Sprites GroundHog

Con il imageSheet e sequenceData setup, possiamo posizionare le marmotte e animarle. Inserisci il seguente codice sotto il sequenceData sei entrato nel passo sopra.

 tempGroundHog locale per i = 1, #groundHogXPositions do tempGroundHog = display.newSprite (imageSheet, sequenceData) tempGroundHog.x = groundHogXPositions [i] tempGroundHog.y = groundHogYPositions [i] tempGroundHog: setSequence ("show") gameScreenGroup: insert (tempGroundHog) table.insert (allGroundHogs, tempGroundHog) tempGroundHog: play () fine

Ogni volta attraverso il ciclo creiamo un nuovo tempGroundHog Sprite, imposta il suo X un y posizioni, impostare la Sequenza su "Mostra", inserirla nel gameScreenGroup, e quindi inserirlo nel allGroundHogs tavolo.

Se stai provando ora dovresti vedere tutte le animazioni di marmotta giocare. Sembra un po 'sbagliato, ed è qualcosa che sistemeremo nella prossima parte di questa serie!


Conclusione

Questo porta alla fine la prima parte di questa serie. Nella parte successiva finiremo l'animazione della marmotta e completeremo la logica del gioco. Grazie per la lettura e restate sintonizzati!