Creați un joc Spațiu Defender - Configurare jocuri

În această serie de tutori, vom învăța cum să creați un joc de shooter spațiu, la fel ca jocul clasic Space Defender. Citește mai departe!


Prezentare generală a seriei


În această versiune a Space Defender, jucătorul va trebui să-și apere spațiul prin împușcarea dușmanilor. De fiecare dată când jucătorul distruge cu succes un inamic, va câștiga puncte și atunci când jucătorul a ajuns la 20 sau 40 de puncte, arma lor va primi un upgrade. Pentru a amesteca lucrurile, acest joc va trimite pachete bonus care sunt în valoare de 5 puncte. Pentru a vedea jocul în acțiune, urmăriți videoclipul de mai sus. Acum, că știm mai multe despre jocul pe care îl creăm, să începem!

Acest joc de shooter spațial va fi construit folosind Corona SDK. Iată câteva dintre lucrurile pe care le veți învăța în această serie de tutori:

  • O scurtă prezentare a Storyboard-ului Corona
  • Cum să utilizați operele de artă sub licența comună creativă
  • Cum se utilizează fonturile personalizate
  • Cum se utilizează widget-uri, cum ar fi butoanele
  • Cum de a construi un joc complet cu SDK Corona

Ce ai nevoie

Pentru a utiliza acest tutorial, va trebui să aveți instalat pe computer computerul SDK Corona. Dacă nu aveți setul SDK, mergeți la www.CoronaLabs.com pentru a crea un cont gratuit și a descărca software-ul gratuit.


1. Construiți configurația

Primul nostru pas în crearea jocului nostru este fișierul build.settings. Acest fișier gestionează toate proprietățile de construire a aplicației noastre, cum ar fi orientarea și opțiunile suplimentare pentru platformele Android și iOS. Creați un fișier nou numit build.settings și copiați următoarele setări în fișierul dvs..

 setările = orientation = default = "landscapeRight", suportate = "landscapeRight", "landscapeLeft", iphone = plist = UIStatusBarHidden = false, UIAppFonts = Kemco Pixel.ttf

Unul dintre marile lucruri despre Corona SDK este că documentele auto-documente și cele mai multe setări din acest fișier ar trebui să fie ușor de înțeles. Cu toate acestea, hai să mergem rapid prin aceste setări.

  • orientare - Acest tabel arată modul în care jocul va arăta efectiv. În cazul nostru, dorim ca jocul să fie redat în modul peisaj și să susțină atât peisajul din stânga, cât și din dreapta.
  • UIStatusBarHidden - Odată ce ne jucăm jocul, dorim să ascundem bara de stare. Deci, am setat această opțiune la falsă.
  • UIAppFonts - Această opțiune ne permite să folosim fonturi personalizate în cadrul aplicației noastre și din moment ce dorim să utilizăm Kemco Pixel.ttf în aplicația noastră, am stabilit-o aici. Fișierul de fonturi trebuie să fie plasat în directorul rădăcină al proiectului dvs. Kemco Pixel este disponibil pentru descărcare la http://www.dafont.com/kemco-pixel.font.

2. Configurarea runtime

După ce ne-am setat configurațiile de configurare a timpului, vom configura configurările noastre runtime în fișierul config.lua. În acest fișier, vom stabili lățimea și înălțimea jocului nostru, tipul de scalare a conținutului și cadrele pe secundă. Creați un nou fișier numit config.lua și copiați următoarele setări.

 aplicație = content = width = 320, height = 480, scale = "letterBox", fps = 30,,

Similar cu fișierul build.settings, config.lua se auto-documentează, cu excepția opțiunii de scară. Opțiunea de scară este o caracteristică pe care Corona SDK o folosește pentru a adapta aplicația dvs. pentru diferite dimensiuni ale ecranului. În cazul opțiunii letterbox, îi spunem lui Corona să afișeze tot conținutul nostru pe ecran, păstrând în același timp raportul de aspect. Când conținutul nu acoperă întregul ecran, aplicația va afișa bare negre în zonele fără conținut (la fel ca la vizionarea filmelor în modul panoramic).

