Creați un joc de memorie bazat pe sunet - crearea interfeței

În această serie de tutoriale, vă voi arăta cum să creați un joc de memorie bazat pe sunet cu Corona SDK. Veți învăța despre încărcarea și redarea sunetelor, precum și despre stocarea informațiilor în tabelele Lua. Obiectivul jocului este de a reproduce sunetul de nivel atingând patratele de culoare. Citește mai departe!


Disponibile și în această serie:

  1. Creați un joc de memorie bazat pe sunet - crearea interfeței
  2. Creați un joc de memorie bazat pe sunet - joc de logică

1. Prezentare generală a aplicațiilor

Folosind grafica pre-made vom codifica un joc distractiv folosind Lua și API-urile Corona SDK.

Playerul va putea utiliza butoanele de pe ecran pentru a reproduce secvența de sunet curentă, puteți modifica parametrii din cod pentru a personaliza jocul.


2. Dispozitivul țintă

Primul lucru pe care trebuie să-l facem este să selectăm platforma pe care dorim să o executăm, astfel încât să putem alege dimensiunea imaginilor pe care le vom folosi.

Platforma iOS are următoarele caracteristici:

  • 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

Deoarece Android este o platformă deschisă, există multe dispozitive și rezoluții diferite. Câteva dintre caracteristicile cele mai comune ale ecranului sunt:

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

În acest tutorial ne vom concentra pe platforma iOS cu design grafic, dezvoltând în mod special pentru distribuție pe un iPhone / iPod touch, dar codul prezentat aici ar trebui să se aplice dezvoltării Android cu SDK Corona.


3. Interfața

O interfață simplă și prietenoasă va fi utilizată, aceasta implicând mai multe forme, butoane, bitmap-uri și multe altele.

Resursele de interfață grafice necesare pentru acest tutorial pot fi găsite în descărcarea atașată.


4. Export Graphics

În funcție de dispozitivul pe care l-ați selectat, este posibil să fie nevoie să exportați graficul în PPI recomandat, puteți face acest lucru în editorul dvs. preferat de imagini.

Am folosit Reglați dimensiunea ... în aplicația Previzualizare pe Mac OS X.

Nu uitați să dați imaginilor un nume descriptiv și să le salvați în dosarul proiectului.


5. Configurarea aplicației

Un fișier extern va fi folosit pentru a face ca aplicația să intre pe întregul ecran pe toate dispozitivele config.lua fişier. Acest fișier arată dimensiunea originală a ecranului și metoda utilizată pentru a scala acel conținut în cazul în care aplicația este rulată într-o altă rezoluție a ecranului.

 aplicație = content = width = 320, height = 480, scale = "letterbox",

6. Main.lua

Să scriem cererea!

Deschideți editorul preferat Lua (orice editor de text va funcționa, dar nu veți avea o evidențiere a sintaxei) și
pregătiți-vă să scrieți aplicația minunată. Nu uitați să salvați fișierul ca main.lua în dosarul proiectului.


7. Structura codului

Ne vom structura codul ca și cum ar fi o clasă. Dacă știți ActionScript sau Java, ar trebui să găsiți structura familiară.

 Variabile și constante de clase variabile Declare funcții contructor (funcție principală) metode de clasă (alte funcții) apel funcția principală

8. Ascundeți bara de stare

 display.setStatusBar (display.HiddenStatusBar)

Acest cod ascunde bara de stare. Bara de stare este bara din partea de sus a ecranului dispozitivului, care afișează ora, semnalul și alți indicatori.


9. Contextul

O grafică simplă este folosită ca fundal pentru interfața aplicației, următoarea linie de cod o stochează.

 -- Grafică - [Background] local bg = display.newImage ('bg.png')

10. Vizualizare titlu

Aceasta este titlul de vizualizare, acesta va fi primul ecran interactiv care apare în jocul nostru, aceste variabile stochează componentele sale.

 -- [Title View] titlu local local playBtn local creditsBtn title localView

11. Vizualizarea creditelor

Această vizualizare va arăta creditele și drepturile de autor ale jocului, această variabilă va fi utilizată pentru a fi stocată.

 -- [CreditsView] credite locale

12. Butoane pătrat

Butoanele utilizate pentru reproducerea sunetului.

 -- Culoare Pătraturi locale r =  locale g =  locale ye =  local b = 

13. Mesaj de instrucțiuni

Un mesaj de instrucțiuni va apărea la începutul jocului, când mesajul este respins, secvența de sunet se va reda.

 -- Instrucțiuni locale ins

14. Verificați butonul

Acest buton va compara intrarea utilizatorului cu nivelul curent pentru a determina dacă secvența este corectă sau nu.

 -- Verificați verificarea locală a butonului

15. Alertă

Aceasta este alerta care va fi afișată când câștigi jocul. Acesta va finaliza nivelul și va încheia jocul.

 -- Alertă alertă localăVizualizare

16. Sunete

Vom folosi efecte de sunet pentru a spori senzația jocului. Sunetele folosite în această aplicație au fost generate de AS3SFXR.

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

17. Variabile

Acestea sunt variabilele pe care le vom folosi, citiți comentariile din cod pentru a afla mai multe despre ele.

 -- Nivelurile, modificați aceste tabele pentru a schimba sau adăuga mai multe nivele, fiecare literă reprezintă un buton / sunet, adică r = roșu, ye = galben și așa mai departe local l1 = r, ye, g, b local l2 = ye, b, g, b, r, g, ye - Variabile locale lastY local localLevel = l1 joc localTimer local times = 1 local userInput =  - stochează butoanele apăsate local correct = 0

18. Declarați funcțiile

Declarați toate funcțiile ca local la inceput.

 -- Funcții locale Main =  locale startButtonListeners =  locale showCredits =  local hideCredits =  locală showGameView =  localListeners =  local playLevel = local onTap = local checkInput =  alert local = 

19. Constructor

Apoi vom crea funcția care va inițializa toată logica jocului:

 funcția principal () - cod ... sfârșit

20. Adăugați Vizualizarea titlurilor

Acum, plasăm TitleView în scenă și sunăm o funcție care va adăuga Atingeți ascultători de butoane.

 funcția Main () title = display.newImage ('title.png', 73, 53) playBtn = display.newImage ('playBtn.png', 140, 245) creditsBtn = 305) titleView = display.newGroup (titlu, playBtn, creditsBtn) startButtonListeners ('adaugă') sfârșit

Data viitoare…

În această parte a seriei ați învățat interfața și setarea de bază a jocului. În următoarea și ultima parte a seriei, vom rezolva crearea nivelului, compararea tabelei și pașii finali care trebuie făcuți înainte de lansarea testării aplicațiilor, crearea unui ecran de pornire, adăugarea unei pictograme și, în final, crearea unei aplicații. Citiți partea finală acum!

Cod