Creați un joc de pinball crearea de interfețe

În această serie de două părți tutorial, veți învăța cum să creați un joc Pinball. Obiectivul jocului este de a lovi mingea folosind padele pentru a ridica scorul. Citește mai departe!


Pasul 1: Prezentare generală a aplicației

Folosind grafice preformate vom codifica un joc distractiv folosind Lua și API-urile Corona SDK.

Jucătorul va putea să lovească o minge folosind butoanele de pe scenă. Puteți modifica parametrii din cod pentru a personaliza jocul.


Pasul 2: Dispozitivul vizat

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 folosim.

Platforma iOS are următoarele caracteristici:

  • iPad: 1024x768px, 132 ppi
  • iPhone / iPod Touch: 320x480px, 163 ppi
  • iPhone 4: 960x640px, 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:

  • Google Nexus One: 480x800px, 254 ppi
  • Motorola Droid X: 854x480px, 228 ppi
  • HTC Evo: 480x800px, 217 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.


Pasul 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ă.


Pasul 4: Exportați grafica

În funcție de dispozitivul pe care l-ați selectat, poate fi necesar să exportați grafica î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.


Pasul 5: Sunetul

Vom folosi Sound Effects pentru a îmbunătăți sentimentul jocului, puteți găsi sunetele folosite în acest exemplu în Soungle.com utilizând cuvintele cheie clopot și bâzâit.


Pasul 6: 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",

Pasul 7: 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 vă pregătiți să scrieți aplicația minunată. Nu uitați să salvați fișierul ca main.lua în dosarul proiectului.


Pasul 8: 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ă

Pasul 9: 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.


Pasul 10: Importul fizicii

Vom folosi biblioteca fizică pentru a face față coliziunilor. Utilizați acest cod pentru a le importa:

 fizica locala = necesita (fizica) fizica.start ()

Pasul 11: Contextul jocului

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')

Pasul 12: Vizualizarea titlurilor

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

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

Pasul 13: 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

Pasul 14: Pereți

Pereții în care mingea va putea sări.

Deoarece vom folosi fizica pentru a crea exact aceleași poligoane, vom rupe fiecare parte în patru părți. Elementele sunt marcate cu linii roșii.

 -- [Pereți] local l1 local l2 local l3 local l4 local r1 local r2 local r3 local r4

Pasul 15: Ball

Acesta este graficul mingii, referit în următoarea variabilă.

 -- [Ball] minge locală

Pasul 16: Liniile lovite

Vom adăuga niște obstacole în joc, acestea vor fi ele.

 -- [Hit Lines] locale hitLine1 locale hitLine2

Pasul 17: loviți bilele

Aceste bile sunt ținta pinballului, lovirea lor va crește scorul.

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

Pasul 18: Pălării

Stânga și dreapta. Folosit pentru a lovi mingea

 -- [Paddles] pRight locale locale pLeft

Pasul 19: Butoane de control

Aceste butoane vor muta butoanele făcând sări mingea.

 -- [Butoane cu pale] local lBtn local rBtn

Pasul 20: Scor

Se adaugă o variabilă de scor pentru a fi afișată ulterior pe ecran.

 -- Scorați scorul local

Pasul 21: Sună

Următoarele linii stochează o referință pentru fișierele audio.

 buzunar local = audio.loadSound ('bell.caf') buzz local = audio.loadSound ('buzz.caf')

Pasul 22: Variabile

Aceasta este variabila pe care o vom folosi, citiți comentariile din cod pentru a afla mai multe despre aceasta.

 -- Variabile locale lastY - folosit pentru a-și aminti poziția bmp titlu

Pasul 23: Declarați funcțiile

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

 -- Funcții locale Main =  local startButtonListeners =  local showCredits =  local hideCredits =  locală showGameView =  locallocListeners =  local movePaddle =

Pasul 24: Constructorul

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

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

Pasul 25: 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.

 ("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 ('adauga') sfarsit

Pasul 26: Ascultați butoanele Start

Această funcție adaugă ascultătorilor necesari la TitleView butoane.

 funcția startButtonListeners (acțiune) dacă (action == 'add') atunci playBtn: addEventListener ('tap', showGameView) creditsBtn: addEventListener 'tap', showCredits) sfârșitul final

Pasul 27: Afișați creditele

Ecranul creditelor este afișat când utilizatorul pune butonul aproximativ, a Atingeți ascultător se adaugă la vizualizarea creditelor pentru al elimina.

 (e) playBtn.isVisible = false crediteBtn.isVisible = credite falseView = display.newImage ('credits.png', 0, display.contentHeight) lastY = titluBg.y transition.to (titleBg, time = 300 , y = (display.contentHeight * 0.5) - (titleBg.height + 50)) transition.to (crediteView, time = 300, y = (display.contentHeight * 0.5) + 35, onComplete = addEventListener ('atingeți', ascundeCredități) end) sfârșit

Pasul 28: Ascundeți creditele

Când ecranul de credite este atins, acesta va fi completat din scenă și eliminat.

 funcția ascundeCredite: atingeți (e) transition.to (crediteView, time = 300, y = display.contentHeight + 25, onComplete = function () creditsBtn.isVisible = true playBtn.isVisible = credite realeView: removeEventListener ) display.remove (creditsView) crediteView = nil end) transition.to (titleBg, time = 300, y = lastY); 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 aborda mișcarea paletelor, detectarea coliziunilor ș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, construirea aplicației. Rămâi acordat pentru partea finală!

Cod