Înainte de a continua să construim aplicația noastră, trebuie să vorbim despre grafică. Există o mulțime de moduri diferite în care puteți obține grafica pentru jocul dvs. - angajați un designer grafic, angajați un prieten, trageți-vă singur sau chiar cumpărați grafice de stocuri de pe site-uri precum https://graphicriver.net/.

Cu toate acestea, dacă vă aflați într-un buget limitat, este posibil să nu puteți achiziționa aceste grafice sau să nu aveți timp să le creați. În astfel de situații, puteți utiliza grafice care au fost lansate sub licența comună de creație. Licența comună creativă vă permite să utilizați grafice care sunt disponibile în mod liber sub anumite restricții, cum ar fi furnizarea de atribuire autorului.

Pentru jocul nostru, vom folosi lucrări de artă sub licența Creative Commons de la OpenGameArt.org. Autorul care a creat aceste imagini este VividRealtiy și aici este o legătură directă cu lucrarea sa - http://opengameart.org/content/evolutius-gfx-pack. Înainte de a continua, asigurați-vă că descărcați setul grafic sau descărcați fișierul pentru acest tutorial.

În timp ce există o grămadă de site-uri Web cu grafică sub această licență, aici sunt trei site-uri pe care le vizitez frecvent:

  • http://www.graphic-buffet.com/freebies/
  • http://creativity103.com
  • http://thatssopanda.com/blog/game-assets-for-corona-sdk

3. Configurarea Storyboard

Acum că avem grafica noastră, putem continua să facem jocul nostru! Pentru a continua jocul, trebuie să creați un nou fișier numit main.lua. Acest fișier va fi punctul de pornire al jocului nostru și, de fapt, este punctul de plecare al fiecărui joc făcut cu Corona. Odată ce fișierul este creat, deschideți-l în editorul dvs. preferat și introduceți următorul cod:

 -- ascundeți afișarea barei de stare.setStatusBar (display.HiddenStatusBar)

Această linie de cod va ascunde bara de stare din iOS. Apoi, vom folosi funcția de scenariu Corona pentru a gestiona jocul nostru. Caracteristica storyboard tratează diferite părți ale jocului ca scene pentru a ușura dezvoltarea de către administratori a codului. De exemplu, jocul nostru are trei scene - main.lua, meniul și ecranul de joc. Odată ce fiecare scenă este configurată, Corona oferă o modalitate foarte ușoară de a vă deplasa între scene. Deoarece acest lucru poate fi un obstacol uriaș pentru dezvoltatorii care încep de la Corona SDK, aici este o reprezentare grafică a aspectului jocului nostru.


Fiecare casetă albastră reprezintă o scenă individuală, iar săgeata dintre fiecare scenă arată modul în care vom naviga prin scene. Pur și simplu, vom începe la main.lua și vom naviga înainte și înapoi între Scena 2 și Scena 3.

Implementarea Storyboard-ului în aplicația noastră este simplă: trebuie doar să ai nevoie de modul și ești setat! Plasați următorul cod în main.lua pentru a include această facilitate grozavă.

 -- includeți modulul Corona "storyboard" modulul storyboard = necesită "storyboard"

Apoi, vom dori să trecem la a doua scenă și vom folosi variabila storyboard pentru a realiza acest lucru.

 -- încărcați meniul ecranului storyboard.gotoScene ("meniu")

Acum că am finalizat fișierul principal.lua, să abordăm meniul principal!


4. Crearea meniului principal

Meniul principal al jocului nostru va afișa o imagine de fundal, titlul jocului și un buton "Redați acum". Pentru a începe, creați un nou fișier numit menu.lua și tabloul de bord al lui Corona.

 scriptura locală = necesită ("storyboard") scenă local = storyboard.newScene ()

Acum vom adăuga funcția widget-ului Corona pentru a crea butonul nostru. Funcția widget ne permite să creăm cu ușurință elemente GUI comune, cum ar fi butoanele din jocul nostru.

 widget local = necesită "widget"

