Creați un joc de sute de jocuri - adăugați o interacțiune

Aceasta este a doua tranșă în tutorialul nostru de jocuri Corona SDK Hundreds. În tutorialul de astăzi, vom adăuga la interfața noastră și interacțiunea jocului. Citește mai departe!


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.

 function showCredit: tap (e) playBtn.isVisible = credite falseBtn.isVisible = credite falseView = display.newImage ('credits.png', 0, display.contentHeight) lastY = titleBg.y lastX = titleBg.x transition.to (titleBg , timp = 300, y = (display.contentHeight * 0.5) - (titleBg.height + 20), x = (display.contentWidth * 0.5) - (titleBg.width * 0.5) - 10) transition.to time = 300, y = (display.contentHeight * 0.5) + 35, onComplete = functie () creditsView: addEventListener ('tap', hideCredits)

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, timp = 300, y = lastY, x = lastX); 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ă viziune, așa că 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: Contextul jocului

Acest cod plasează imaginea de fundal a jocului în stadiu.

 -- Contextul jocului display.remove (bg) gameBg = display.newImage ('gameBg.png')

Pasul 6: 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 7: Cercuri

Această parte creează cinci cercuri pe ecran într-o poziție aleatorie eu variabila este folosită pentru a multiplica o constantă care va defini culoarea cercurilor făcând-o mai ușoară de fiecare dată. Se creează, de asemenea, un câmp de text și ambele sunt organizate într-un grup pentru a le muta împreună.

 -- Cercuri cerc = display.newGroup () culoare locală = 0 pentru i = 1, 5 local rx = 21 + math.floor (math.random () * (display.contentWidth - 42)) local ry = 21 + math.floor (cx.x-4.2, cg.y-12.2) local cg = display.newCircle (rx, ry, 21) local label = display.newText (' , native.systemFontBold, 13) cg.fillColor = culoare + (i * 40) cg: setFillColor (cg.fillColor) local c = display.newGroup (cg, eticheta) c.pressed = false c.name = 'c' c .radius = 21

Pasul 8: Fizica cercului

Aici adăugăm fizica în noul nostru cerc.

 -- Cercul fizic fizica.addBody (c, 'dinamic', radius = 21, bounce = 1) c: setLinearVelocity (100, 100) cercuri: inserați

Pasul 9: 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 10: Scorarea textului

Acum adaugam scorurile pentru text.

 -- Scor TextField scor = display.newText ('0', 257, 4, native.systemFont, 15) scor: setTextColor (150, 150, 150) total local = display.newText ('/ 100', 267, 4 native. sistemFont, 15) total: setTextColor (150, 150, 150) jocListeners ('adauga') sfarsit

Pasul 11: ascultători de jocuri

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

 funcția gameListeners (acțiune) dacă (action == 'add') atunci pentru i = 1, 5 cercuri [i]: addEventListener ('touch', onTouch) cercuri [i]: addEventListener (collision, onCollision) pentru i = 1, 5 cercuri [i]: removeEventListener ('touch', onTouch) cercuri [i]: removeEventListener ('collision', onCollision)

Pasul 12: Creșteți scorul

Acest cod se execută atunci când cercul este atins.

Mai intai crestem scorul.

 funcția onTouch (e) dacă (e.phase == 'a început') apoi e.target.pressed = true - Creste Counter score.text = tostring (tonumber (score.text)

Pasul 13: Creșteți dimensiunea

Apoi dimensiunea cercului. Cercul va crește atunci când degetul nu mai este pe el.

 -- Măriți dimensiunea e.target.radius = e.target.radius + 2

Pasul 14: Modificați culoarea

Modifică culoarea de la negru / gri la roșu.

 -- Schimbați culoarea e.target [1]: setFillColor (224, 11, 0)

Pasul 15: Actualizați cercul

Refacem cercul și proprietățile sale atunci când evenimentul tactil sa încheiat.

 dacă e.phase == 'terminat'), atunci e.target.pressed = false - Actualizați numărul fizic local = tostring (tonul (e.target [2] .text) +2) local r = e.target.radius local cg = display.newCircle (e.target.x, e.target.y, r) local label = display.newText (număr, cg.x-4.2, cg.y-12.2, native.systemFontBold, 13) cg: (cg, etichetă) c.priză = falsă c.name = 'c' c.radius = c.fillColor (e.target [1] .fillColor) cg.fillColor = e.target [1] .fillColor local c = (c, 'dinamic', radius = r, bounce = 1) c: setLinearVelocity (100, 100) c: addEventListener c: addEventListener ("collision", onCollision) cercuri: inserați (c) - mutați câmpul Text când numărul este 2 cifre dacă (număr (număr)> 9) apoi label.x = label.x -

Pasul 16: Nivelul este complet

Aici verificăm dacă scorul a atins 100 de puncte și apelează a victorie dacă este adevărat.

 -- Verificați dacă scorul a atins 100 dacă (tonumber (score.text)> = 100), apoi bg = display.newImage ('gameBg.png') transition.from (bg, time = 500, alpha = 0, onComplete = alertă ('win')) capăt sfârșit sfârșit

Pasul 17: Coliziuni

Jocul se pierde atunci când un cerc presat se ciocnește cu altul. Ascultătorii sunt eliminați și a pierdut se numește alertă.

 (e) dacă (e.target.pressed și e.other.name == 'c') atunci - Așteptați 0.1 secunde pentru a opri fizicul timer.performWithDelay (100, function () fizics.stop () end, 1 ) locale r = e.target.radius local c = display.newCircle (e.target.x, e.target.y, r) c: setFillColor (224, 11, 0) gameListeners ('rmv' c, timp = 700, xScale = 25, yScale = 25, onComplete = alertă ("pierdut")) end end

Pasul 18: Alertă

Funcția de alertă afișează un mesaj în funcție de tipul de alertă numit.

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

Pasul 19: 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 20: Ecranul 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 21: 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 22: 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 23: 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