Share
În această serie de tutorial, vă vom arăta cum să creați un joc de scroller infinit cu SDK Corona construind un joc Runner Ostrich. Veți afla despre deplasarea obiectelor, manipularea fizică, comenzile tactile și detectarea coliziunilor. Obiectivul jocului este de a muta personajul și de a colecta elemente pentru a ridica scorul. Citește mai departe!
Folosind grafica pre-made vom codifica un joc distractiv folosind Lua și API-urile Corona SDK.
Playerul va putea să utilizeze ecranul tactil de pe dispozitiv pentru a muta caracterul și pentru a colecta elemente. Puteți modifica parametrii din cod 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 încât să putem 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. Câteva dintre caracteristicile cele mai comune ale ecranului sunt:
În acest tutorial, ne vom concentra pe platforma iOS cu design grafic, dezvoltând în mod special pentru distribuție pe un iPhone / iPod touch, dar codul prezentat aici ar trebui să se aplice dezvoltării Android cu SDK Corona.
O interfață simplă și prietenoasă va fi utilizată. Interfața va implica 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 utilizând editorul dvs. preferat de imagini.
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 folderul proiectului.
Un fișier extern va fi folosit pentru a face ca aplicația să intre pe întregul ecran 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 este rulată într-o altă rezoluție a ecranului.
aplicație = content = width = 320, height = 480, scale = "letterbox",
Acum, să scriem cererea!
Deschideți editorul preferat Lua (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, ar trebui să găsiți structura familiară.
Variabile și constante de clase variabile Declare funcții contructor (funcție principală) metode de clasă (alte funcții) apel funcția principală
display.setStatusBar (display.HiddenStatusBar)
Acest cod 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.
Vom folosi biblioteca fizică pentru a face față coliziunilor. Utilizați acest cod pentru a le importa:
-- Fizica fizica locala = necesita (fizica) fizica.start ()
O grafică simplă este folosită ca fundal pentru interfața aplicației, următoarea linie de cod o stochează.
Accentsconagua
-- Grafică - [Background] local bg = display.newImage ('bg.png') 
Aceasta este titlul de vizualizare, acesta va fi primul ecran interactiv care va apărea în jocul nostru. Aceste variabile stochează componentele:
-- [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
Nivelul de fundal, de asemenea, adaugă câmpul de text scor.
-- Contextul jocului la jocul local
Un mesaj de instrucțiuni va apărea la începutul jocului, acesta va fi completat după 2 secunde.
-- Instrucțiuni locale ins
Caracterul grafic. Obiectivul jocului este să îl mutați în sus și în jos pe ecran pentru a strânge cireșele.
-- Sturge local de struț
Grafica cireșelor. Există, de asemenea, cireșe rău care vă va face să pierdeți jocul.
-- Cherrys cireșe locale
Grafica pad-ului. Apăsați pe ele pentru a muta caracterul.
-- Așezați local local în jos
Aceasta este alerta care va fi afișată atunci când se colectează o cireșă proastă. Acesta va finaliza nivelul și va încheia jocul.
-- Alertă alertă localăVizualizare
Vom folosi Sound Effects pentru a îmbunătăți sentimentul jocului, puteți găsi muzica folosită în acest exemplu pe playonloop.com. Sunetele au fost create în as3sfxr.
-- Sunete locale bgMusic = audio.loadStream ('POL-purple-hills-short.mp3') locale cherrySnd = audio.loadSound ('cherry.mp3') local badCherrySnd = audio.loadSound ('badCherry.mp3') Acestea sunt variabilele pe care le vom folosi. Citiți comentariile din cod pentru a afla mai multe despre ele.
-- Variabile locale timerSrc - adăugați cronometrul local yPos = 108, 188, 268 - posibile poziții de struț y viteză locală = 5 - viteză cireș local speedTimer - cronometru pentru a schimba viteza cireșelor
Declarați toate funcțiile ca local la inceput.
-- Funcții locale Main = locale startButtonListeners = locale showCredits = locale hideCredits = local showGameView = locallocListeners = local startGame = local moveCreate = local moveSpeed = local update = local onCollision = alertă locală =
Apoi vom crea funcția care va inițializa toată logica jocului:
funcția principal () - cod ... sfârșit
Acum, plasăm TitleView în scenă și sunăm o funcție care va adăuga Atingeți ascultători de butoane.
("playBtn.png", 219, 160) creditsBtn = display.newImage ('creditsBtn.png', 205, 223) titleView = display.newGroup (bg, titleBg, playBtn, creditsBtn) startButtonListeners ('adauga') sfarsit 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 creditelor este afișat atunci când utilizatorul apasă butonul aproximativ. A Atingeți ascultător se adaugă la vizualizarea creditelor pentru al elimina.
funcția showCredități: apăsați (e) playBtn.isVisible = false crediteBtn.isVisible = false crediteView = display.newImage ('credits.png', -130, display.contentHeight-140) transition.to (creditsView, time = = 65, onComplete = funcție () creditsView: addEventListener ('tap', hideCredits) end) sfârșit Când ecranul de credite este atins, acesta va fi completat din scenă și eliminat.
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
Cand Joaca butonul este atins, vizualizarea titlului 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 = Următoarele linii adaugă instrucțiunile jocului.
-- Instrucțiuni Mesaj ins = display.newImage ('ins.png', 187, 199) Această parte creează Score TextField pe scenă.
-- TextFields scorTF = display.newText ('0', 258, 26.5, 'Marker Felt', 16) scorTF: setTextColor (184, 165, 104) Adăugați caracterul de strut la nivel.
-- Ostrich de struturi = display.newImage ('ostrich.png', 11, 180) Acestea sunt controalele de pe ecran pentru joc.
-- Puneți sus = display.newImage ('up.png', 418, 20) jos = display.newImage ('jos.png', 418, 258) Apoi, adăugăm fizica obiectelor de joc. De asemenea, creăm un Masa pentru cireșe și apelarea gameListeners funcţie.
-- Adăugați Fizică de struț fizics.addBody (strut) ostrich.isSensor = adevărat cherrys = display.newGroup () gameListeners ('adaugă') sfârșit Această funcție adaugă ascultătorii necesari pentru a porni logica jocului.
(addFollow): addEventListener ('tap', movePlayer) în jos: addEventListener ('action'), ('tap', movePlayer) vitezaTimer = timer.performWithDelay (5000, increaseSpeed, 5) altfel Runtime: removeEventListener ('enterFrame', update) up: removeEventListener ('tap', movePlayer) jos: removeEventListener anulați (timerSrc) timerSrc = zero timer.cancel (speedTimer) speedTimer = sfârșitul final al nilului În această parte, eliminăm mesajul de instrucțiuni, începem să jucăm muzica de fundal a jocului și creăm un cronometru care va adăuga o cireș la fiecare 400 de milisecunde.
funcția startGame () ins: removeEventListener ('tap', startGame) display.remove (ins) audio.play (bgMusic, loops = -1, canal = 1) timerSrc = timer.performWithDelay (400, createCherry, Următorul fragment de cod creează o cireșă obișnuită sau proastă, bazată pe un număr aleator și o plasează pe ecran. Obiectul rezultat este adăugat la motorul fizicii pentru a verifica coliziunile.
funcția createCherry () cherry locale local rnd = math.floor (math.random () * 4) + 1 dacă (rnd == 4) apoi cherry = display.newImage ('badCherry.png', display.contentWidth, yPos .floor (math.random () * 3) +1)) cherry.name = 'rău' altceva cherry = display.newImage ('cherry.png', display.contentWidth, yPos [math.floor (math.random * 3) +1)) cherry.name = 'cireș' sfârșit - Cherry physics.addBody (cireș) cherry.isSensor = adevărată cireș: addEventListener ('collision', onCollision) Schimbați poziția Y a struțului folosind panoul de control pe care l-am creat mai devreme.
funcția movePlayer (e) dacă (e.target.name == 'sus' și ostrich.y ~ = 122) apoi ostrich.y = ostrich.y - 80 elseif (e.target.name == 'jos' și struț. y ~ = 282), apoi ostrich.y = ostrich.y + 80 sfârșitul final
Un cronometru va mări viteza la fiecare 5 secunde. Se afișează o pictogramă pentru a avertiza jucătorul despre schimbarea vitezei.
(temporal = 200, alfa = 0.1, onComplete = function () temporizator), care este o functie de crestere a vitezei, viteza = 2 - pictograma locala icon = display.newImage (' .performWithDelay (500, funcția () transition.to (pictograma, time = 200, alfa = 0.1, onComplete = function () Această funcție se ocupă de mișcarea cireșelor. Utilizează variabila de viteză pentru a determina cât de mulți pixeli să miște cireșa în fiecare cadru.
funcția update () dacă (cherrys = = nil) atunci pentru i = 1, cherrys.numCopii fac cireșe [i] .x = cherrys [i] .x -
Acum verificăm dacă cireșul se ciocnește cu struțul folosind codul următor. Scorul se ridică atunci când o cireșă obișnuită se ciocnește și se semnalează o alertă atunci când se atinge o cireșă proastă. În ambele cazuri cherry este eliminat și un sunet este jucat.
(e.target.name == 'cherry'), apoi - scorul scoreTF.text = tostring (tonumber (e) e.target:removeEventListener('collision ', onCollision) display.remove score.html) (50) audio.play (cherrySnd) - Bad cherry elseif (e.target.name == 'rău') apoi audio.play (badCherrySnd) alert () end end Funcția de alertă creează o vizualizare de alertă, o animă și apoi încheie jocul.
() alertView = display.newImage ('alert.png', 160, 115) transition.from (alertView, time = 300). , xScale = 0.5, yScale = 0.5) scor local = display.newText (scorTF.text, (display.contentWidth * 0.5) - 12, (display.contentHeight * 0.5) setTextColor (184, 165, 104) - Așteptați 100 ms pentru a opri temporizarea fizicii.performWithDelay (1000, funcția () fizics.stop () end, 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()
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 compilatorul Corona.
Folosind grafica pe care ați creat-o înainte, puteți 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.
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!
În simulatorul Corona, du-te 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!
În această serie, am învățat despre comportamentul fizic, despre ascultători și despre coliziuni. Aceste abilități pot fi utile într-un număr mare de jocuri!
Experimentați cu rezultatul final și încercați să faceți versiunea personalizată a jocului!
Sper că ți-a plăcut acest tutorial și ți-l dau ajutor. Mulțumesc că ați citit!
