Share
Bine ați venit la cel de-al doilea tutorial din seria noastră despre construirea unui joc de rulare de la zero cu SDK Corona. În această secțiune, vom trece peste cum să obținem rapid un nivel de bază de derulare în fundal. Deschideți editorul de text și să începem!
Dacă nu ați văzut deja primul tutorial din această serie, verificați-l foarte repede înainte de a trece la acesta. Dacă aveți puțină experiență de codificare, atunci veți fi bine să sărind peste primul tut, dar dacă nu ați făcut-o, atunci ar trebui să meritați timpul să vă uitați la unele dintre elementele de bază ale programării care lucrează cu Lua și Corona SDK.
Deci, primul lucru pe care trebuie să-l acoperim este fișierul build.settings. Acesta este un fișier care trebuie să meargă în același director ca fișierul principal.lua și este ceea ce folosim pentru a stabili unele dintre specificațiile noastre de aplicație. Acum, în funcție de ce platformă lucrați (Android sau iOS), fișierul build.settings va fi folosit pentru a seta diferite lucruri. De exemplu, dezvoltatorii Android trebuie să se ocupe de fișierul manifestului de aplicații și de permisiunile acestuia, în timp ce dezvoltatorii iOS au în dosarul lor * .plist să-și facă griji. Fișierul build.settings este locul unde vor fi gestionate multe dintre aceste setări ale nivelului aplicației. Unul dintre lucrurile drăguțe despre Corona SDK este faptul că putem combina informațiile Android și iOS build.settings în același fișier build.settings. În acest fel, dacă lucrați la ambele tipuri de dispozitive, nu trebuie să gestionați mai multe fișiere build.settings. Pentru scopurile noastre, acum vom folosi doar fișierul build.settings pentru setarea orientării dispozitivului nostru. Deci, faceți un nou fișier numit build.settings în același director pe care veți avea fișierul principal.lua și puneți acest cod în el:
--Observați că puteți utiliza comentariile în această secțiune, precum și setările = orientation = default = "landscapeRight", supported = "landscapeRight", "landscapeLeft",,
Acest lucru ne oferă un dispozitiv orientat pe peisaj pe dispozitive iOS și Android. Codul este destul de drept și vom trece peste mai multe setări pe care le veți dori să le folosim în viitoarele tutoriale, dar pentru moment acest lucru ar trebui să fie tot ceea ce trebuie să facem înainte. Dacă doriți să sapa mai adânc pe cont propriu, puteți găsi toate opțiunile build.settings aici. Pentru a vă asigura că fișierul a funcționat, faceți un test rapid în simulator. Deschideți fișierul principal.lua și puneți codul acolo:
--Această linie va elimina bara de stare din partea superioară a ecranului - unele aplicații pe care doriți să le păstrați, dar nu și pentru jocuri! display.setStatusBar (display.HiddenStatusBar) local testRect = display.newRect (0,0,50,50) testRect: setFillColor (150,0,0);
Deci, după ce ați pus toate acestea împreună, dacă setările dvs. de construcție se află în locul corect, ar trebui să aveți ceva care arată astfel:
Dacă dispozitivul este în poziție verticală (modul portret) și nu este așezat pe partea sa ca mai sus (mod peisaj), atunci ceva nu a mers bine. Cu toate acestea, sperăm că nu este cazul, deoarece codul de mai sus este tot ce există. Deci, acum că nu mai avem cum să putem continua jocul. Scopul fiecăruia dintre tutoriale este să avem o nouă secțiune de lucru. Fiecare se va construi pe ultima, dar după fiecare iterație veți avea ceva ce ar trebui să fie jucat.
Primul lucru pe care vom dori să-l facem este să ne mișcăm nivelul. Vom avea mai multe straturi în jocul nostru care vor derula la diferite nivele de viteză. Acest lucru ne va da iluzia a ceea ce ne place să numim scrolling parallax. Când rulați programul în simulator continuați și selectați iPhone pentru moment (dacă nu ați făcut deja acest lucru). Modificați acest lucru mergând la Fereastră> Vizualizare ca> iPhone în simulator. Activele au fost proiectate pentru un dispozitiv care rulează la o rezoluție de 480x320px. Există, desigur, modalități de a vă asigura că funcționează pentru toate rezoluțiile, dar pentru scopurile noastre de testare acum doar lipiți cu simulatorul iPhone. Mergeți și puneți acest cod în programul dvs.:
Accentsconagua
--scoate bara de afișare din partea de sus a ecranului display.setStatusBar (display.HiddenStatusBar) --Adăugă o imagine la jocul nostru centrat la x și y coordonează local backbackground = display.newImage ("images / background.png") backbackground. x = 240 backbackground.y = 160 backgroundfar local = display.newImage ("images / bgfar1.png") backgroundfar.x = 480 backgroundfar.y = 160 Pentru ca acest lucru să funcționeze, mergeți mai departe și folosiți imaginile pe care le-am furnizat. Pentru ca codul să funcționeze "ca atare", va trebui să plasați imaginile într-un director numit imagini. Dosarul de imagini trebuie să fie în același director ca și fișierul principal.lua și build.settings. Odată ce faceți asta, trebuie să obțineți un ecran care arată astfel:
Observați cum este imaginea de fundal în fața fundului din spate? Imaginați-vă că stivuiți mai multe plăci una peste cealaltă. Cu cât stați mai mult, cu atât mai mult ați acoperit acea primă plăcuță pe care ați pus-o pentru a începe. Acest lucru este valabil și în cazul imaginilor și textului pe care le puneți în codul dvs. De fiecare dată când doriți să adăugați ceva pe ecran, dacă nu este indicat altceva, acel element adăugat va acoperi tot ce ați fost deja stivuit. Să mergem mai departe și să prezentăm câteva alte lucruri pe ecranul nostru. Adăugați codul dvs. sub celelalte linii:
locale backgroundnear1 = display.newImage ("images / bgnear2.png") backgroundnear1.x = 240 backgroundnear1.y = 160 local backgroundnear2 = display.newImage ("images / bgnear2.png") backgroundnear2.x = 760 backgroundnear2.y = 160 Acum, ar trebui să avem un alt strat așezat în partea superioară așa:
Acum, când te uiți la asta, vei observa că, deși am adăugat 2 instanțe de bgnear2.png, doar unul dintre ele apare pe ecran. Motivul pentru care facem acest lucru va deveni un pic mai evident atunci când începem să ne mișcăm totul. Pentru moment, mergeți mai departe și schimbați vizualizarea dvs. de pe iPhone la iPhone 4 în același mod în care am făcut-o înainte. Deoarece ne-am proiectat imaginile în jurul rezoluției unui iPhone non-retină (de ex. 480x320px), dacă trecem la o rezoluție mai mare, cum ar fi iPhone 4 (de ex. 960x640px), totul se micșorează și putem vedea mai multe despre ceea ce se întâmplă. Schimbați la rezoluția iPhone 4 și ar trebui să vedeți acest lucru acum:
Ori de câte ori vrem să vedem ce se întâmplă, trecerea la o vedere mai mare va fi foarte utilă. Observați că doar pentru că nu puteți vedea ceva, nu înseamnă că nu se întâmplă nimic. Acum, că avem acele imagini de fundal pe acolo, să le facem să se miște. Pe parcursul tutorialului, voi încerca să documentez tot ce se întâmplă în interiorul codului însuși, deci dacă nu sunteți sigur (ă) despre ceea ce este sigur că citiți comentariile din cod! Acum, sub codul adăugat adăugați anterior:
--funcția de actualizare va controla cel mai mult tot ceea ce se întâmplă în jocul nostru - acest lucru se va numi fiecare cadru (30 de cadre pe secundă în cazul nostru, care este implicit SDK Corona) actualizare funcțională locală (eveniment) --updateBackgrounds va apela o funcție făcută în special pentru a face față mișcării fundalului updateBackgrounds () end function updateBackgrounds () - mișcare fundal fundal backgroundfar.x = backgroundfar.x - (.25) - mișcare fundal necondiționată backgroundnear1.x = backgroundnear1.x - (3) --if sprite-ul sa mutat de pe ecran mutați-l înapoi pe partea laterală, așa că se va mișca din nou dacă (backgroundnear1.x < -239) then backgroundnear1.x = 760 end backgroundnear2.x = backgroundnear2.x - (3) if(backgroundnear2.x < -239) then backgroundnear2.x = 760 end end --this is how we call the update function, make sure that this line comes after the --actual function or it will not be able to find it --timer.performWithDelay(how often it will run in milliseconds, function to call, --how many times to call(-1 means forever)) timer.performWithDelay(1, update, -1)
Când rulați această rulare în timp ce vă aflați încă în ecranul iPhone 4. Acest lucru vă va permite să vedeți ce se întâmplă de fapt cu toate spritele diferite pe care le deplasăm. Odată ce ați privit-o în această privință, mergeți mai departe și reveniți la vizualizarea normală a iPhone-ului, pentru a vedea cum arată într-adevăr. Cu toate acestea, ar trebui să aveți acum totul în mișcare! Acum câteva lucruri pe care trebuie să le analizăm înainte de a merge mai departe. Observați cum există doar o singură instanță a fundalului, dar există două situații în care există un background? Acesta este ceva care depinde complet de tine. Motivul pentru care există două este pentru că, pentru un fundal mai apropiat (de exemplu, arborii care zboară), vrem să se repete din nou și din nou. Pentru fondul îndepărtat, am vrut să fie ceva care va trece foarte încet și nu se va repeta (de exemplu, de obicei, veți face acest lucru doar pentru fundaluri care sunt departe înapoi, oferă niveluri un simt unic). Aceasta este ceva ce ați face atunci când nivelul dvs. de derulare va avea un sfârșit. Dacă vreți cu adevărat un scroller care nu se termină niciodată, doriți să luați aceeași abordare pe care ați făcut-o pentru fundalul apropiat și să puneți două pe rând. Prin plasarea a două lănțișoare, trei sau oricât de multe doriți, vă permiteți să creați lumi aparent mari, cu active foarte mici. Singurul lucru pe care trebuie să-l facem este să mutăm sprite-ul înapoi pe cealaltă parte a ecranului.
Următorul lucru pe care îl vom face este să adăugăm terenul. Acest lucru va dura încă câțiva pași, dar vom merge încet și vom avea grijă ca totul să fie pus în locul potrivit. Dacă nu ați făcut primul tutorial și nu înțelegeți cum să utilizați grupurile sau să înțelegeți ce sunt, acum ar fi un moment bun pentru a le verifica. Aici este codul de plop in (pune-l chiar sub codul în cazul în care am setup backgroundnear2, înainte de funcția de actualizare):
--a crea un grup nou pentru a ține toate blocurile noastre blocuri locale = display.newGroup () - setarea câtorva variabile pe care le vom folosi pentru a poziționa terenul local la solMin = 420 local groundMax = 340 ground groundLevel = groundMin - aceasta pentru buclă va genera toate piesele tale de pământ, vom face - 8 în toate. pentru a = 1, 8, 1 este isDone = false - dați un număr aleator între 1 și 2, acesta este cel pe care îl vom folosi pentru a decide care - ce să folosim pentru spritele de la sol. A face acest lucru ne va da terenuri aleatoare, asa ca se pare ca pamantul merge pentru totdeauna. Puteți să aveți cât mai multe texturi diferite pe care le doriți. Cu cat aveti mai multe intamplari, amintiti-va - numarul din math.random (x) cu multe texturi pe care le aveti. numGen = math.random (2) imprimare locală newBlock (numGen) dacă (numGen == 1 și isDone == false) atunci newBlock = display.newImage ("images / ground1.png") isDone = 2 și isDone == false), apoi newBlock = display.newImage ("images / ground2.png") esteDone = true end - acum că avem imaginea potrivită pentru blocul în care mergem - să îi dăm niște variabile membre care ne va ajuta să urmărim fiecare bloc, precum și să îi poziționăm acolo unde le dorim. newBlock.name = ("bloc" ... a) newBlock.id = a - deoarece a este o variabilă care este modificată în fiecare execuție putem atribui --value la bloc bazat pe a. În acest caz, dorim ca poziția x să fie poziționată în poziția lățimii unui bloc. newBlock.x = (a * 79) - 79 newBlock.y = blocuri groundLevel: introduceți (newBlock) end Comentariile din cod vă vor ajuta să înțelegeți ce face totul până acum. Sperăm că ceea ce căutați acum arată în felul următor:
Acum, ultimul lucru pe care trebuie să-l facem este să începem să ne mișcăm blocurile. Să mergem mai departe și să adăugăm codul pentru asta. Puneți acest cod după sfârșitul funcției de actualizare:
funcția updateBlocks () pentru a = 1, blocks.numChildren, 1 dacă dacă (a> 1) atunci newX = (blochează [a - 1]) x + 79 else newX = (blocuri [8] if ((blocuri [a]). x < -40) then (blocks[a]).x, (blocks[a]).y = newX, groundLevel else (blocks[a]):translate(-5, 0) end end end
Înainte ca ceva să se miște, trebuie să fim siguri că suntem de fapt apelați funcția de la funcția de actualizare. Deci, în interiorul funcției de actualizare de sub linia updateBackgrounds (), apelați funcția updateBlocks (). Cu asta, ar trebui să avem totul în mișcare acum. Observați că, în loc să mutați manual blocurile, am folosit funcția de traducere. Această funcție este disponibilă pentru orice obiect pe care îl creăm prin apelul newImage. Oricare metodă va funcționa, utilizați unul sau altul sau utilizați un amestec. Un alt lucru pe care ar trebui să îl observați este că există un decalaj între unele blocuri. Acest lucru se întâmplă deoarece setăm locația noilor blocuri chiar lângă vechea locație a ultimului bloc. Problema este că atunci când o facem în acest fel, încercăm să o plasăm lângă un obiect în mișcare, așa că s-ar putea să nu intrăm mereu lângă el. Această problemă va deveni și mai mare odată ce încercăm să creștem viteza de deplasare a blocurilor, cu cât acestea se mișcă mai repede, cu atât mai mare va deveni diferența. Această problemă poate fi depășită prin simpla adăugare a unei variabile de viteză și efectuarea calculelor noastre pe baza acestei viteze. Reveniți la liniile de cod unde am inițializat variabilele groundMin și groundMax, și adăugați aceasta:
viteza locală = 5;
În continuare, înlocuiți funcțiile updateBlocks () și updateBackgrounds () cu acestea:
() pentru a = 1, blocks.numChildren, 1 dacă dacă (a> 1), atunci newX = (blochează [a - 1]) x + 79 altceva newX = viteza de sfârșit dacă ((blocuri [a]) < -40) then (blocks[a]).x, (blocks[a]).y = newX, (blocks[a]).y else (blocks[a]):translate(speed * -1, 0) end end end function updateBackgrounds() --far background movement backgroundfar.x = backgroundfar.x - (speed/55) --near background movement backgroundnear1.x = backgroundnear1.x - (speed/5) if(backgroundnear1.x < -239) then backgroundnear1.x = 760 end backgroundnear2.x = backgroundnear2.x - (speed/5) if(backgroundnear2.x < -239) then backgroundnear2.x = 760 end end
Cu aceste funcții actualizate, blocurile dvs. ar trebui să se miște frumos, fără niciun gol!
Un ultim lucru pentru a face acest joc mai mult. Mergeți înapoi în funcția de actualizare și puneți în această linie de cod după funcțiile de actualizare:
viteza = viteza + 0,05
Odată ce este acolo, veți putea urmări viteza de nivel în fața ochilor dvs.! Valoarea exactă a cursului este doar un exemplu, cât de repede actualizați jocul va depinde de joc și de audiența dvs. Tot ce a rămas în acest moment este aruncarea unui erou și a unor obstacole și avem un joc. Acest lucru va veni mai târziu, deoarece acest lucru îngreunează proiectul deocamdată. Noțiuni de bază toate acestea care rulează nu a fost atât de rău, și vom continua să adăugați o mulțime de funcționalitate fiecare iterație. Asigurați-vă că verificați din nou pentru tutorialul următor și dacă aveți întrebări sau feedback, anunțați-ne în comentariile de mai jos!
