Bygg et Snake Game - Grensesnitt Creation

I denne opplæringsserien lærer du hvordan du lager et spill som Snake. Målet med spillet er å ta tak i eplene på skjermen for å øke poengsummen. Les videre!


Trinn 1: Programoversikt

Ved å bruke pre-laget grafikk vil vi kode et underholdende spill ved hjelp av Lua og Corona SDK API.

Spilleren vil kunne slå en puck ved å dra padle på skjermen, du kan endre parametrene i koden for å tilpasse spillet.

Trinn 2: Målgruppe

Det første vi må gjøre er å velge plattformen vi vil kjøre vår app på, slik at vi kan velge størrelsen på bildene vi skal bruke.

IOS-plattformen har disse egenskapene:

  • iPad 1/2: 1024x768px, 132 ppi
  • iPad 3: 2048x1536, 264 ppi
  • iPhone / iPod Touch: 320x480px, 163 ppi
  • iPhone 4 / iPod Touch: 960x640px, 326 ppi
  • iPhone 5 / iPod Touch: 1136x640, 326 ppi

Fordi Android er en åpen plattform, er det mange forskjellige enheter og løsninger. Noen av de vanligste skjermegenskapene er:

  • Asus Nexus 7 Tablet: 800x1280px, 216 ppi
  • Motorola Droid X: 854x480px, 228 ppi
  • Samsung Galaxy SIII: 720x1280px, 306 ppi

I denne opplæringen vil vi fokusere på iOS-plattformen med grafisk design, spesielt utviklet for distribusjon til en iPhone / iPod touch, men koden som presenteres her, bør gjelde for Android-utvikling med Corona SDK også.


Trinn 3: Grensesnitt

Et enkelt og vennlig grensesnitt vil bli brukt. Dette innebærer flere former, knapper, bitmaps og mer.

Grensesnittet grafiske ressurser som kreves for denne opplæringen finner du i vedlagte nedlastning.


Trinn 4: Eksporter grafikk

Avhengig av hvilken enhet du har valgt, må du kanskje eksportere grafikken i anbefalt ppi, du kan gjøre det i favorittbildeditoren din.

Jeg brukte Juster størrelse ... Fungerer i Forhåndsvisning-appen på Mac OS X.

Husk å gi bildene et beskrivende navn og lagre dem i prosjektmappen din.


Trinn 5: Lyd

Vi bruker lydeffekter for å forbedre følelsen av spillet, lydene som brukes i denne appen ble generert av AS3SFXR.


Trinn 6: Appkonfigurasjon

En ekstern fil vil bli brukt til å gjøre programmet gå fullskjerm på tvers av enheter, config.lua fil. Denne filen viser den opprinnelige skjermstørrelsen og metoden som brukes til å skalere innholdet hvis appen kjøres i en annen skjermoppløsning.

 søknad = content = width = 320, height = 480, scale = "letterbox",

Trinn 7: Main.lua

La oss skrive søknaden!

Åpne din foretrukne Lua-editor (noen tekstredigerer vil fungere, men du vil ikke ha syntaxutheving) og forberede deg på å skrive din fantastiske app. Husk å lagre filen som main.lua i prosjektmappen din.


Trinn 8: Kodestruktur

Vi strukturerer vår kode som om den var en klasse. Hvis du kjenner ActionScript eller Java, bør du finne strukturen kjent.

 Necesary Classes Variabler og Constants Declare Funksjoner contructor (Hovedfunksjon) klassemetoder (andre funksjoner) ring Hovedfunksjon

Trinn 9: Skjul statuslinje

 display.setStatusBar (display.HiddenStatusBar)

Denne koden skjuler statuslinjen. Statuslinjen er linjen øverst på skjermbildet som viser tid, signal og andre indikatorer.


Trinn 10: Bakgrunn

En enkel grafikk brukes som bakgrunn for applikasjonsgrensesnittet, den neste koden lagrer den.

 -- Grafikk - [Bakgrunn] lokal bg = display.newImage ('bg.png')

Trinn 11: Tittelvisning

Dette er tittelvisningen, det vil bli den første interaktive skjermen som skal vises i vårt spill. Disse variablene lagrer komponentene sine.

 -- [Title View] lokal tittelBg lokal playBtn lokale kreditterBet lokal tittelView

Trinn 12: Kredittvisning

Denne visningen vil vise kreditter og opphavsrett til spillet, denne variabelen vil bli brukt til å lagre den.

 -- [CreditsView] lokale kreditterVis

Trinn 13: Spillbakgrunn

Dette bildet blir plassert på toppen av vår tidligere bakgrunn. Følgende linjer lagrer også grafikken for skjermen på skjermbildet.

 -- [Spill Bakgrunn] Local gameBg - [Pad] Lokal opp lokal venstre lokal nedre lokal høyre

Trinn 14: Apple

Dette er epleprøven, referert i neste variabel. Griping disse elementene vil øke slangen størrelse / deler.

 -- [Apple] lokale eple

Trinn 15: Hodet

Den første delen av slangen, det kommer til å være i scenen ved starten. EN hit område vil bli opprettet på toppen av det, og begge vil bli gruppert i hode variabel.

 -- Leder lokale headGFX lokale headHitArea lokalhode

Trinn 16: Snake Del

Denne grafikken vil bli lagt til hver gang ormen spiser et eple.


Trinn 17: Score

Neste linje håndterer tekstfeltet som viser resultatene.

 -- Score lokal score

Trinn 18: Variabler

Dette er variablene vi skal bruke, les kommentarene i koden for å få vite mer om dem.

 -- Variabler lokal dir - Start retningen for slangen lokal startet - Brukes til å starte timeren lokal timerSrc lokal hastighet = 500 lokale mConst = 17 - # piksler for å flytte hver timer teller lokale epler - Anlegg gruppe Lokal sistePart - Last del legges til slange lokal førstepart lokale deler - deler gruppe lokal strøm = 0 - et nummer tildelt hver del

Trinn 19: Erklære funksjoner

Erklære alle funksjoner som lokal i begynnelsen.

 -- Funksjoner lokale Main =  lokale startButtonListeners =  lokale showCredits =  lokale hideCredits =  lokal showGameView =  lokal spillListeners =  lokal movePlayer =  lokal hitTestObjects =  lokal oppdatering = 

Trinn 20: Konstruktør

Deretter skal vi opprette funksjonen som vil initialisere all spilllogikken:

 funksjon Hoved () - kode ... ende

Trinn 21: Legg til tittelvisning

Nå plasserer vi tittelvisningen i scenen og kaller en funksjon som vil legge til springen lytter til knappene.

 funksjon Main () titleBg = display.newImage ('titleBg.png', display.contentCenterX - 100.5, 40.5) playBtn = display.newImage ('playBtn.png', display.contentCenterX - 27, display.contentCenterY + 10) creditsBtn = display.newImage ('creditsBtn.png', display.contentCenterX - 48, display.contentCenterY + 65) titleView = display.newGroup (titleBg, playBtn, creditsBtn) startButtonListeners ('add') slutten

Neste gang…

I denne delen av serien har du lært grensesnittet og det grunnleggende oppsettet av spillet. I neste og siste del av serien behandler vi Snake-bevegelsen, kollisjonsdeteksjonen og de endelige trinnene for å ta før apputgivelsen som testing, lage en startskjerm, legge til et ikon og endelig bygge appen. Hold deg oppdatert på den siste delen!