După biblioteca widget, vom predefinita câteva variabile pentru jocul nostru. Aceste variabile vor stoca lățimea ecranului, înălțimea ecranului și coordonatele mijlocului ecranului.

 ecran local, screenH, halfW, halfY = display.contentWidth, display.contentHeight, display.contentWidth * 0.5, display.contentHeight * 0.5

După variabilele noastre, vom crea prima noastră funcție numită scena: createScene (). Această funcție este apelată atunci când scena este încărcată pentru prima dată sau dacă scena a fost eliminată anterior. În general, această funcție este utilizată pentru a adăuga toate elementele grafice pe ecran.

 scena funcției: createScene (eveniment) grup local = auto.view end

O caracteristică importantă a unui storyboard este modul în care se ocupă de obiecte. Toate obiectele afișate pe care le folosim în cadrul acestei scene vor fi plasate împreună cu grupul de variabile. Plasând obiectele afișate în cadrul acestui grup, lăsăm Corona să știe că aceste obiecte aparțin acestei scene și când scena trebuie eliminată, aceste obiecte vor fi, de asemenea, eliminate.

În interiorul scenei funcției: createScene (), vom folosi graficul BKG.png (acest grafic a venit de la opengameart.org) ca fundal pentru jocul nostru. După ce este adăugat, vom centra graficul pe ecran și îl vom introduce în variabila de grup.

 -- afișați o imagine de fundal local bg = display.newImageRect ("images / BKG.png", 480, 320) bg.x = jumătate W bg.y = jumătate Y grup: inserați (bg)

Apoi, plasăm titlul jocului pe ecran folosind fontul personalizat pe care l-am specificat în fișierul build.settings.

 -- plasați un titlu de joc pe ecranul local gametitle = display.newText ("Space Defender", 0,0, "Kemco Pixel", 40) gametitle.x = jumătateW joctitle.y = 100 grup: inserați (gametitle)

Ultima noastră adăugire la prima noastră funcție este butonul de redare. Butonul de redare va folosi funcția widget a Corona și un ascultare a evenimentului numit onPlayBtnRelease. Ascultătorul evenimentului va fi declanșat când atingeți butonul de redare. Adăugați următorul cod în interiorul scena: createScene () funcţie.

 funcția locală onPlayBtnRelease () storyboard.gotoScene ("joc", "slideLeft") sfârșitul playBtn = widget.newButton label = "Joacă acum", labelColor = default = 255, defaultFile = "images / Button.png" , overFile = "images / Button_Purple.png", width = 150, height = 60, left = 180, top = 150, font = "Kemco Pixel", fontSize = 18, onRelease = onPlayBtnRelease - (playBtn)

După funcția noastră de creare a scenei, vom adăuga o funcție de introducere a scenei. Această funcție va fi declanșată după funcția de creare a scenei și va elimina scena anterioară.

 funcția scena: enterScene (eveniment) grupul local = self.view if storyboard.getPrevious () ~ = nil apoi storyboard.removeScene (storyboard.getPrevious ()) end end

Ultima funcție pe care o vom adăuga este funcția destroyScene. Această funcție va fi apelată atunci când scena este îndepărtată sau distrusă. În cazul nostru, folosim widget-uri și din moment ce widget-urile trebuie să fie eliminate manual, vom elimina widgetul din interiorul funcției de distrugere a scenei.

 funcția scena: destroyScene (eveniment) grupul local = self.view dacă playBtn apoi playBtn: removeSelf () - widget-urile trebuie îndepărtate manual playBtn = nil end end

În cele din urmă, adăugăm ascultători de evenimente pentru a apela diferitele funcții pe care le-am înființat - introducețiScene, distrugeScene și creațiScene.

 scena: addEventListener ("createScene", scenă) scena: addEventListener ("enterScene", scenă) scena: addEventListener ("destroyScene"

Concluzie

Și asta este pentru Partea 1! Am învățat cum să configuram proiectul nostru, cum să implementăm funcția storyboard Corona, cum să pornim aplicația noastră și cum să creăm un sistem de meniuri. Citiți partea 2 din această serie acum!

Cod