Share
In questa serie di tutorial creeremo un gioco Whack-a-Groundhog. L'obiettivo del gioco è toccare le marmotte prima che scompaiano. Continuare a leggere!
Nella parte precedente di questa serie abbiamo aggiunto lo sfondo del gioco e abbiamo iniziato ad animare le nostre marmotte. In questa parte finale della serie, implementeremo il gameplay, le opzioni e la schermata iniziale della nostra app, per poi finire con un gioco completo!
Come il gioco è ora, le marmotte animano per sempre e non sembrano tornare nei loro buchi. Abbiamo bisogno di aggiungere altre chiavi al nostro sequenceData per risolvere questo. Aggiungi il seguente all'interno del setupGameScreen () funzione:
sequenceData locale = name = "show", start = 2, count = 3, time = 800, loopCount = 1, loopDirection = "bounce", name = "blank", start = 1, count = 1, name = "hit1", start = 5, count = 1, name = "hit2", start = 6, count = 1, name = "hit3", start = 7, count = 1
La sequenza "vuota" è un'immagine vuota trasparente che fa parte del foglio sprite e le sequenze "hit1", "hit2" e "hit3" sono 3 diversi stati "hit" del groundhog. Guarda l'immagine "groundhogsheet.png" per vederlo da solo.
Assicurati di aver impostato il loopCount uguale a 1 nella sequenza "mostra".
Ora cambia il seguente blocco di codice:
Accentsconagua
tempGroundHog: setSequence ("blank") tempGroundHog: addEventListener ('tap', groundHogHit); Qui abbiamo impostato la sequenza su "vuoto" e aggiunto un ascoltatore del tocco allo sprite di marmotta.
Quindi, rimuovere la seguente riga di codice:
tempGroundHog: play ()
Se provi ora, nessuno dei groundhog dovrebbe animare. Presto avremo una marmotta casuale che si anima!
Quando la marmotta viene TAPpata, determineremo se è stata o meno fuori dal suo buco. Se è così, cambieremo la sua sequenza in uno dei tre hit state che abbiamo aggiunto nel passaggio precedente.
Aggiungi il seguente all'interno del groundHogHit () funzione:
local thisSprite = e.target thisSprite: removeEventListener ("sprite", groundHogSpriteListener) local function hide () thisSprite: setSequence ("blank") end if (thisSprite.sequence == "show") then randomIndex locale = math.random (3 ) thisSprite: setSequence ("hit" ... randomIndex) timer.performWithDelay (1000, nascondi) fine Qui facciamo riferimento allo Sprite su cui è stato fatto clic e.target e rimuovi il suo listener di eventi. Quindi controlliamo se la sua sequenza è uguale a "show". Se lo è, generiamo un numero compreso tra 1 e 3 e impostiamo la sua sequenza uguale a "colpisci" ... randomIndex. Tutto ciò che fa è generare le stringhe "hit1", "hit2" o "hit3". Infine, chiamiamo la funzione hide locale dopo 1000 millisecondi che imposta la sequenza degli Sprites su "blank".
Il getRandomGroundHog () la funzione ottiene una marmotta casuale e consente di iniziare l'animazione. Inserisci il seguente all'interno del funzione getRandomGroundHog ():
local randomIndex = math.random (#allGroundHogs) local randomGroundHog = allGroundHogs [randomIndex] if (randomGroundHog.sequence ~ = "blank") then getRandomGroundHog () else randomGroundHog: addEventListener ("sprite", groundHogSpriteListener) randomGroundHog: setSequence ("mostra" ) randomGroundHog: play () fine Qui otteniamo a randomIndex dal allGroundHogs tavolo. Quindi, impostiamo il randomGroundHog uguale all'indice. Controlliamo quindi se la sua sequenza non è uguale a "vuoto" e, in caso contrario, chiamiamo getRandomGroundHog () ancora. Altrimenti, aggiungiamo il groundHogSpriteListener per impostare la sequenza su "mostra" e suona la sequenza.
Il groundHogSpriteListener () controlla se la sequenza "mostra" ha finito di suonare. Se è così, lo imposta sulla sequenza "vuota". Inserisci il seguente all'interno del groundHogSpriteListener ():
local thisSprite = event.target - "event.target" fa riferimento allo sprite if (event.phase == "ended") then if (thisSprite.sequence == "show") then thisSprite: setSequence ("blank") end - - un ritardo di mezzo secondo Con tutto quanto sopra posto otteniamo animazioni di groundhogs casuali. Aggiungi il seguente alla fine delsetUpGameScreen () funzione:
groundHogTimer = timer.performWithDelay (groundHogSpeed, getRandomGroundHog, 0)
Se provi ora dovresti vedere le marmotte saltar fuori casualmente dai loro buchi. Mentre sei lì, prova a cliccare sulle marmotte mentre sono fuori dai loro buchi. Dovresti vedere uno dei 3 stati di successo, e quindi lo stato vuoto.
Quando hai terminato il test, rimuovi la linea appena inserita. Ne avevamo solo bisogno per il test.
In questo passaggio inizieremo a configurare la schermata di introduzione. Inserisci il seguente codice all'interno del setUpIntroScreen funzione:
media.playSound ("gameTrack.mp3", soundComplete) introScreenGroup = display.newGroup () local titleScreen = display.newImage ("titleScreen.png") local playButton = display.newImage ("playButton.png", 100,100) local optionsButton = display.newImage ("optionsButton.png", 100,170) introScreenGroup: insert (titleScreen) introScreenGroup: insert (playButton) introScreenGroup: insert (optionsButton) Qui iniziamo la colonna sonora, configuriamo la schermata di introduzione e aggiungiamo il playButton e pulsante Opzioni grafica.
Ora chiama il setUpIntroScreen () funzione al di sotto della quale stai chiamando il setUpGameScreen () funzione…
setUpGameScreen () setUpIntroScreen ()
Se provi ora dovresti vedere la schermata introduttiva. Abbiamo bisogno di aggiungere Event Listers ai pulsanti e questo è ciò che faremo nei prossimi passi.
Inserisci quanto segue sotto il codice inserito nel passaggio precedente:
playButton: addEventListener ("tap", function () transition.to (introScreenGroup, time = 300, x = -480, onComplete = function () groundHogTimer = timer.performWithDelay (groundHogSpeed, getRandomGroundHog, 0) end) isPlaying = true fine ) Quando si preme il pulsante di riproduzione, si anima la schermata di introduzione a sinistra, imposta il nostro groundHogTimer generare marmotte casuali e quindi impostare il sta giocando variabile a vero.
Se provi ora, dovresti essere in grado di iniziare una nuova partita, ma vorremmo che fossero disponibili anche alcune opzioni. Lo faremo dopo.
Inserisci quanto segue sotto il codice inserito nel passaggio sopra.
optionsButton: addEventListener ("tap", function () transition.to (optionsScreenGroup, time = 300, y = 0, onComplete = function () introScreenGroup. x = -480 end) end) Questo codice anima la schermata delle opzioni dall'alto. Quando l'animazione è completa, mette il introScreenGroup fuori dalla schermata principale a sinistra.
Se provi ora e premi il pulsante delle opzioni non vedrai accadere nulla, e questo perché non abbiamo ancora creato la schermata delle opzioni.
Inserisci il seguente all'interno del setUpOptionsScreen () funzione:
optionsScreenGroup = display.newGroup () local optionsScreen = display.newImage ("optionsScreen.png") local backButton = display.newImage ("backButton.png", 130,240) local soundOnText = display.newText ("Sound On / Off", 75,105 , native.systemFontBold, 16) local groundHogSpeedText = display.newText ("Speed", 75,145, native.systemFontBold, 16) optionsScreenGroup: insert (optionsScreen) optionsScreenGroup: insert (backButton) optionsScreenGroup: insert (soundOnText) optionsScreenGroup: insert (groundHogSpeedText) optionsScreenGroup.y = -325 Qui installiamo il schermata Opzioni, Aggiungi il tasto indietro, e aggiungi un paio di testi.
Ora chiama questa funzione sotto la quale stai chiamando setUpIntroScreen:
setUpIntroScreen () setUpOptionsScreen ()
Se testi il gioco ora dovresti vedere la schermata delle opzioni scorrere verso il basso dall'alto.
Utilizzeremo il widget casella di controllo per consentire all'utente di attivare / disattivare l'audio. Immettere quanto segue nella parte superiore del file "main.lua".
widget locale = require ("widget") Per poter usare lo Switch e altri widget dobbiamo prima richiedere il modulo "widget"
Ora inserisci quanto segue sotto il codice che hai inserito sopra setUpOptionsScreen.
soundCheckBox locale = widget.newSwitch left = 210, top = 98, style = "checkbox", initialSwitchState = true, onPress = function (e) local check = e.target if (check.isOn) then media.playSound ("gameTrack .mp3 ", soundComplete) else media.stopSound () end end optionsScreenGroup: insert (soundCheckBox) Questo imposta il nostro widget checkbox impostando "style" uguale a "checkbox". Controlliamo se la casella di controllo Ison (se è selezionato), e in tal caso suoniamo "gameTrack.mp3". Altrimenti, interrompiamo il suono.
Se provi ora e vai alla schermata delle opzioni, dovresti essere in grado di attivare o disattivare l'audio.
Usiamo un SegmentedControl per consentire all'utente di scegliere la velocità con cui devono apparire i GroundHogs. Inserisci il seguente codice sotto il codice per la casella di controllo che hai inserito nel passaggio precedente:
speedControl locale = widget.newSegmentedControl left = 210, top = 140, segments = "slow", "medium", "fast", segmentWidth = 50, defaultSegment = 1, onPress = function (event) local target = event. target if (target.segmentNumber == 1) then groundHogSpeed = 1500 elseif (target.segmentNumber == 2) then groundHogSpeed = 1000 else groundHogSpeed = 700 end end optionsScreenGroup: insert (speedControl)
Qui creiamo un SegmentedControl con 3 segmenti ("lento", "medio", "veloce"). A seconda del segmento che l'utente ha premuto, impostiamo il groundHogSpeed variabile di conseguenza.
Se provi ora dovresti vedere SegmentedControl e poter selezionare un segmento, ma dobbiamo collegare il pulsante Indietro per tornare alla schermata di introduzione.
Il tasto indietro ci riporta alla schermata di introduzione. Inserisci il codice seguente sotto il passaggio precedente:
backButton: addEventListener ("tap", function () if (isPlaying == false) then introScreenGroup.x = 0 end transition.to (optionsScreenGroup, time = 300, y = -325, onComplete = function () if (isPlaying = = true) then groundHogTimer = timer.performWithDelay (groundHogSpeed, getRandomGroundHog, 0) end end) end) Qui controlliamo se il gioco è iniziato. Altrimenti, inseriamo il introScreenGroup di nuovo nell'area di gioco. Quindi eseguiamo il backup della schermata delle opzioni. Se il gioco è iniziato, impostiamo il groundHogtimer generare marmotte casuali.
Dobbiamo essere in grado di arrivare alla schermata delle opzioni dalla schermata di gioco principale. Aggiungi il seguente sotto dove stai inserendo il gameBackground nel gameScreenGroup ().
gameScreenGroup: insert (gameBackground) local optionsButton = display.newImage ("optionsButton.png", 1.270) gameScreenGroup: insert (optionsButton) Se fai il test ora dovresti vedere il pulsante delle opzioni nella schermata di gioco.
Ora dobbiamo collegare il pulsante delle opzioni con EventListener. Per fare ciò, inserisci il seguente codice sotto il ciclo che crea tutte le marmotte.
optionsButton: addEventListener ("tap", function (e) timer.cancel (groundHogTimer) transition.to (optionsScreenGroup, time = 300, y = 0, onComplete = function () end) end) Qui cancelliamo il groundHogTimer e sposta la schermata delle opzioni verso il basso.
Ora prova, dovresti essere in grado di accedere alla schermata delle opzioni dalla schermata di gioco. Dovresti anche essere in grado di impostare le opzioni come desiderato.
Se hai suonato abbastanza a lungo perché la colonna sonora finisca, potresti aver notato che non è ricominciato. Inserisci il seguente all'interno del soundComplete () funzione.
media.playSound ("gameTrack.mp3", soundComplete) Ciò avvia appena la riproduzione della colonna sonora una volta completata.
In questa serie, abbiamo imparato a creare un divertente e interessante gioco Whack-a-Groundhog. In tal modo, hai imparato come utilizzare fogli e suoni sprite. Spero tu abbia trovato utile questo tutorial e grazie per la lettura!
