Construiți un joc Apple Catcher - crearea de interfețe

În această serie de tutori, veți învăța cum să creați un joc Apple Catcher. Obiectivul jocului este de a apuca merele care cad pe ecran prin glisarea coșului. Citește mai departe!


Disponibile și în această serie:

  1. Construiți un joc Apple Catcher - crearea de interfețe
  2. Construiește un joc Apple Catcher - Adăugând interacțiune

Pasul 1: Prezentare generală a aplicației

Folosind grafice pre-create, vom codifica un joc distractiv folosind Lua și API-urile Corona SDK.

Jucătorul va putea prinde merele tragând coșul 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, astfel încât să putem 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ă, implicând 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ă. Grafica este de la openclipart.org.


Pasul 4: Exportați grafica

În funcție de dispozitivul pe care l-ați selectat, este posibil să fie nevoie să exportați graficul în PPI recomandat, puteți face acest lucru în 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.


Pasul 5: 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 6: Main.lua

Să scriem cererea!

Deschideți editorul dvs. preferat Lua (orice Editor de text va funcționa, dar unii nu pot furniza evidențierea sintaxei Lua) ș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 7: 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 variabile Declare funcții contructor (funcție principală) metode de clasă (alte funcții) apel funcția principală

Pasul 8: 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 9: Importul fizicii

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

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

Pasul 10: Contextul

Un grafic simplu este utilizat ca fundal pentru interfața aplicației. Următoarea linie de cod îl stochează.

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

Pasul 11: Vizualizarea titlurilor

Aceasta este titlul de vizualizare, acesta va fi primul ecran interactiv care va apărea în jocul nostru. Următoarele variabile stochează componentele sale:

 -- [Title View] titlu localBg locale playBtn local creditsBtn title localView

Pasul 12: Vizualizare credite

Această vizualizare va afișa creditele și drepturile de autor ale jocului. Această variabilă va fi utilizată pentru stocarea acesteia:

 -- [CreditsView] credite locale

Pasul 13: Bara de informații

Această imagine va fi plasată pe fundalul precedent. Acesta va fi bara de informații care va afișa scorul curent și timpul rămas.


Pasul 14: Apple

Grafica mărului. Acestea vor fi generate pe intrarea în cadru și plasate într-o poziție aleatorie.


Pasul 15: Stick

Stick-ul grafic. Acesta va fi adăugat folosind aceeași metodă ca și Apple. Acest element scade scorul când este luat.


Pasul 16: Cosul

Coșul va fi utilizat pentru colectarea articolelor care se încadrează.

 -- Coșul coșului local

Pasul 17: Alertă

Aceasta este alerta care va fi afișată la încheierea timpului. Acesta va dezvălui scorul și va încheia jocul.


Pasul 18: Variabile

Acestea sunt variabilele pe care le vom folosi, citiți comentariile din cod pentru a afla mai multe despre ele.

 -- Variabile locale infoBar local timerSrc local timeLeft local times = 0 - a crescut la 2 la funcția de actualizare a cronometrului (500) pentru a număra un al doilea punctaj local

Pasul 19: Declarați funcțiile

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

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

Pasul 20: Constructorul

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

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

Pasul 21: 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.

 Funcția Main () titleBg = display.newImage ('titleBg.png', 20.5, 130.5) playBtn = display.newImage ('playBtn.png', display.contentCenterX + 115, display.contentCenterY + 16) creditsBtn = display.newImage 'creditsBtn.png', 5, display.contentHeight - 57) titleView = display.newGroup (titleBg, playBtn, creditsBtn) startButtonListeners ('adauga') sfarsit

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 crearea elementelor, detectarea coliziunilor și pașii finali care trebuie făcuți înainte de lansarea testării aplicațiilor, crearea unui ecran de pornire, adăugarea unei pictograme și, în final, crearea aplicației. Rămâi acordat pentru partea finală!

Cod