Lag et lydbasert minne spill - grensesnittoppretting

I denne opplæringsserien vil jeg vise deg hvordan du lager et lydbasert minne spill med Corona SDK. Du lærer om lasting og avspilling av lyd, samt lagring av informasjon i Lua Tables. Målet med spillet er å reprodusere nivålyden ved å trykke på fargekvadratene. Les videre!


Også tilgjengelig i denne serien:

  1. Lag et lydbasert minne spill - grensesnittoppretting
  2. Lag et lydbasert minne spill - spilllogikk

1. Applikasjonsoversikt

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

Spilleren vil kunne bruke knappene på skjermen for å gjengi gjeldende lydsekvens, du kan endre parametrene i koden for å tilpasse spillet.


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 / Mini: 1024x768px, 132 ppi
  • iPad Retina: 2048x1536, 264 ppi
  • iPhone / iPod Touch: 320x480px, 163 ppi
  • iPhone / iPod Retina: 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å.


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.


4. Eksporter grafikk

Avhengig av hvilken enhet du har valgt, må du kanskje eksportere grafikken i den anbefalte PPI-en, slik kan du 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.


5. 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",

6. Main.lua

La oss skrive søknaden!

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


7. Kode struktur

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

8. Skjul statuslinje

 display.setStatusBar (display.HiddenStatusBar)

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


9. Bakgrunn

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

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

10. 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 tittel lokal playBtn local creditsBtn local titleView

11. Credits View

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

 -- [CreditsView] lokale kreditterVis

12. Kvadratknapper

Knappene som brukes til å reprodusere lyden.

 -- Fargefelt lokal r =  lokal g =  lokal ye =  lokal b = 

13. Instruksjonsmelding

En instruksjonsmelding vises i starten av spillet, når meldingen blir avvist, vil lydsekvensen spilles av.

 -- Instruksjoner lokale ins

14. Kontroller knapp

Denne knappen vil sammenligne brukerinngangene til det nåværende nivået for å finne ut om sekvensen er riktig eller ikke.

 -- Kontroller knappens lokale kontroll

15. Alert

Dette er varselet som vil bli vist når du vinner spillet. Det vil fullføre nivået og avslutte spillet.

 -- Varsle lokal varslingView

16. Lyder

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

 -- Lyder rs = audio.loadSound ('1.mp3') gs = audio.loadSound ('2.mp3') ye.s = audio.loadSound ('3.mp3') bs = audio.loadSound ('4.mp3' )

17. Variabler

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

 -- Nivåer, endre disse tabellene for å endre eller legge til flere nivåer, hvert bokstav representerer en knapp / lyd dvs. r = rød, ye = gul og så videre lokalt l1 = r, ye, g, b lokale l2 = ye, r, b, g, b, r, g, ye - Variabler Lokalt Lokalt LokaltLevel = L1 Lokalt spillTimer lokale tider = 1 lokal brukerInput =  --lager tappeknappene lokal korrekt = 0

18. Erklære Funksjoner

Erklære alle funksjoner som lokal i begynnelsen.

 -- Funksjoner lokal Main =  lokal startButtonListeners =  lokal showCredits =  lokal hideCredits =  lokal showGameView =  lokal spillListeners =  lokal playLevel =  lokal onTap =  lokal checkInput =  lokalvarsling =  

19. Konstruktør

Deretter skal vi opprette funksjonen som vil initialisere all spilllogikken:

 funksjon Hoved () - kode ... ende

20. Legg til tittelvisning

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

 funksjon Hoved () title = display.newImage ('title.png', 73, 53) playBtn = display.newImage ('playBtn.png', 140, 245) kreditterBtn = display.newImage ('creditsBtn.png', 124, 305) titleView = display.newGroup (title, 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 nivåopprettelsen, tabelljämförelsen og de endelige trinnene for å ta forut for utgivelsen som app testing, lage en startskjerm, legge til et ikon og endelig bygge appen. Les den siste delen nå!