Creați un joc cu baloane popping - Adăugați o interacțiune

Aceasta este a doua tranșă în tutorialul nostru de joc Corona SDK Bubble Popping. În tutorialul de astăzi, vom adăuga la interfața noastră prin codarea interacțiunii jocului. Citește mai departe!


Disponibile și în această serie:

  1. Creați un joc Bubble Popping - Crearea interfeței
  2. Creați un joc cu baloane popping - Adăugați o interacțiune

Unde am plecat ...

Asigurați-vă că verificați partea 1 a seriei pentru a înțelege pe deplin și pentru a vă pregăti pentru acest tutorial.


Pasul 1: 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 2: 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 + 30)) transition.to (crediteView, time = 300, y = (display.contentHeight * 0.5) + 35, addEventListener ('atingeți', ascundeCredități) end) sfârșit

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

Pasul 4: Afișare vizualizare joc

Cand start butonul este apăsat, vizualizarea titlurilor este completată și eliminată dezvăluind vizualizarea jocului. Există multe părți implicate în această vizualizare, astfel încât le vom împărți în pașii următori.

 funcția showGameView: atingeți (e) transition.to (titleView, time = 300, x = -titleView.height, onComplete = function () startButtonListeners ('rmv') display.remove (titleView) titleView =

Pasul 5: pereți

Apoi adăugăm pereții pe scenă. Ele sunt create folosind API-ul de desen.

 -- Pereți stânga = display.newLine (0, 240, 0, 720) dreapta = display.newLine (320, 240, 320, 720) sus = display.newLine (160, 0, 480, 0) jos = display.newLine , 480, 480, 480)

Pasul 6: Bubble

Această parte creează cinci bule în ecran într-o poziție aleatorie.

 (=) () () () () () () () () = = ) * (display.contentHeight - 42)) local b = display.newImage ('bubble.png', rx, ry) b.name = 'bule'

Pasul 7: Fizica bulelor

Aici adăugăm fizica noului nostru balon.

 -- Bubble Physics.addBody (b, 'dinamic', radius = 21, bounce = 1) b: setLinearVelocity (100, 100)

Pasul 8: Fizica pereților

Și faceți același lucru cu zidurile noastre.

 -- Fizica peretilor fizica.addBody (stanga, statica) fizics.addBody (dreapta, statica) fizics.addBody (top, static) fizics.addBody (partea inferioara, statica)

Pasul 9: TextFields

Acum adăugăm nivelurile, câmpurile text și bulele necesare.

 -- Nivel Nivel TextField = display.newImage ('level.png', 2, 0) nivelN = display.newText ('1', 54, 5, native.systemFont, 15) nivelN: setTextColor (255, 255, 255) Popped TextField popped = display.newImage ('popped.png', 126,0) poppedN = display.newText ('0', 187, 5, native.systemFont, 15) poppedN: setTextColor (255, 255, 255) Textul obligatoriu necesar = display.newImage ('required.png', 231, 0) requiredN = display.newText ('4', 306, 5, native.systemFont, 15) display.newGroup () final

Pasul 10: Ascultarea jocurilor

Această funcție adaugă ascultătorii necesari pentru a porni logica jocului.

 (b): addEventListener ('tap', createBullets) altfel bg: removeEventListener ('tap', createBullets) Runtime: endEventListener

Pasul 11: Creați gloanțe

Acest cod se execută atunci când se atinge fundalul.

Mai întâi vom crea grafica glonțului.

 funcția createBullets (e) pentru i = 1, 4 bullet local = display.newImage ('bullet.png', e.x, e.y)

Pasul 12: Setați direcția

Atunci îi dăm o direcție prin stabilirea vitezei liniare.

 -- Setați direcția dacă (i == 1), apoi bullet.x = bullet.x - 8 fizics.addBody (bullet, 'kinematic', radius = 7) bullet: setLinearVelocity (-150, 0) i == 2) apoi bullet.x = bullet.x + 8 fizics.addBody (glont, 'kinematic', raza = 7) bullet: setLinearVelocity (150, 0) apoi bullet.y = bullet.y - 8 physics.addBody (bullet, 'kinematic', radius = 7) bullet: setLinearVelocity (0, -150) end --up dacă (i == 4) = bullet.y + 8 fizics.addBody (bullet, 'kinematic', radius = 7) bullet: setLinearVelocity (0, 150) end -down bullet: addEventListener (collision, onCollision) bg: removeEventListener ('atinge', createBullets) sfârșitul runtime: addEventListener ('enterFrame', update) sfârșit

