Creați un joc inspirat Lunar Lander - crearea de interfețe

În această serie de tutori, veți învăța cum să creați un joc inspirat de Lunar Lander. Obiectivul jocului este de a apuca stelele pe ecran și apoi să aterizeze în siguranță pe locul indicat. Citește mai departe!


Pasul 1: Prezentare generală a aplicației

Folosind grafica pre-made vom codifica un joc distractiv folosind Lua și API-urile Corona SDK.

Jucătorul va putea să lovească un puc trăgând cu zbaturi pe ecran. Puteți modifica parametrii din cod pentru a personaliza jocul.


Pasul 2: Dispozitivul vizat

Primul lucru pe care trebuie să-l facem este să selectăm platforma pe care dorim să o executăm în cadrul aplicației. În acest fel, vom putea alege dimensiunea imaginilor pe care le vom folosi.

Platforma iOS are următoarele caracteristici:

  • iPad 1/2: 1024x768px, 132 ppi
  • iPad 3: 2048x1536, 264 ppi
  • iPhone / iPod Touch: 320x480px, 163 ppi
  • iPhone 4 / iPod Touch: 960x640px, 326 ppi
  • iPhone 5 / iPod Touch: 1136x640, 326 ppi

Deoarece Android este o platformă deschisă, există multe dispozitive și rezoluții diferite. Câteva dintre caracteristicile cele mai comune ale ecranului sunt:

  • Tableta Asus Nexus 7: 800x1280px, 216 ppi
  • Motorola Droid X: 854x480px, 228 ppi
  • Samsung Galaxy SIII: 720x1280px, 306 ppi

Î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.


Pasul 3: Interfața

O interfață simplă și prietenoasă va fi utilizată. Acesta va implica mai multe forme, butoane, bitmapuri și multe altele.

Resursele de interfață grafice necesare pentru acest tutorial pot fi găsite în descărcarea atașată.

Freedom font (gratuit pentru uz comercial). Moon și Rocket Graphics de la openclipart.org.


Pasul 4: Exportați grafica

Î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 în editorul dvs. de imagine preferat.

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.


Pasul 5: Sunetul

Vom folosi efecte de sunet pentru a spori senzația jocului. Sunetele folosite în această aplicație au fost generate de AS3SFXR.


Pasul 6: Configurarea aplicației

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",

Pasul 7: Main.lua

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.


Pasul 8: Structura codului

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 necesare Declare funcții constructor (funcție principală) metode de clasă (alte funcții) apel funcția principală

Pasul 9: Ascundeți bara de stare

 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.


Pasul 10: Importul fizicii

Vom folosi biblioteca fizică pentru a face față coliziunilor. Utilizați acest cod pentru a importa biblioteca fizică:

 fizica locala = necesita (fizica) fizica.start ()

Pasul 11: Multitouch

De asemenea, vom folosi biblioteca multi-touch pentru a manipula mai multe degete pe ecran. Utilizați acest cod pentru a le importa:

 -- Multitouch system.activate ('multitouch')

Pasul 12: Contextul

O grafică simplă este folosită ca fundal pentru interfața aplicației, următoarea linie de cod o stochează.

 -- Grafică - [Background] local bg = display.newImage ('bg.png')

Pasul 13: Vizualizarea titlurilor

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 localBg locale playBtn local creditsBtn title localView

Pasul 14: Vizualizare credite

Această vizualizare va arăta creditele și drepturile de autor ale jocului, această variabilă va fi utilizată pentru a fi stocată.

 -- [CreditsView] credite locale

Pasul 15: Game Pad

Această imagine va fi plasată pe fundalul precedent. Următoarele linii stochează grafica pentru ecranul de pe ecran.

 -- [Joc de fundal] local gameBg - [Pad] local până local local stânga dreapta

Pasul 16: Luna

Acestea sunt graficul de luni, referit în variabilele următoare. Luna mai mare va fi folosită ca loc de aterizare.

 -- [Moon] local m1 local m2 local m3 mareMM local

Pasul 17: Stele

Elementele care trebuie colectate. Patru elemente trebuie colectate înainte de debarcare.

 -- Stele locale s1 local s2 local s3 local s4

Pasul 18: Racheta

Acesta este graficul care va fi controlat de către player, folosind tastatura de pe ecran.

 -- Rocket (rachetă) locală

Pasul 19: Punctul de aterizare

Indicatorul punctului de aterizare devine activ când sunt colectate cele patru stele.


Pasul 20: Variabile

Acestea sunt variabilele pe care le vom folosi. Citiți comentariile din cod pentru a afla mai multe despre modul în care se vor potrivi.

 -- Variabile locale arrow locale locale = 0 - stele colectate local dir - direcție actuală local hitMoon = false - folosit pentru detectarea coliziunilor la actualizarea locale localHit local hitStar = false - folosit pentru detectarea coliziunilor la actualizarea locală hitGoal = false - folosit pentru detectarea coliziunilor la actualizarea locală completă

Pasul 21: Declarați funcțiile

Declarați toate funcțiile ca local la inceput.

 -- Funcții locale Main =  locale startButtonListeners =  locale showCredits =  locale hideCredits =  local showGameView =  locallocListeners =  local movePlayer = local update =  local onCollision = 

Pasul 22: Constructorul

Apoi, vom crea funcția care va inițializa toată logica jocului:

 funcția principal () - cod ... sfârșit

Pasul 23: Adăugați Vizualizarea titlurilor

Acum, plasăm TitleView în scenă și sunăm o funcție care va adăuga Atingeți ascultători de butoane.

 ('titleBg.png', display.contentCenterX - 100.5, 20.5) creditsBtn = display.newImage ('creditsBtn.png', 14, display.contentHeight - 57) titleView = display.newGroup titleBg, creditsBtn) startButtonListeners ('adaugă') sfârșit

Data viitoare…

În această parte a seriei, ați învățat interfața și setarea de bază a jocului. În următoarea și ultima parte a seriei, vom gestiona acțiunile de pe joc, detectarea coliziunilor și pașii finali care trebuie făcuți înainte de lansare, cum ar fi testarea aplicațiilor, crearea unui ecran de pornire, adăugarea unei pictograme și, în final, construirea app. Rămâi acordat pentru partea finală!

Cod