Share
În acest tutorial, vă voi arăta cum să creați un joc cu Corona SDK. Veți afla mai multe despre API-ul de desenare, comenzile de atingere și numerele aleatoare. Obiectivul acestui joc este de a folosi o paletă pentru a împiedica atingerea bilelor de pe podea. Pentru a afla mai multe, citiți mai departe!
Vom folosi grafice pre-făcute pentru a codifica un joc interesant folosind API-urile Lua și Corona SDK.
După finalizare, playerul va folosi ecranul tactil de pe dispozitiv pentru a controla o paletă. Parametrii din cod pot fi modificați pentru a personaliza jocul.
Primul lucru pe care trebuie să-l facem este să selectăm platforma pe care dorim să o executăm. Astfel vom putea alege dimensiunea imaginilor pe care le vom folosi.
Platforma iOS are următoarele caracteristici:
Deoarece Android este o platformă deschisă, există multe dispozitive și rezoluții diferite. Unele dintre caracteristicile comune ale ecranului sunt:
În acest tutorial ne vom concentra pe platforma iOS cu design grafic, în special pentru a fi dezvoltate pentru distribuție pe un iPhone / iPod touch, dar codul prezentat aici se aplică și dezvoltării Android cu SDK Corona.
O interfață simplă și prietenoasă va fi utilizată. Aceasta implică mai multe forme, butoane, imagini bitmap și multe altele.
Resursele de interfață grafice necesare pentru acest tutorial pot fi găsite în descărcarea atașată.
În funcție de dispozitivul pe care l-ați selectat, este posibil să fie necesar să exportați grafica în PPI recomandat. Puteți face acest lucru cu editorul dvs. preferat de imagine.
Am folosit Reglați dimensiunea ... în aplicația Previzualizare pe Mac OS X.
Nu uitați să dați imaginilor un nume descriptiv și să le salvați în dosarul proiectului.
Vom utiliza un fișier extern pentru a face aplicația să devină ecran complet pe toate dispozitivele ( config.lua fişier). Acest fișier arată dimensiunea originală a ecranului și metoda utilizată pentru a scala acel conținut în cazul în care aplicația rulează într-o altă rezoluție a ecranului.
aplicație = content = width = 320, height = 480, scale = "letterbox",
Să scriem cererea!
Deschideți editorul Lua preferat (orice Editor de text va funcționa, dar nu veți avea o evidențiere a sintaxei) și vă pregătiți să scrieți aplicația minunată. Nu uitați să salvați fișierul ca main.lua în dosarul proiectului.
Ne vom structura codul ca și cum ar fi o clasă. Dacă știți ActionScript sau Java, veți găsi structura familiară.
Variabile și constante de clase necesare Declare funcții contructor (funcție principală) metode de clasă (alte funcții) apel funcția principală
display.setStatusBar (display.HiddenStatusBar)
Codul de mai sus ascunde bara de stare. Bara de stare este bara din partea de sus a ecranului dispozitivului, care afișează ora, semnalul și alți indicatori.
Un vector simplu este folosit ca fundal pentru interfața aplicației. Următoarea linie de cod creează.
-- Grafică - [Fundal] local bg = display.newRect (0, 0, display.contentWidth, display.contentHeight) bg: setFillColor (52, 46, 45)
Aceasta este titlul de vizualizare, acesta va fi primul ecran interactiv care va apărea în jocul nostru. Aceste variabile stochează componentele sale:
-- [Title View] titlu local local playBtn local creditsBtn title localView
Această vizualizare va afișa creditele și drepturile de autor ale jocului. Această variabilă va fi utilizată pentru stocarea acesteia:
-- [CreditsView] credite locale
Un mesaj de instrucțiuni va apărea la începutul jocului și va fi completat după 2 secunde. Puteți schimba timpul ulterior în cod.
-- Instrucțiuni locale ins
Iată cercurile sau bilele. Obiectivul jocului este de a le împiedica să atingă partea de jos a ecranului.
-- Cercuri de cercuri cercuri locale = display.newGroup ()
Aceasta este alerta care va fi afișată când o minge atinge podeaua. Acesta va afișa scorul și va încheia jocul.
-- Alertă alertă localăVizualizare
Vom folosi efecte de sunet pentru a spori senzația jocului. Sunetele folosite în acest joc au fost create în as3sfxr.
Accentsconagua
-- Sună locală bounceSnd = audio.loadSound ('bounce.wav') locală loseSnd = audio.loadSound ('lose.wav') Acestea sunt variabilele pe care le vom folosi. Puteți citi comentariile din cod pentru a afla mai multe despre ele.
-- Variabilele cercului localTimer - adaugă un cerc nou de fiecare dată când se numește culori locale = 71, 241, 255, 255, 204, 0, 245, 94, 91, 0, 255, 204 250, 140, 254, - Posibile culori pentru cercuri (R, G, B)
Apoi, declarați toate funcțiile ca local la inceput.
-- Funcții locale Main = local startButtonListeners = local showCredits = locală hideCredits = locală showGameView = locallocListeners = local moveBar = local localCollection = local alert =
În timpul acestui pas vom crea funcția care inițializează logica jocului:
funcția principal () - cod ... sfârșit
Acum o vom plasa TitleView în stadiu și apelați o funcție care adaugă Atingeți ascultători de butoane.
('playBtn.png', 130, 248) creditsBtn = display.newImage ('creditsBtn.png', 125, 316) titleView = display.newGroup (titlu, playBtn, creditsBtn) startButtonListeners ('adaugă') sfârșit Această funcție adaugă ascultătorilor necesari TitleView butoane:
funcția startButtonListeners (acțiune) dacă (action == 'add') atunci playBtn: addEventListener ('tap', showGameView) creditsBtn: addEventListener 'tap', showCredits) sfârșitul final Ecranul de credite este afișat atunci când utilizatorul interceptează despre buton, a Atingeți ascultător se adaugă la vizualizarea creditelor pentru al elimina.
funcția aratăCredități: apăsați (e) playBtn.isVisible = false crediteBtn.isVisible = false crediteView = display.newImage ('credits.png', 0, display.contentHeight) transition.to (creditsView, time = 300, y = display. contentHeight - (creditsView.height - 40), onComplete = funcție () creditsView: addEventListener ('atingeți', hideCredits) end) end Când ecranul de credite este atins, acesta va fi completat din scenă și eliminat.
funcția ascundeCredite: apăsați (e) transition.to (crediteView, time = 300, y = display.contentHeight + 40, onComplete = function () creditsBtn.isVisible = true playBtn.isVisible = credite realeView: removeEventListener ) display.remove (creditsView) creditsView = nil end) sfârșit
Cand Joaca butonul este apăsat, TitleView este completat și îndepărtat, dezvăluind GameView. Există multe părți implicate în această viziune, așa că le vom împărți în următorii pași.
funcția showGameView: atingeți (e) transition.to (titleView, time = 300, x = -titleView.height, onComplete = function () startButtonListeners ('rmv') display.remove (titleView) titleView = Următoarele linii adaugă mesajul cu instrucțiuni:
(ins, time = 200, alpha = 0.1, onComplete = function () timer.performWithDelay (2000, function () transition.to ( ins, time = 200, alfa = 0.1, onComplete = functie () display.remove (ins) ins = nil end) sfarsit)
Acest pas creează paleta și o plasează pe scenă. Un nume poate fi adăugat mai târziu pentru un acces mai ușor.
-- Adăugați bare bar = display.newRoundedRect (70, 340, 160, 10, 3) bar.name = 'bar'
Acum vom crea ziduri în jurul ecranului pentru a împiedica bilele să părăsească scena.
-- Pereți stânga = display.newLine (0, 240, 0, 720) left.isVisible = false dreapta = display.newLine (320, 240, 320, 720) right.isVisible = false bottom = , 480) bottom.isVisible = false
Iată un scor TextField pentru a crea în partea dreaptă sus a scenei:
-- Scor de scor = display.newText ('0', 300, 0, 'Futura', 15) Apoi trebuie să adăugăm fizica obiectelor noastre. Aici vom folosi Filtru proprietate care împiedică anumite obiecte să se ciocnească una cu cealaltă. Acest lucru împiedică coliziunea cercurilor noastre, păstrând în același timp ciocniri între pereți și pale. Puteți găsi o explicație simplă a comportamentului său pe site-ul Corona.
-- Fizica physics.addBody (bar, 'static', filter = categoryBits = 4, maskBits = 7) physics.addBody (stânga, statică, filter = categoryBits = 4, maskBits = .addBody (dreapta, 'static', filter = categoryBits = 4, maskBits = 7) adăugați ')
Următoarea funcție adaugă ascultătorii necesari pentru a porni logica jocului:
funcția gameListeners (acțiune) dacă (action == 'add') apoi bg: addEventListener ('touch', moveBar) bottom: addEventListener ('collision', alert) altfel bg: removeEventListener ('touch', moveBar) timer.cancel (circleTimer) circleTimer = coloana nul: removeEventListener ('collision', onCollision) Atingerea fundalului apelează următoarea funcție care gestionează mișcarea paletei. Urmează degetul și se află pe partea de sus a acestuia.
funcția moveBar (e) dacă (e.phase == 'a mutat') apoi bar.x = e.x bar.y = e.y - 40 sfârșit - Păstrați bara 1/3 din partea de sus dacă (bar.y < 160) then bar.y = 160 end end
circleTimer cheamă acest cod. Creează un cerc sau o minge în partea superioară a ecranului (care este apoi mutat în jos prin gravitație) și îi dă o dimensiune aleatorie și culoare aleasă de la colorate Masa. Valorile culorii sunt apoi stocate pentru a schimba și paleta. Se adaugă o mică împingere într - o direcție aleatorie calculată de dir și r variabile.
funcția addCircle () local r = math.floor (math.random () * 12) + 13 locală c = display.newCircle (0, 0, r) cx = math.floor (math.random - (r * 2))) cy = - (r * 2) - culoarea culorii locale color = math.floor (math.random () * 4) + 1 c.c1 = culori [color] [1] c2 = culori [color] [2] c.c3 = culori [color] [3] c: setFillColor (c.c1, c.c2, c.c3) fizics.addBody , bounce = 0.95, filter = categoryBits = 2, maskBits = 4) cercuri: inserați (c) --Movează dir local orizontal dacă (r < 18) then dir = -1 else dir = 1 end c:setLinearVelocity((r*2) * dir, 0 ) end
Această funcție rulează când paleta se ciocnește cu o minge. Redă un sunet, mărește scorul și schimbă culoarea paletei.
funcția onCollision (e) bara audio.play (bounceSnd): setFillColor (e.other.c1, e.other.c2, e.other.c3) score.text = tostring (tonumber (score.text) + 50) scor: setTextColor (e.other.c1, e.other.c2, e.other.c3) score.x = 300 sfârșit
Funcția de alertă creează o vizualizare de alertă, o animă și termină jocul.
() alertView = display.newImage ('alert.png', 90, 200) transition.from (alertView, time = 200, alpha = 0.1) scor localTF = display.newText (scor.text, 145, 253, 'Futura', 17) scorTF: setTextColor (255, 255, 255) - Așteptați 100 ms pentru a opri temporizarea fizică.performWithDelay (100, function () ) sfârșit, 1) sfârșit Pentru a începe jocul, Principal funcția trebuie să fie numită. Cu codul de mai sus, vom face asta aici:
Principal()
Default.png fișierul este o imagine afișată când începe aplicația în timp ce iOS încarcă datele de bază pentru a fi afișate în ecranul principal. Adăugați această imagine în folderul sursă al proiectului, apoi va fi adăugată automat de compilatorul Corona.
Utilizând grafica pe care ați creat-o înainte, puteți să creați acum o pictogramă bună. Dimensiunea pictogramei pentru pictograma non-retină iPhone este de 57x57px, dar versiunea retinei este 114x114px. Rețineți că 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 este nevoie să aveți colțurile rotunjite sau strălucirea transparentă, iTunes și iPhone-ul fac asta pentru tine.
E timpul pentru testul final. Deschideți Simulatorul Corona, navigați în dosarul proiectului, apoi 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 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. este pregătită pentru testarea dispozitivului și / sau trimiterea pentru distribuire!
În acest tutorial, am învățat despre API-ul de desenare, cronometrele, numerele aleatoare și alte abilități care pot fi utile pentru un număr mare de jocuri.
Experimentați cu rezultatul final și încercați să faceți propria dvs. 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!