Pasul 13: Coliziuni

Coliziunile sunt manipulate de următoarea funcție. Se aude un sunet, scorul crește și elimină bulele ecranului.

 funcția onCollision (e) dacă (e.other.name == 'bubble') apoi audio.play (pop) display.remove (e.other) poppedN.text = tostring (tonumber (poppedN.text) + 1)

Pasul 14: Îndepărtați gloanțele din culise

Acest cod va elimina orice glonț care nu este vizibil.

 funcția update (e) - Verificați pentru gloanțe offstage pentru i = 1, bullets.numChildren face dacă (gloanțe [i] ~ = zero), atunci dacă (gloanțe [i] .x < 0 or bullets[i].x > 320 sau gloanțe [i] .y < 0 or bullets[i].y > 480), apoi display.remove (gloanțe [i]) sfârșitul capătului final

Pasul 15: Nivelul este complet

Aici verificăm dacă bulele scoase au atins cantitatea necesară și apelează a victorie dacă este adevărat.

 -- Verificați dacă au fost introduse bule dacă (bullets.numChildren == 0 și tonumber (poppedN.text)> = tonumber (requiredN.text)), apoi alertați ('win') elseif (bullets.numChildren == 0 și tonumber (poppedN. text) < tonumber(requiredN.text)) then alert('lose') end end

Pasul 16: Alertă

Funcția de alertă afișează un mesaj în funcție de tipul de alertă numit (nivel complet sau eșuat).

 Alertă de funcționare (acțiune) gameListeners ('rmv') dacă (action == 'win') atunci alertView = display.newImage ('won.png', 80, display.contentHeight * 0.5 - 41) transition.from (alertView, time = 300, y = -82, întârziere = 500) else alertView = display.newImage ('lost.png', 80, display.contentHeight * 0.5 - 41) transition.from (alertView, y = -82, întârziere = 500) sfârșitul final

Pasul 17: Apelați funcția principală

Pentru a începe jocul, Principal funcția trebuie să fie numită. Cu codul de mai sus, vom face asta aici:

 Principal()

Pasul 18: Ecran de încărcare

Fișierul Default.png este o imagine care va fi afișată chiar când porniți aplicația în timp ce iOS încarcă datele de bază pentru a afișa ecranul principal. Adăugați această imagine în folderul sursă al proiectului, acesta va fi adăugat automat de către compilatorul Corona.


Pasul 19: Pictogramă

Utilizând grafica pe care ați creat-o înainte de a crea acum o pictogramă frumoasă și bună. Dimensiunea pictogramei pentru pictograma non-retina iPhone este de 57x57px, dar versiunea retinei este 114x114px și magazinul iTunes necesită o versiune de 512x512px. Vă sugerăm să creați prima versiune 512x512 și apoi să scalați pentru alte dimensiuni.

Nu trebuie să aibă colțurile rotunjite sau strălucirea transparentă, iTunes și iPhone-ul vor face asta pentru tine.


Pasul 20: Testarea în simulator

E timpul să facem testul final. Deschideți Simulatorul Corona, navigați în dosarul proiectului, apoi faceți clic pe Deschidere. Dacă totul funcționează așa cum era de așteptat, sunteți gata pentru ultimul pas!


Pasul 21: Construiți

În Simulatorul Corona mergeți la Fișier> Construiți și selectați dispozitivul țintă. Completați datele solicitate și faceți clic pe construi. Așteptați câteva secunde și aplicația dvs. va fi gata pentru testarea dispozitivului și / sau trimiterea pentru distribuire!


Concluzie

Experimentați cu rezultatul final și încercați să faceți versiunea personalizată a jocului!

Sper că ți-a plăcut această serie de tutori și ți se pare util. Mulțumesc că ați citit!

Cod