Creați un joc de deblocare - adăugați interacțiune

Aceasta este cea de-a doua tranșă în tutorialul nostru de jocuri de deblocare a jocului Corona SDK Deblocare. În tutorialul de astăzi, vom adăuga la interfața noastră prin crearea elementelor interactive ale jocului de deblocare. 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.

 (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 + 40)) 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: Contextul jocului

Acest cod plasează imaginea de fundal a jocului pe scenă:

 -- Jocul BG gameBg = display.newImage ('gameBg.png', 10, 10)

Pasul 6: Mișcările TextField

Apoi adăugăm câmpul pentru mișcări pe scenă. Aceasta va conta numărul de mișcări efectuate de player.

 -- Mișcări Mișcări textfield = display.newText ('0', 211, 66, display.systemFont, 16) mișcări: setTextColor (224, 180, 120)

Pasul 7: Creați un nivel

Această parte creează blocurile definite în variabila nivel folosind o dublă pentru afirmație.

 -- Crearea nivelului hblocks = display.newGroup () vblocks = display.newGrup () pentru i = 1, # l1 face pentru j = 1, # l1 [1] v = display.newImage ('vrect.png', 10 + (j * 50) -50, 120 + (i * 50) -50) v: addEventListener l + 1) (j * 50) -50, 120 + (i * 50) -50) h: addEventListener (' (h1) [i] [j] == 3) apoi s = display.newImage ('square.png', 10 + (j * 50) -50, 120 + i * 50) -49) s: addEventListener ('atingeți', dragH) sfârșitul final sfârșitul joculuiListeners ('adaugă') sfârșit

Pasul 8: Ascultarea jocurilor

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

 (action == 'add') apoi Runtime: addEventListener ('enterFrame', update) altceva Runtime: removeEventListener ('enterFrame', update) end end

Pasul 9: Tragere orizontală

Următoarea funcție se ocupă de tragerea orizontală a blocurilor.

 funcția dragH (e) e.target.lastX = 0 curent localX = 0 local initX = 0 dacă (e.phase == 'a început') apoi e.target.lastX = ex - e.target.x initX = e.target .x mov.text = tostring (tonumber (movements.text) + 1) elseif (e.phase == 'mutat') apoi e.target.x = ex - e.target.lastX currentX = e.target.x - - Calculați direcția dacă (initX < currentX) then dir = 'hl' --horizontal-left elseif(initX > curentX), apoi dir = 'hr' - sfârșitul capătului orizontal-dreapta

Pasul 10: Trageți vertical

Acum creăm funcția de tragere verticală.

 funcția dragV (e) e.target.lastY = 0 curent localY = 0 local initY = 0 dacă (e.phase == 'a început') apoi e.target.lastY = ey - e.target.y initY = e.target .y.locations.text = tostring (tonumber (movements.text) + 1) elseif (e.phase == 'mutat') apoi e.target.y = ey - e.target.lastY currentY = e.target.y - - Calculați direcția dacă (initY < currentY) then dir = 'vu' --Vertical-upwards elseif(initY > currentY), apoi dir = 'vd' - End-end end end end

Pasul 11: Funcția Test Hit

Vom folosi o funcție excelentă și utilă pentru detectarea coliziunilor fără fizică. Puteți găsi exemplul și sursa originale de pe site-ul web al CoronaLabs Exchange.

 funcția hitTestObjects (obj1, obj2) local stânga = obj1.contentBounds.xMin <= obj2.contentBounds.xMin and obj1.contentBounds.xMax >= obj2.contentBounds.xMin drept local = obj1.contentBounds.xMin> = obj2.contentBounds.xMin și obj1.contentBounds.xMin <= obj2.contentBounds.xMax local up = obj1.contentBounds.yMin <= obj2.contentBounds.yMin and obj1.contentBounds.yMax >= obj2.contentBounds.yMin local down = obj1.contentBounds.yMin> = obj2.contentBounds.yMin și obj1.contentBounds.yMin <= obj2.contentBounds.yMax return (left or right) and (up or down) end

Pasul 12: Frontierele verticale

Acest cod limitează mișcarea prin crearea de frontiere virtuale.

 funcția de actualizare a funcției (e) - Frontierele verticale pentru i = 1, vblocks.numChildrenul face dacă (vblocks [i] .y> = 370) atunci vblocks [i] .y = 370 elseif (vblocks [i] <= 170) then vblocks[i].y = 170 end

Pasul 13: Coliziuni

Aici abordăm coliziunea dintre blocurile verticale și cele orizontale.

 -- Dacă ați lovit (hitTestObjects (vblocks [i], hblocks [i]) și dir == 'vu', atunci vblocks [i] .y = hblocks [i] .yy + 75 elseif (hitTestObjects [i]) și dir == 'vd'), apoi vblocks [i] .y = hblocks [i] .y - 75 sfârșitul dacă (hitTestObjects (vblocks [i], hblocks [i]) și dir = ) hblocks [i] .x = vblocks [i] .x + 75 elseif (hitTestObjects (vblocks [i], hblocks [i]) și dir == 'hl' ] .x - 75 în cazul în care (hitTestObjects (s, vblocks [i])) apoi sx = vblocks [i] .x - 50 end end

Pasul 14: Frontiere orizontale

Acest cod limitează mișcarea orizontal prin crearea de frontiere virtuale.

 -- Ferestre orizontale pentru j = 1, hblocks.num Copiii fac dacă (hblocks [j] .x> = 260), atunci hblocks [j] .x = 260 elseif (hblocks [j] .x <= 60) then hblocks[j].x = 60 end end -- Square if(s.x >= 320) apoi display.remove (s) display.remove (vblocks) display.remove (hblocks) alert () elseif (s.x <= 35) then s.x = 35 end end

Pasul 15: Alertă

Funcția de alertă oprește jocul, afișează un mesaj și elimină ascultătorii activi.

 (alertView, time = 300, y = -82) Alertă locală ('rmv') alertView = display.newImage ('alert.png', 80, display.contentHeight * 0.5 - 41) end endend

Pasul 16: 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 17: Ecranul de încărcare

Default.png fișierul este o imagine care va fi afișată chiar când porniți aplicația în timp ce iOS-ul î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 compilatorul Corona.


Pasul 18: Pictogramă

Folosind grafica pe care ați creat-o înainte, puteți 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 vor face asta pentru tine.


Pasul 19: 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 20: 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

În acest tutorial ați învățat cum să faceți ca interfața noastră să vină la viață, permițând utilizatorului să interacționeze cu piesele jocului. Experimentați cu rezultatul final și încercați să faceți propria versiune personalizată a jocului! Sper că ți-a plăcut această serie de tutori și ți-a dat de ajutor. Mulțumesc că ați citit!

Cod