Share
În acest tutorial, vă voi arăta cum să creați un joc de colectare a pieselor folosind Corona SDK și limbajul de programare Lua. Vom explora modul de utilizare a controalelor touch și evenimentelor, vom crea forme folosind graficul API și vom folosi, de asemenea, coliziuni fizice și cronometre. Să începem.
În acest joc, jucătorul va putea controla un puc pe ecran pentru a colecta alte piese de aceeași culoare. Jucătorul are doar un timp limitat să colecteze cât mai multe bucăți posibil. Dacă jucătorul atinge o piesă dintr-o altă culoare, jocul se termină.
În acest proiect veți învăța următoarele abilități:
Primul lucru pe care trebuie să-l facem este să selectăm platforma pe care dorim să ne executăm cererea. Acest lucru ne permite să alegem dimensiunile corecte pentru opera de arta pe care o vom folosi.
Platforma iOS are următoarele cerințe:
Deoarece Android este o platformă mai deschisă, există multe dispozitive și rezoluții posibile. Câteva dintre cele mai comune sunt enumerate mai jos:
În acest tutorial, ne vom concentra pe platforma iOS și pe iPhone și iPod Touch în special. Cu toate acestea, codul utilizat în acest tutorial poate fi folosit și pentru platforma Android.
Vom folosi o interfață simplă și prietenoasă cu mai multe forme, butoane, bitmap-uri și multe altele. Operele de artă pentru interfață pot fi găsite în fișierele sursă ale acestui tutorial.
În funcție de dispozitivul pe care l-ați selectat, este posibil să fie necesar să convertiți grafica la rezoluția recomandată (PPI), pe care o puteți face în editorul dvs. preferat de imagini. Am folosit Reglați dimensiunea ... opțiune în Unelte meniul din previzualizare aplicație pe OS X. Nu uitați să dați imaginilor un nume descriptiv și să le salvați în folderul proiectului.
Vom folosi un fișier de configurare, config.lua, pentru ca aplicația să devină ecran complet pe toate dispozitivele. Fișierul de configurare arată dimensiunea originală a ecranului și metoda utilizată pentru a scala conținutul în cazul în care aplicația este rulată pe o altă rezoluție.
aplicație = content = width = 320, height = 480, scale = 'letterbox'
Să scriem aplicația reală. Deschide editorul Lua preferat. Orice editor de text simplu va funcționa, dar este recomandat să utilizați un editor de text care are evidențierea sintaxei. Creați un fișier nou și salvați-l ca main.lua în dosarul proiectului.
Ne vom structura codul ca și cum ar fi fost o clasă. Dacă sunteți familiarizați cu ActionScript sau Java, trebuie să vă familiarizați cu structura proiectului.
Variabile și constante de clase necesare Declare funcții constructor (funcție principală) metode de clasă (alte funcții) apel funcția principală
display.setStatusBar (display.HiddenStatusBar)
Acest fragment de cod ascunde bara de stare. Bara de stare este bara din partea superioară a ecranului dispozitivului care afișează ora, semnalul și alți indicatori.
Setarea ancorelor implicite ale afișajului este utilă dacă portați o aplicație din biblioteca grafică anterioară, adică proiectele pe care le-ați creat cu versiunea anterioară a setului SDK Corona. De la lansarea bibliotecii Graphics 2.0, punctul de referință al fiecărei imagini sa schimbat de la stânga sus la centrul acesteia. Pentru a schimba acest lucru în fiecare imagine pe care o utilizați în proiectul dvs., putem invoca setDefault și să treacă o valoare de la 0.0 la 1.0, cu 0.0 fiind stânga dacă schimbați X ancora și partea de sus dacă schimbați y ancoră.
Accentsconagua
display.setDefault ('anchorX', 0) display.setDefault ('anchorY', 0) Vom folosi biblioteca fizică pentru a face față coliziunilor. Importați și porniți biblioteca folosind fragmentul de cod prezentat mai jos.
-- Fizica fizica locala = necesita (fizica) fizica.start ()
Un fundal simplu pentru interfața de utilizare a aplicației. Fragmentul de cod de mai jos desenează fundalul pe ecran.
-- Grafică - [Background] locală gameBg = display.newImage ('gameBg.png') 
Aceasta este afișarea titlurilor. Este primul ecran interactiv care apare în jocul nostru. Aceste variabile stochează componentele sale.
-- [Title View] titlu local local playBtn local creditsBtn title localView
Vizualizarea creditelor arată creditele și drepturile de autor ale aplicației. creditsView variabila este folosită pentru stocarea acesteia.
-- [CreditsView] credite locale
Vom crea un câmp de text pentru a afișa scorul jucătorului puțin mai târziu în acest tutorial. Stocăm o referință la acest câmp de text în scoreTF variabil.
-- Scorați scorul local TextFieldTF
Pucurile din joc sunt create și distribuite aleatoriu pe scenă. pucuri grupul va fi folosit pentru a le grupa astfel încât să le putem manipula cu ușurință.
-- Puține pucuri locale
alertView variabila păstrează o referință la afișarea de alertă care este afișată atunci când un jucător de pictogramă de culoare greșită este atins de către player. Vizualizarea alertei va arăta jucătorului că jocul sa terminat.
-- Alertă alertă localăVizualizare
Vom folosi efecte sonore pentru a da caracterului suplimentar jocului. Sunetele pe care le-am folosit în acest proiect au fost obținute de la as3sfxr. Puteți găsi muzica de fundal în Play On Loop.
-- Sunete locale bgMusic = audio.loadStream ('POL-sky-sanctuary-short.mp3') local blip = audio.loadSound ('blip.wav') local greșit = audio.loadSound ('lose.wav') Următorul fragment de cod listează variabilele pe care le vom folosi în joc. totalPucks variabila stochează numărul de pucuri plasate pe scenă, timerSrc menține o referință la cronometrul jocului și timp se referă la dreptunghiul care arată timpul rămas.
-- Variabile locale totalPucks = 20 locale timerSrc ora locala
Declarăm funcțiile ca local La inceput. În Lua, puteți transmite o funcție afirmând numele înainte de a implementa corpul funcției. Acest lucru face mai ușor să urmăriți diferitele funcții pe care le vom folosi în acest proiect.
-- Funcții locale Main = locale startButtonListeners = locale showCredits = locală hideCredits = locală showGameView = locallocListeners = local createPuck = local movePuck = local reduceTime = local alert =
Să începem prin crearea unei punți de execuție pentru funcția care va inițializa logica jocului Principal funcţie.
funcția Capăt principal ()
Apoi, tragem ecranul cu titlul pe ecran și adăugăm un buton de ascultare a fiecărui buton. imagine noua metoda este utilizată pentru încărcarea imaginilor și afișarea acestora pe ecran utilizând pozițiile transmise funcției. De asemenea, creăm un grup numit titleView care servește ca un container pentru elementele nou create.
('playBtn.png', 220, 168) creditsBtn = display.newImage ('creditsBtn.png', 204, 230) titleView = display.newGroup (titleBg, playBtn, creditsBtn) startButtonListeners ('adaugă') sfârșit În startButtonListeners, adăugăm ascultătorii evenimentului la butoanele din ecranul de titlu. Când este apăsat butonul de redare, afișăm și începem jocul. Când este apăsat butonul Credite, vom arăta creditele jocului.
funcția startButtonListeners (acțiune) dacă (action == 'add') atunci playBtn: addEventListener ('tap', showGameView) creditsBtn: addEventListener 'tap', showCredits) sfârșitul final În showCredits, ascundem butoanele, afișăm creditele și adăugăm un ascultător pentru a ascunde creditele atunci când playerul dă click pe credite.
funcția aratăCredități: apăsați (e) playBtn.isVisible = false crediteBtn.isVisible = false crediteView = display.newImage ('credits.png', -110, display.contentHeight-80) transition.to (creditsView, time = 300, x = 0, onComplete = funcție () creditsView: addEventListener ('atingeți', hideCredits) sfârșit sfârșit Când jucătorul prăbușește creditele, vederea este completată de pe scenă și scoasă.
funcția ascundeCredite: tap (e) playBtn.isVisible = credite realeBtn.isVisible = adevărat transition.to (creditsView, time = 300, y = display.contentHeight + creditsView.height, onComplete = function () creditsView: , ascundeCredități) display.remove (creditsView) creditsView = nil end) sfârșit
Când jucătorul apasă butonul de redare pentru a începe un joc nou, vizualizarea titlurilor se completează din scenă și este ascunsă. Aceasta arată afișarea jocului. Vederea jocului este inima jocului. Să-i rupem restul showGameView pas cu pas.
funcția showGameView: atingeți (e) transition.to (titleView) time = 300, x = -titleView.height, onComplete = function () startButtonListeners ('rmv') display.remove (titleView) titleView = Începem prin crearea câmpului pentru textul scorului, după cum se arată mai jos.
funcția showGameView: atingeți (e) transition.to (titleView, time = 300, x = -titleView.height, onComplete = function) startButtonListeners ('rmv') display.remove (titleView) TextFields scorTF = display.newText ('0', 25, 18, 'Curier', 15) scorTF: setFillColor (15, 223, 245) sfarsit newText metoda acceptă o serie de argumente.
X coordona.y coordona.Pe iOS, aveți acces la o gamă largă de fonturi. Pe Android există doar trei fonturi disponibile; Droid Sans, Droid Serif și Droid Sans Mono.
În pasul următor, vom crea forma dreptunghiului temporizatorului folosind biblioteca grafică vectorială încorporată Corona. newRect funcția creează un dreptunghi care este lat 20pt, înalt de 6pt și îl plasează în partea dreaptă sus a scenei. Culoarea implicită a formelor noi este albă, deci trebuie să schimbăm culoarea dreptunghiului invocând setFillColor și trecând într-o valoare RGB. Biblioteca Graphics 2.0 nu utilizează valori care variază de la 0 la 255 pentru valorile RGB. În schimb, se preconizează că o valoare RGB va varia de la 0.0 la 1.0.
funcția showGameView: atingeți (e) transition.to (titleView, time = 300, x = -titleView.height, onComplete = function) startButtonListeners ('rmv') display.remove (titleView) TextFields scorTF = display.newText ('0', 25, 18, 'Courier', 15) scorTF: setFillColor (15, 223, 245) setFillColor (0,05, 0,87, 0,96) sfârșit O abordare rapidă și ușoară pentru conversia valorii RGB vechi la valori noi este împărțind valoarea veche prin 255. De exemplu, 123 devine 123/255, care se traduce la 0,48.
pucuri grupul stochează toate pucurile astfel încât să le putem manipula pe toate odată.
funcția showGameView: atingeți (e) transition.to (titleView, time = 300, x = -titleView.height, onComplete = function) startButtonListeners ('rmv') display.remove (titleView) TextFields scorTF = display.newText ('0', 25, 18, 'Courier', 15) scorTF: setFillColor (15, 223, 245) setFillColor (0,05, 0,87, 0,96) - Puck pucuri = display.newGrup () sfarsit Pentru a termina showGameViewMethod, instalăm ascultătorii jocului și începem muzica de fundal. Prin setarea bucle parametru pentru -1, muzica de fundal se va bifa până când îi spunem să se oprească.
funcția showGameView: atingeți (e) transition.to (titleView, time = 300, x = -titleView.height, onComplete = function) startButtonListeners ('rmv') display.remove (titleView) TextFields scorTF = display.newText ('0', 25, 18, 'Courier', 15) scorTF: setFillColor (15, 223, 245) setfillColor (0.05, 0.87, 0.96) - Puck pucks = display.newGroup () gameListeners ('adauga') audio.play (bgMusic, loops = -1, canal = În showGameView, noi numim gameListeners funcția în care pucurile sunt create prin invocarea createPucks funcţie. De asemenea, creăm un dreptunghi pentru afișarea timpului jocului.
(= action == 'add') apoi createPucks () timerSrc = timer.performWithDelay (1000, reduceTime, 20) altfel pentru i = 1, pucks.numChildren do pucks [i]: removeEventListener , movePuck) sfârșitul timer.cancel (timerSrc) timerSrc = capătul final de la zero
În createPucks, folosim a pentru pentru a instanțiza puțurile. Numărul de pucuri este stocat în totalPucks, la care am stabilit 20 un pic mai devreme în acest tutorial.
O poziție aleatorie este calculată pentru fiecare puc folosind math.random. De asemenea, folosim math.random pentru a ne ajuta să încărcăm o altă culoare decât imaginile proiectului. Cum funcționează asta? Noi generăm un număr întreg aleatoriu între 1 și 4, și adăugați rezultatul la numele imaginii pe care dorim să o încărcăm. De exemplu, dacă numărul aleatoriu este egal cu 3, jocul încarcă o imagine numită puck3.png.
funcția createPucks () pentru i = 1, totalPucks face local local rnd = math.floor (math.random () * 4) + 1 p = display.newImage ('puck' ... tostring (rnd) mat.floor (math.random () * display.contentWidth), math.floor (math.random () * display.contentHeight)) p.name = 'p' ... tostring (rnd) p: addEventListener (p, 'dinamic', radius = 12) p.isSensor = pucuri adevărate: inserați (p) capătul final Folosim evenimente tactile pentru a permite jucatorului sa-si mute puschetele. Când jucătorul atinge un puc, el este aliniat cu poziția atingerii, cu degetul jucătorului și apoi este mutat prin actualizarea poziției. Adăugăm, de asemenea, a coliziune ascultător al pucului activ pentru a detecta când pucul se ciocnește cu un alt puc. Acest ascultător al evenimentului este eliminat când jucătorul eliberează pucul prin ridicarea degetului de pe ecran.
funcția movePuck (e) dacă (e.phase == 'a început') atunci - coliziune e.target.x = ex - e.target.width / 2 e.target.y = ey - e.target.height / 2 e.target:addEventListener('collision ', onCollision) se termină dacă (e.phase ==' mutat ') apoi e.target.x = ex - e.target.width / 2 e.target.y = ey-e. target.height / 2 end if (e.phase == 'a terminat') apoi e.target:addEventListener('collision ', onCollision) end end reduceTimer funcția este responsabilă de dreptunghiul timerului pe care l-am creat mai devreme. În fiecare secundă, lățimea formei este redusă prin setarea acesteia XScale proprietate și este eliminat din stadiu când nu mai este vizibil. O vizualizare de alertă este afișată jucătorului atunci când timpul este în sus.
funcția reduceTime (e) time.xScale = time.xScale - 0.05 time.x = 450 dacă (time.xScale <= 0.2) then display.remove(time) alert() end end
onCollision funcția este responsabilă de manipularea coliziunilor dintre pucuri.
funcția onCollision (e) dacă (e.other ~ = nul), atunci dacă (e.other.name == e.target.name), apoi audio.play (blip) - Scorul local Scorul local = display.newText ('50 ', e.other.x, e.other.y,' Courier New Bold ', 14) transition.to (scor, time = 500, xScale = 1.5, yScale = 1.5, y = score.y - 20, onComplete = funcția () display.remove (scor) scor = nil end) - Eliminați display.remove (e.other) e.other = zero - Scorul total ScoreTF.text = tostring (tonumber (scoreTF.text) ) scoreTF.x = 15 altceva audio.play (greșit) alertă ("pierdere") end end end Asta se întâmplă atunci când are loc o coliziune:
50 puncte și câmpul de text al scorului este actualizat. alerta funcția este o funcție simplă de ajutor pentru a afișa o vizualizare de alertă și ao anima. Oprim sunetul după 700 milisecunde pentru a ne asigura că putem juca un sunet. Ascultatorii jocului sunt eliminați pentru a pune capăt jocului și vom afișa o imagine corespunzătoare jucătorului.
(action) timer.performWithDelay (700, function () audio.stop (1) audio.dispose (bgMusic) bgMusic = nil end, 1) gameListeners ('rmv' = display.newImage ('gameOver.png', 155, 125) altar alertView = display.newImage ('timeUp.png', 155, 125) scor local = display.newText (scoreTF.text, 225, 160, 'Courier New Bold ', 20) scor: setFillColor (255, 255, 255) end transition.from (alertView, time = 300, xScale = 0.5, yScale = 0.5 funcția () fizics.stop () end, 1) sfârșit Pentru a începe jocul, îl invocăm Principal după cum se arată mai jos.
Principal()
Pe platforma iOS, fișierul numit Default.png este afișat în timp ce aplicația este lansată. Adăugați această imagine în folderul sursă al proiectului dvs. și va fi adăugat automat de compilatorul Corona.
Utilizând grafica pe care ați creat-o mai devreme, puteți crea acum o pictogramă plăcută. Dimensiunile dimensiunii pictogramei pentru un iPhone non-retina sunt 57px x 57px, în timp ce versiunea retinei trebuie să fie 114px x 114px. Opera de arta pentru iTunes trebuie sa fie 1024px x 1024px. Vă sugerăm să creați mai întâi lucrările de artă iTunes și apoi să creați imaginile de dimensiuni mai mici prin scalarea lucrărilor de artă iTunes până la dimensiunile corecte. Nu este nevoie ca pictograma aplicației să fie lucioasă sau să adăugați colțuri rotunjite, deoarece acest lucru este asigurat de sistemul de operare.
Este timpul să vă testați aplicația în simulator. Deschideți Simulatorul Corona, navigați la dosarul proiectului și faceți clic pe Deschis. Dacă totul funcționează așa cum era de așteptat, sunteți gata pentru ultimul pas.
În simulatorul Corona, du-te la Fișier> Construiți și selectați dispozitivul țintă. Completați câmpurile obligatorii și dați clic pe Construi. Așteptați câteva secunde și aplicația dvs. este gata să testeze pe un dispozitiv și / sau să fie trimisă spre distribuire.
În acest tutorial am învățat despre ascultători de atingere, detectarea coliziunilor și fizica, precum și câteva alte abilități care pot fi utile într-un număr mare de jocuri. Experimentați cu rezultatul final și încercați să modificați jocul pentru a vă crea propria versiune. Sper că ți-a plăcut acest tutorial și l-am găsit de ajutor. Mulțumesc că ați citit.
