Bygg en Groundhog Whack Game - Interface Creation

I denne opplæringsserien vil vi lage et Whack-a-Groundhog-spill. Målet med spillet er å trykke på groundhogs før de forsvinner. Les videre!


1. Intro-skjerm

På skjermbildet kan brukeren sette inn noen alternativer eller begynne å spille spillet.


2. Alternativer Skjerm

Alternativer skjermen vil tillate brukeren å slå på / av musikken og velge hvilken hastighet jordhugger vises.


3. Spillskjerm

Spillskjermbildet er hvor all handlingen foregår. Groundhogs spretter tilfeldig ut av hullene sine,
og spilleren prøver å "whack" dem før de går inn igjen. Spilleren kan også komme til valgskjermbildet herfra også.


4. Nytt prosjekt

Åpne Corona Simulator og velg "Nytt prosjekt".

På følgende skjermbilde velger du følgende innstillinger:

Trykk "neste"-knappen, velg deretter åpne i redaktør. Dette vil åpne "Main.lua"i standard tekstredigeringsprogrammet.


5. Prosjektering

Åpen "Config.lua"og slett alt. Oppdater filen med følgende:

 søknad = content = width = 320, height = 480, scale = "letterBox", fps = 30,

Dette setter prosjektets standardbredde, høyde, skala og FPS. "letterbox"skalainnstilling betyr at appen skal skalere i begge retninger like jevnt som mulig. Om nødvendig vil spillet vise" Letter Boxed ", som du ser i noen DVD-filmer eller med gamle apps på en iPhone 5.


6. Skjule statuslinjen

Vi vil ikke at statuslinjen vises i vår app, så skriv inn følgende i "Main.lua":

 display.setStatusBar (display.HiddenStatusBar);

7. Lokale variabler

Dette er alle variablene vi skal bruke i dette spillet. Les kommentarene for å forstå hva hver er for.

 local allGroundHogs =  - Tabell for å holde alle groundhogs lokale groundHogXPositions = 240,410,280,145,429,80,208,366 lokale groundHogYPositions = 259,259,209,184,166,118,91,99 lokale gameScreenGroup - gruppe som holder spillskjermen lokal introScreenGroup - gruppe som holder introen skjerm lokale alternativerScreenGroup - gruppe som har alternativer skjerm lokal isPlaying = false - om spilleren har startet spillet eller ikke lokal groundHogTimer-timer som brukes til å generere groundhogs lokal groundHogSpeed ​​= 1500

8. SetUpIntroScreen ()

De setUpIntroScreen () funksjonen brukes til å sette opp den første skjermen brukeren vil bli presentert med.

 funksjon setUpIntroScreen () slutten

9. SetUpOptionsScreen ()

De setUpOptionsScreen () funksjonen tar seg av å sette opp skjermbildet.

 funksjon setUpOptionsScreen () slutten

10. SetUpGameScreen ()

De setUpGameScreen () funksjonen setter opp spillskjermbildet.

 funksjon setUpGameScreen () slutten

11. GetRandomGroundHog ()

De getRandomGroundHog () funksjonen velger en tilfeldig groundhog som skal vises i ett av hullene.

 funksjon getRandomGroundHog () slutten

12. GroundHogSpriteListener ()

Denne funksjonen brukes til å fortelle når Groundhogs animasjon er avsluttet.

 funksjon groundHogSpriteListener (event) slutten

13. GroundHogHit ()

De groundHogHit (e) funksjonen brukes til å fortelle når spilleren har tappet en groundhog.

 funksjon groundHogHit (e) ende

14. SoundComplete ()

Når musikken slutter å spille, bruker vi denne funksjonen til å starte den på nytt.

 Funksjonen SoundComplete () End

15. Sette opp spillet BackGround

I dette trinnet vil vi begynne å sette opp spillskjermbildet. Skriv inn følgende kode inne i setUpGameScreen () funksjonen du skrev inn i trinnet ovenfor.

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

Helt nederst i "main.lua", skriv inn følgende:

 setUpGameScreen ()

Hvis du tester nå, bør du se spillets bakgrunn.


16. Konfigurere bildearket

Groundhogs er animert med et sprite ark. Skriv inn følgende under linjen gameScreenGroup: innsats (gameBackground) som du skrev inn i trinnet ovenfor.

 lokale alternativer = width = 142, height = 91, numFrames = 7 lokal imageSheet = graphics.newImageSheet ("groundhogsheet.png", alternativer)

De opsjoner variabel er en tabell som inneholder alternativene for bildearket. De bredde og høyde er bredden og høyden på bildene i "groundhogsheet.png", og numFrames er lik antall bilder i .png


17. Sequence Data

Nå som vi har vår imageSheet oppsett kan vi sette opp animasjonene. Animasjonsdataene (sekvens) holdes i en variabel sequenceData. Skriv inn følgende under koden ovenfor.

 lokal sequenceData = name = "show", start = 2, telle = 3, tid = 1000, loopCount = 0, loopDirection = "bounce"

Her heter vi sekvensen "show", the start er "rammen" av bildearket som sekvensen starter på og telle er antall rammer i sekvensen.

De loopCount er hvor mange ganger du vil at sekvensen skal spille. Null betyr for alltid, og loopDirection er hvordan du vil at sekvensen skal spille. Sprettingsalternativet betyr å spille fremover og deretter bakover.


18. GroundHog Sprites

Med imageSheet og sequenceData oppsett, vi kan plassere våre groundhogs og animere dem. Skriv inn følgende kode under sequenceData du kom inn i trinnet ovenfor.

 lokal tempGroundHog for i = 1, #groundHogXPositions gjør tempGroundHog = display.newSprite (imageSheet, sequenceData) tempGroundHog.x = groundHogXPositions [i] tempGroundHog.y = groundHogYPositions [i] tempGroundHog: setSequence ("show") gameScreenGroup: sett inn (tempGroundHog) table.insert (allGroundHogs, tempGroundHog) tempGroundHog: play () end

Hver gang gjennom løkken skaper vi en ny tempGroundHog Sprite, sett sin x en y posisjoner, sett sekvensen til "show", sett den inn i gameScreenGroup, og sett det inn i allGroundHogs bord.

Hvis du tester nå, bør du se alle groundhog-animasjonene som spilles. Det ser litt galt skjønt, og det er noe vi vil fikse i neste del av denne serien!


Konklusjon

Dette bringer den første delen av denne serien til en slutt. I neste del vil vi fullføre groundhog animasjonen og fullføre spilllogikken. Takk for at du leser og holder deg innstilt!