Share
În acest tutorial, învățați cum să creați, Autostrada Dodge, un joc simplu, dar captivant. Highway Dodge este ușor de preluat și jucat, dar oferă calitatea de dependență a altor jocuri populare din App Store.
Autostrada Dodge începe prin plasarea jucătorului într-o mașină de curse pe autostradă. În timpul jocului, jucătorul trebuie să evite traficul de pe autostradă prin atingerea uneia dintre cele trei benzi disponibile. Pentru fiecare mașină amețită, jucătorul primește un punct și jocul se termină pentru jucător atunci când o mașină care se apropie loveste mașina de curse. De-a lungul timpului, mașinile care se apropie au ieșit mai repede și mai repede, pentru a oferi o adevărată provocare jucătorului.
Acest joc este construit folosind Lua și SDK Corona. Cel puțin trebuie să aveți un cont cu Corona Labs și SDK Corona instalat. Puteți descărca gratuit SDK-ul Corona pe site-ul Web Corona Labs. Pentru acest tutorial, am folosit build 2015.2731 din SDK-ul Corona.
Să mergem imediat și să începem autostrada Dodge creând un șablon gol. Deschide Corona Simulator și alegeți Proiect nou de la Fişier meniul. Odată ce ai Creați un nou proiect fereastră deschisă, introduceți Autostrada Dodge ca nume de proiect, alegeți un șablon gol și setați lățimea la 400 și înălțimea până la 600. Lăsați orientarea implicită setată la montant.
După configurarea proiectului, descărcați imaginile pentru Highway Dodge. Creați un nou dosar în noul dvs. proiect, denumiți-i imaginile și adăugați imaginile în acest director. Proiectul dvs. ar trebui să arate astfel:
Odată cu înființarea proiectului, să examinăm rapid două fișiere importante, build.settings și config.lua.
Acest fișier se ocupă de proprietățile de construire a jocului. Stochează informații despre orientarea aplicației, a informațiilor pictogramelor, a setărilor pentru iOS și a setărilor pentru Android. Setarea implicită este adecvată jocului nostru.
Acest fișier de configurare controlează proprietățile runtime ale jocului. Aceasta include lăţime, înălţime, scară, fps (cadre pe secundă) și imageSuffix. Proprietatea la care trebuie să ne uităm este imageSuffix. imageSuffix proprietatea este utilizată pentru selectarea dinamică a imaginii. Pe scurt, acesta spune aplicației să utilizeze o imagine de rezoluție mai mare atunci când este conectată la un dispozitiv cu rezoluție mai mare.
Am furnizat imagini de înaltă rezoluție în dosarul cu imagini, așa că trebuie să ne actualizăm config.lua în consecinţă. Proiectul tău config.lua fișierul ar trebui să arate ca cel de mai jos. Am omis secțiunea de notificare push, care este comentată.
aplicație = content = width = 400, height = 600, scale = "letterbox", fps = 30, imageSuffix =
Prin selectarea proiectului și selectarea dinamică a imaginii, hai să trecem la main.lua. Acest fișier este punctul de lansare al fiecărei aplicații construite împreună cu SDK-ul Corona. În jocul nostru, vor avea trei linii de cod.
Prima linie ascunde bara de stare pe dispozitivele iOS. Deschis main.lua și adăugați următoarea linie după comentariu -- Codul dvs. aici.
display.setStatusBar (display.HiddenStatusBar)
Apoi, vom începe să folosim compozitorul cerând biblioteca în jocul nostru. Facem acest lucru adăugând următoarea linie:
Accentsconagua
compozitor local = necesită ("compozitor") Apoi, folosim compozitorul pentru a trece la scena meniului. Deplasăm scene prin apelarea funcției composer.gotoScene (), trecând valoarea "Scene_menu" ca parametru. Valoarea "Scene_menu" este numele scenei și numele fișierului pe care îl creăm în secțiunea următoare.
composer.gotoScene ( "scene_menu")
Compozitorul este biblioteca oficială de management a scenei Corona. Compozitorul permite dezvoltatorilor să creeze cu ușurință o scenă și o tranziție între scene. În două rânduri, am reușit să trec de la scena principală la scena meniului. Dacă doriți să citiți mai multe despre compozitor, vizitați Corona's Composer Biblioteca Ghid disponibil pe site-ul web Corona Labs Docs.
Scena meniului din jocul nostru va consta doar din câteva elemente. Scena va conține un grafic de fundal, un titlu și un buton de pornire. Vom folosi biblioteca de widget-uri încorporate din Corona pentru a crea butonul de pornire. Biblioteca widget ne permite să creăm rapid și ușor elemente comune ale interfeței utilizator. În jocul nostru, îl vom folosi doar pentru crearea butonului.
În dosarul de proiect al Highway Dodge, creați un fișier nou, scene_menu.lua, și deschideți-l în editorul dvs. de text de alegere. În loc să începem de la zero, vom folosi șablonul de scenă disponibil pe site-ul web Corona Labs Docs. Cu șablonul lor, vom putea să ne mișcăm mult mai repede. Mergeți la Documentele Corona Labs și copiați / inserați șablonul de scenă scene_menu.lua.
Adăugați biblioteca widget în jocul nostru adăugând următoarea linie, chiar sub biblioteca compozitorului.
widget local = necesită ("widget") Adăugăm fundalul nostru utilizând grafica pe care ați descărcat-o mai devreme. Fundalul trebuie să fie poziționat în centrul ecranului. În scena: a crea () funcție și după screenGroup variabila este declarată, adăugați următorul cod:
fundal local = display.newImageRect (sceneGroup, "images / background.png", 475, 713) background.x = display.contentCenterX background.y = display.contentCenterY
Apoi, trebuie să adăugăm cele trei benzi care reprezintă autostrada. Facem acest lucru folosind un tabel pentru a ține brațele și a crea un pentru buclă care rulează de trei ori. Plasați acest fragment după graficul de fundal:
lane locale = pentru i = 1,3 do benzi [i] = display.newImageRect (sceneGroup, "images / lane.png", 79, 713) [i] .x = (display.contentCenterX - 79 * 2 ) + (i * 80) benzi [i] .y = display.contentCenterY sfârșitul
Pentru a vă asigura că benzile sunt întotdeauna centrate, am plasat benzile pe axa x folosind un pic de matematică. Acest lucru asigură că benzile rămân centrate, indiferent de dispozitivul pe care rulează jocul.
De asemenea, adăugăm logo-ul nostru pentru Highway Dodge plasând un obiect de imagine în partea de sus a ecranului.
logo-ul local = display.newImageRect (sceneGroup, "images / logo.png", 300, 150) logo.x = display.contentCenterX logo.y = 75
Înainte de a putea adăuga butonul widget, trebuie să creați o funcție care să răspundă la apăsarea butonului. Vom numi funcția handleButtonEvent () și mutați playerul pe scena jocului folosind composer.gotoScene (). Vom răspunde numai atunci când jucătorul și-a ridicat degetul de pe buton sau de la încheiat faza evenimentului.
funcția locală handleButtonEvent (eveniment) dacă ("a terminat" == event.phase), apoi compozitor.gotoScene ("scene_game", "slideLeft") capăt sfârșitulCu funcția adăugată, putem adăuga butonul. Creăm butonul folosind widget.newButton și trecând câteva valori la el. Specificăm lățimea și înălțimea butonului, fișierele imagine pentru buton, textul care urmează să fie afișat, tipul fontului, dimensiunea fontului și culoarea fontului.
De asemenea, îi spunem Corona ce funcție trebuie să apeleze la apăsarea butonului și poziționarea acestuia în mijlocul ecranului. Fișierele sursă ale acestui tutorial includ comentarii care explică fiecare dintre valorile utilizate pentru a configura butonul.
locale btn_startPlaying = widget.newButton width = 220, height = 100, defaultFile = "images / btn-blank.png", overFile = "images / btn-blank-over.png" sistem.defaultFontBold, fontSize = 32, labelColor = default = 0, 0, 0, peste = 0, 0, 0, 0.5, onEvent = handleButtonEvent btn_startPlaying.x = display.contentCenterX btn_startPlaying.y = .ctentCenterY sceneGroup: introduceți (btn_startPlaying)
Pentru a încheia scena meniului, trebuie să scoatem scena jocului când iese. Atunci când Corona se mișcă între scene, nu elimină întotdeauna scena anterioară. Fără aceste linii, jocul va fi mereu într-un joc peste scenă după ce a fost redat o singură dată.
Pentru a elimina scena anterioară, primim numele scenei și sunăm composer.removeScene () să îl eliminați dacă există. Adăugați următorul cod la scena: spectacol () funcţie.
local prevScene = compozitor.getSceneName ("anterior") dacă (prevScene) apoi compozitor.removeScene (prevScene) se terminăAcum putem începe să lucrăm la scena jocului. Vom folosi același flux de lucru pe care l-am utilizat pentru crearea scenei meniului. Creați un fișier nou, scene_game.lua, și copiați / inserați șablonul de scenă disponibil pe Documentele Corona Labs. Odată ce introduceți codul, deschideți-l scene_game.lua în editorul dvs. de text preferat.
Pentru a ne facilita codarea scenei jocului, vom folosi biblioteca widget și biblioteca de fizică. Acesta din urmă este folosit pentru detectarea coliziunilor. Adăugați următorul cod la scene_game.lua:
widget local = necesită ("widget") fizică locală = necesită ("fizică") fizics.start () fizics.setGravity (0,0) Pe prima și a doua linie, avem nevoie de biblioteca widget și de biblioteca de fizică. Apoi vom începe fizica și vom dezactiva gravitatea. Nu avem nevoie de gravitate pentru jocul nostru pe autostradă, în schimb vom folosi transition.to () pentru a muta mașinile.
În scena: a crea () funcția, vom declara un număr de variabile pe care le vom folosi în joc. Aceste variabile vor fi responsabile pentru mașina jucătorului, benzile, mașinile inamice și scorul jucătorului. Pentru a face lucrurile mai ușor de citit, am adăugat câteva comentarii.
-- "scena: create ()" scena funcției: create (event) lanțuri locale = - a crea un tabel numit lane local playerCar - o variabilă pentru mașina jucătorului local laneID = = - o masă pentru a ține inamicul mașinilor inamice localeCounter = 1 - a porni contorul inamicului la 1 pentru a ține evidența mașinilor inamice sendEnemyFrequency = 2500 - definește cât de des să trimiți mașinile inamice în milisecunde locale tmrToSendCars - o variabilă care să țină o referință la cronometrul de trimitere a mașinilor jucător localScore = 0 - începe scorul jucătorului la 0 player localScoreText - un obiect care să țină sfârșitul obiectului text scor
Sub declarațiile de variabile, am creat funcțiile pentru joc. Vom implementa fiecare funcție într-o etapă ulterioară. Adăugați următorul cod după declarațiile variabile din scena: a crea () funcţie.
funcția locală end functionScore () end funcția locală moveCar (eveniment) end funcția locală sendEnemyCar () sfârșitul funcției locale onPlayAgainTouch () sfârșitul funcției locale onGlobalCollision (eveniment) sfârșitul
După funcții, adăugăm fundalul și benzile. Pentru benzi, atașăm un ascultător de evenimente pentru fiecare bandă pentru a le face să răspundă la evenimentele tactile. Când este atins, ascultătorul sună moveCar () funcţie.
fundal = display.newImageRect (sceneGroup, "images / background.png", 475, 713) background.x = display.contentCenterX background.y = display.contentCenterY pentru i = 1,3 do lanes [i] = display.newImageRect (sceneGroup, "images / lane.png", 79, 713) benzi [i] .x = (display.contentCenterX - 79 * 2) + (i * 80) ] .id = i benzi [i]: addEventListener ("touch", moveCar) sfârșit Cu fundalurile și pistele configurate, este timpul să creați un obiect text pentru a ține scorul jucătorului și a crea mașina jucătorului. Scorul va fi în partea superioară a ecranului, iar mașina jucătorului va fi poziționată pe banda din stânga. În plus, vom transforma mașina jucătorului într-un obiect fizic dinamic.
playerScoreText = display.newText (sceneGroup, "Scor:" ... playerScore, 0, 0, native.systemFont, 36) playerScoreText.x = display.contentCenterX playerScoreText.y = 25 playerCar = display.newImageRect (sceneGroup, "images / playerCar. png ", 50, 100) playerCar.anchorY = 1 jucătorCar.x = benzi [1] .x playerCar.y = display.contentHeight physics.addBody (playerCar) playerCar.bodyType =" dinamic "
Apoi, setăm un cronometru pentru a trimite o mașină pe baza valorii sendEnemyFrequency variabilă și să creeze un ascultător de eveniment pentru runtime pentru coliziuni globale.
tmrToSendCars = timer.performWithDelay (sendEnemyFrequency, sendEnemyCar, 0) Durată de execuție: addEventListener ("collision", peGlobalCollision) În final, putem adăuga funcționalitatea jocului nostru. Această secțiune va adăuga un cod suplimentar pentru fiecare funcție pe care am declarat-o în secțiunea anterioară. Vom începe cu asta incrementScore () și se termină cu onGlobalCollision ().
incrementScore ()Această funcție este apelată atunci când o mașină inamică trece prin player și tranziția este completă. Când este sunat, scorul jucătorului este mărit cu 1. Adăugați următoarea implementare la incrementScore () funcţie.
-- Această funcție va crește scorul jucătorului cu 1. Această funcție este numită atunci când tranziția pentru mașina inamică este completă și este dezactivată. funcția de creare a funcției localeScore () playerScore = playerScore + 1 playerScoreText.text = "Scorul:" ... playerScore end
moveCar () moveCar () funcția este apelată atunci când este atinsă o bandă. Pe încheiat faza evenimentului, apucăm identificatorul benzii de rulare și mutăm mașina pe banda corectă. Ne intoarcem Adevărat la sfârșit pentru a indica un eveniment tactil de succes. Adăugați următoarea implementare la moveCar () funcţie.
-- moveCar va răspunde la evenimentul tactil pe funiile locale moveCar (eveniment) dacă (event.phase == "a terminat"), apoi laneID = event.target.id - apuca id-ul de banda care va fi 1, 2 sau 3 transition.to (playerCar, x = lanes [laneID] .x, time = 50) - mutati masina player-ului la banda adevarata return true - pentru a indica un eveniment tactil de succes,
sendEnemyCar () sendEnemyCar () funcția creează o mașină inamică, atribuie mașina unei benzi, atașează un corp de fizică mașinii și folosește transition.to () pentru a trimite mașina spre partea de jos a ecranului. Pentru a începe, să creăm obiectul mașinii inamice.
Câștigătorul vrăjmașilor [enemyCounter] = display.newImageRect (sceneGroup, "images / enemyCar" ... math.random (1,3) ... ".png", 50, 100)
Apoi, setăm locația x și y a mașinii inamice. De asemenea, creăm un daca atunci declarație pentru a atribui masina inamicului pe aceeași bandă, mașina jucătorului este în 50% din timp. Aceasta va forța jucătorul să se deplaseze mai des și va face jocul mai distractiv.
[x] - xx - pune masina pe o banda aleatorie daca (math.random (1,2) == 1) apoi enemyCars (enemyCounter) .x = benzi [math.random (1, # x = benzi [laneID] .x; sfârșitul - 50% din timp, plasați mașina inamicului pe banda de mașină a jucătorului. enemyCars [enemyCounter] .y = -125 - puneți inamicul de pe ecran în partea de sus
De asemenea, trebuie să rotim mașina inamicului, astfel încât să fie orientată în jos și să adauge un tip de corp fizic cinematic la mașina inamicului.
InamicCars [enemyCounter]: Scala (1, -1) - rotirea masinilor astfel incat sa se confrunte cu fizica.AddBody (inamiculCars [enemyCounter]) - adauga un corp de fizica inamicului masinilor inamiceCars [enemyCounter] .bodyType = - face corpurile cinematice
Cu mașina inamică înființată, folosim transition.to () funcția de a trimite mașina inamică pe una dintre benzile. Când tranziția este finalizată, jocul solicită o funcție pentru a elimina obiectul. De asemenea, cresc variabila enemyCounter de 1 pentru a urmări numărul de mașini inamice în joc.
(inamiculCars), y = display.contentHeight + enemyCars [enemyCounter] .height + 20, time = math.random (2250,3000), onComplete = functie (self) display.remove (self); incrementScore (); end) - o tranziție care mută mașina inamicului spre partea de jos a ecranului. La finalizare, obiectul masinii inamice este scos din joc. enemyCounter = inamicCounter + 1 - măriți contra inamicul cu unul pentru urmărire
În cele din urmă, vrem ca jocul să devină mai rapid în timp. Pentru fiecare alta masina trimisa, jocul va recrea temporizatorul si va seta ca acesta sa fie mai rapid cu 200ms.
dacă (enemyCounter% 2 == 0) apoi sendEnemyFrequency = sendEnemyFrequency - 200 dacă (sendEnemyFrequency < 800) then sendEnemyFrequency = 800; end timer.cancel(tmrToSendCars) tmrToSendCars = timer.performWithDelay(sendEnemyFrequency, sendEnemyCar, 0) end
onPlayAgainTouch ()Cea mai scurtă funcție, onPlayAgainTouch (), returnează playerul în meniul principal. Aceasta este ceea ce punerea în aplicare a onPlayAgainTouch () funcția arată.
-- Permiteți jucătorului să revină la funcția locală a meniului onPlayAgainTouch () composer.gotoScene ("scene_menu", "fade") - mutați playerul în sfârșitul meniului onGlobalCollision () onGlobalCollision () funcția este utilizată pentru a detecta coliziuni între oricare două obiecte fizice de pe ecran. În jocul nostru, avem doar două tipuri de obiecte de fizică:
Când aceste două obiecte se ciocnesc, jocul oprește toate cronometrele, tranzițiile și ascultătorii de evenimente. În plus, jocul afișează un joc peste scenă, care permite jucătorului să redea.
În primul rând, creăm un daca atunci declarație care ascultă au inceput fază.
dacă (event.phase == "a început"), atunci se termină
În daca atunci declarație, vom opri jocul. Pauzăm toate tranzițiile, anulează cronometrul, pauză fizică (chiar dacă nu este nevoie, este un apel bun pentru curățare) și elimină ascultătorul evenimentului din toate cele trei benzi. Adăugați următorul cod în interiorul daca atunci afirmație:
transition.pause () timer.cancel (tmrToSendCars) fizica.pause () pentru i = 1,3 do lanes [i]: removeEventListener ("atinge", mutareCar) După ce mecanica jocului sa oprit, adăugăm un dreptunghi opac și un obiect text care spune "Joc încheiat!". Acest lucru oferă o bună indicație vizuală că jocul sa încheiat.
joculOverBackground = display.newRect (sceneGroup, 0, 0, display.actualContentWidth, display.actualContentHeight) gameOverBackground.x = display.contentCenterX jocOverBackground.y = display.contentCenterY jocOverBackground: setFillColor (0) gameOverBackground.alpha = 0.5 joc localOverText = display .newText (sceneGroup, "peste joc!", 100, 200, native.systemFontBold, 36) gameOverText.x = display.contentCenterX gameOverText.y = 150 gameOverText: setFillColor (1, 1, 1)
Pentru a încheia funcția globală de coliziune, adăugăm butonul de redare din nou, care trimite playerul înapoi în meniu.
local playAgain = widget.newButton (width = 220, height = 100, defaultFile = "images / btn-blank.png", overFile = "images / btn-blank.png", label = "Menu", font = system.defaultFontBold , fontSize = 32, labelColor = default = 0, 0, 0, peste = 0, 0, 0, 0.5, onEvent = onPlayAgainTouch playAgain.x = display.contentCenterX playAgain.y = gameOverText.y + 100 sceneGroup: introduceți (playAgain)
Rulați aplicația pentru a vedea dacă totul funcționează conform așteptărilor. Ar trebui să puteți juca acest joc, mașinile inamice ar trebui să apară din partea de sus a ecranului, iar scorul dvs. ar trebui să crească pentru fiecare mașină adversară pe care o evitați cu succes.
Vă mulțumim că ați citit tutorialul meu despre crearea Highway Dodge cu SDK Corona. Puteți descărca fișierele sursă pentru acest joc de la GitHub. Ia-ți un moment să te gândești cum poți îmbunătăți jocul. Dacă sunteți în căutarea unor sugestii, aș recomanda adăugarea unei alte benzi, adăugarea mai multor tipuri de inamici și chiar adăugarea unor UPS.
