Lag et Pinball Game Grensesnitt Opprettelse

I denne todelte opplæringsserien lærer du hvordan du lager et Pinball-spill. Målet med spillet er å slå ballen ved hjelp av padlene 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 ball ved hjelp av knappene på scenen. 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 bruker.

IOS-plattformen har disse egenskapene:

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

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

  • Google Nexus One: 480x800px, 254 ppi
  • Motorola Droid X: 854x480px, 228 ppi
  • HTC Evo: 480x800px, 217 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, du kan finne lydene som brukes i dette eksemplet i Soungle.com ved hjelp av søkeordene klokke og buzz.


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

Vi bruker Fysikk biblioteket til å håndtere kollisjoner. Bruk denne koden til å importere den:

 lokal fysikk = krever (fysikk) fysikk.start ()

Trinn 11: Spill Bakgrunn

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

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

Trinn 12: 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 13: Kredittvisning

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

 -- [CreditsView] lokale kreditterVis

Trinn 14: Vegger

Veggene hvor ballen vil kunne hoppe.

Siden vi skal bruke fysikk til å lage nøyaktig samme polygoner, vil vi bryte hver side i fire deler. Delene er merket med røde linjer.

 -- [Vegger] lokale l1 lokale l2 lokale l3 lokale l4 lokale r1 lokale r2 lokale r3 lokale r4

Trinn 15: Ball

Dette er ballen grafisk, referert i neste variabel.

 -- [Ball] lokal ball

Trinn 16: Hit-linjer

Vi vil legge til noen hindringer i spillet, disse vil være dem.

 -- [Hit Lines] lokal hitLine1 lokal hitLine2

Trinn 17: Hit Balls

Disse ballene er målet for pinball, og slå dem vil øke poengsummen.

 -- [Hit Balls] lokal hitBall1 lokal hitBall2 lokal hitBall3

Trinn 18: Padler

Venstre og høyre padle. Brukes til å slå ballen

 -- [Paddles] lokal pLeft lokal pRight

Trinn 19: Kontrollknapper

Disse knappene vil flytte padlene som gjør at ballen hopper.

 -- [Paddle Buttons] lokal lBtn lokal rBtn

Trinn 20: Score

En scorevariabel legges til for å vise den senere på skjermen.

 -- Score lokal score

Trinn 21: Lyder

De neste linjene lagrer en referanse for lydfilene.

 lokal bell = audio.loadSound ('bell.caf') lokal buzz = audio.loadSound ('buzz.caf')

Trinn 22: Variabler

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

 -- Variabler lokale siste - brukes til å huske tittel bmp posisjon

Trinn 23: Erklær Funksjoner

Erklære alle funksjoner som lokal i begynnelsen.

 -- Funksjoner lokale Main =  lokale startButtonListeners =  lokale showCredits =  lokale hideCredits =  lokal showGameView =  lokal spillListeners =  lokal movePaddle =  lokal onCollision =  lokal oppdatering = 

Trinn 24: Konstruktør

Deretter skal vi opprette funksjonen som vil initialisere all spilllogikken:

 funksjon Hoved () - kode ... ende

Trinn 25: 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 ('title.png', display.contentCenterX - 97, 96) playBtn = display.newImage ('playBtn.png', display.contentCenterX - 30, display.contentCenterY + 10) creditsBtn = display.newImage ('creditsBtn.png', display.contentCenterX - 44.5, display.contentCenterY + 65) titleView = display.newGroup (titleBg, playBtn, creditsBtn) startButtonListeners ('add') slutten

Trinn 26: Startknappslyttere

Denne funksjonen legger de nødvendige lytterne til TitleView knapper.

 funksjon startButtonListeners (action) hvis (action == 'add') så spillBtn: addEventListener ('tap', showGameView) kreditterBtn: addEventListener ('tap', showCredit) annet playBtn: removeEventListener ('tap', showGameView) creditsBtn: removeEventListener "trykk", showCredits) slutten

Trinn 27: Vis kreditt

Kredittskjermbildet vises når brukeren tapper om knappen, a springen lytteren legges til kredittvisningen for å fjerne den.

 funksjonsvisningKreditter: trykk (e) playBtn.isVisible = false creditsBtn.isVisible = false creditsView = display.newImage ('credits.png', 0, display.contentHeight) lastY = titleBg.y transition.to (titleBg, time = 300 , y = (display.contentHeight * 0.5) - (titleBg.height + 50)) transition.to (creditsVis, time = 300, y = (display.contentHeight * 0.5) +35, onComplete = function addEventListener ('tap', hideCredits) end) slutten

Trinn 28: Skjul kreditt

Når kreditter skjermen er tappet, vil den bli tweened ut av scenen og fjernet.

 funksjon hideCredits: trykk (e) transition.to (creditsView, time = 300, y = display.contentHeight + 25, onComplete = funksjon () kreditterBtn.isVisible = true playBtn.isVisible = true creditsView: removeEventListener ) display.remove (creditsView) creditsView = null end) transition.to (titleBg, time = 300, y = lastY); slutt

Neste gang…

I denne delen av serien har du lært grensesnittet og det grunnleggende oppsettet av spillet. I den neste og siste delen av serien behandler vi padlebevegelsen, kollisjonsdeteksjonen og de endelige trinnene for å ta forut for utgivelsen som app testing, lage en startskjerm, legge til et ikon og endelig bygge appen. Hold deg oppdatert på den siste delen!