Creați un joc inspirat de Lunar Lander - adăugați o interacțiune

Aceasta este a doua tranșă din tutorialul nostru Corona SDK Lunar Lander. Î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 titleBg: 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 este adăugat la vizualizarea creditelor pentru a elimina acest lucru.

 (time = 300, x = 65, onComplete = total = function () creditsView: addEventListener ('tap', hideCredits) 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 ascundeCredități: apăsați (e) creditsBtn.isVisible = adevărat transition.to (crediteView, time = 300, y = display.contentHeight + creditsView.height, onComplete = function () creditsView: removeEventListener ('tap', hideCredits). ștergeți (creditsView) creditsView = nil end) sfârșit

Pasul 4: Afișați vizualizarea jocului

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: Adăugați luna

Acest cod plasează luna în scenă.

 -- Moonuri m1 = display.newImage ('moon.png', 386, 156) m2 = display.newImage ('moon.png', 252, 99) m3 = display.newImage .name = 'luna' m2.name = 'luna' m3.name = 'luna'

Pasul 6: Luna Mare

O lună mai mare este folosită ca loc de aterizare. Utilizați următorul cod pentru al plasa:

 -- Big Moon bigM = display.newImage ('moonBig.png', 10, 53) bigM.name = 'luna'

Pasul 7: Punctul de aterizare

Punctul de aterizare este reprezentat de o săgeată grafică. O proprietate de nume este creată pentru a ajuta la identificarea acestor elemente atunci când are loc o coliziune.

 -- Săgeată săgeată = display.newImage ('arrow.png', 44, 24) arrow.name = 'goal'

Pasul 8: Racheta

Apoi, adăugăm racheta. Acesta va fi elementul nostru controlat de utilizator.

 -- Racheta rocket = display.newImage ('rocket.png', 409.5, 114)

Pasul 9: Stele

Următorul cod va plasa stelele pe ecran:

 -- Stele s1 = display.newImage ('star.png', 341, 146) s2 = display.newImage ('star.png', 273, 48) s4 = = display.newImage ('star.png', 37, 135) s1.name = 'star' s2.name = 'star' s3.name = 'star' s4.name =

Pasul 10: Controale

Pentru a muta Rocket-ul în ecran vom avea nevoie de un pad de joc, acest cod va avea grijă de asta. A Atingeți ascultător va fi adăugat mai târziu la fiecare buton pentru a face față mișcării.

 -- Controlează sus = display.newImage ('dirBtn.png', 404, 246) left = display.newImage ('dirBtn.png', 10, 246) right = display.newImage .name = 'sus' left.name = 'stânga' right.name = 'dreapta' up.rotation = 90 right.rotation = 180

Pasul 11: Adăugați fizică

Aici adăugăm fizica elementelor grafice.

 -- Adăugați Fizica physics.addBody (m1, 'static', radius = 35) fizics.addBody (m2, 'static', radius = 35) fizics.addBody (m3, 'static', radius = 35) fizice.addBody (bigM, 'static', radius = 40) fizics.addBody (săgeată, 'static') physics.addBody (rachetă, 'dinamică') rocket.isFixedRotation = true rocket.isAwake = false - (s2, "static", radius = 12) physics.addBody (s3, "static", radius = 12) fizic.addBody (s4, 'static', radius = 12) arrow.isSensor = adevărat s1.isSensor = true s2.isSensor = true s3.isSensor = true s4.isSensor = true

Pasul 12: ascultători de jocuri

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

 ('touch', movePlayer) la dreapta: addEventListener ('touch', movePlayer) Runtime: addEventListener ('enterFrame', update) racheta: addEventListener ", onCollision)

Pasul 13: mutați funcția Player

Variabila de direcție este modificată de această funcție, aceasta va face ca racheta să meargă în direcția presată.

 funcția movePlayer (e) dacă (e.phase == 'a început' și e.target.name == 'sus'), apoi dir = 'up' elseif (e.phase == 'ended' și e.target.name = = 'inainte'), apoi dir = 'left' elseif (e.phase == 'started' si e.target.name == 'left') e.target.name == 'dreapta'), apoi dir = 'right' elseif (e.phase == 'terminat' și e.target.name == 'stânga') apoi dir = 'none' elseif (e.phase == 'terminat' și e.target.name == 'dreapta'), apoi dir = 'none' sfârșitul final

Pasul 14: Mișcarea rachetelor

Aceste linii deplasează racheta în conformitate cu direcția stabilită de către movePlayer funcția creată în etapa 13.

 (dir == 'left') apoi racheta: setLinearVelocity (-100, 0) elseif (dir == 'left') == 'dreapta') apoi racheta: setLinearVelocity (100, 0) final

Pasul 15: Coliziunea cu rachete-lună

Următorul cod ascultă pentru o variabilă setată la adevărat atunci când are loc o coliziune între rachetă și o lună, valoarea variabilă este modificată de către onCollision care va fi creată ulterior.

Când este adevărat, racheta va fi plasată în poziția ei inițială și pusă într-o stare de somn pentru a preveni o coliziune cu luna de sub ea.

 -- Racheta-Luna Coliziune daca (hitMoon), apoi rocket.x = 421.5 rocket.y = 134 hitMoon = false rocket.isAwake = sfarsit false

Pasul 16: Coliziunea cu rachete-stele

O metodă similară este folosită în detectarea coliziunilor cu rachete-stele.

 -- Rocket-Star Collision dacă (hitStar) apoi display.remove (starHit) stars = stars + 1 hitStar = false end

Pasul 17: Coliziunea punctului de aterizare

Nivelul va fi completat atunci când jucătorul a adunat cele patru stele și aterizează pe lună mai mare. Următorul cod se ocupă de acest lucru.

 -- Dacă obiectivul (hitGoal și stele == 4) apoi rocket.x = 52 rocket.y = 35 fizics.stop () display.remove (săgeată) audio.play (obiectiv) hitGoal = false complete = display.newImage (' png ') elseif (hitGoal și stele ~ = 4) apoi hitGoal = false end

Pasul 18: Funcția de coliziune

Această funcție rulează când racheta se ciocnește cu un alt corp. Numele corpului este apoi verificat pentru a efectua acțiunea potrivită. În principiu, este redat un sunet și o variabilă este setată la true (pentru Actualizați pentru a vedea) în funcție de numele celuilalt corp.

 funcția onCollision (e) dacă (e.other.name == 'moon') apoi hitMoon = true audio.play (explo) elseif (e.other.name == 'stea') apoi audio.play (star) starHit = e.other hitStar = true elseif (e.other.name == 'goal') apoi hitGoal = true end end

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