Creați un joc de puzzle bazat pe fizică - crearea de interfețe

În această serie de tutori, vă voi arăta cum să creați un joc de puzzle bazat pe fizică în Corona SDK. Veți învăța despre manipularea fizică și comenzile de atingere. Obiectivul jocului este de a obține mingea în container atingând cutiile corecte. Citește mai departe!


Disponibile și în această serie:

  1. Creați un joc de puzzle bazat pe fizică - crearea de interfețe
  2. Creați un joc de puzzle bazat pe fizică - adăugați o interacțiune

1. Prezentare generală a aplicațiilor

Folosind grafică pre-făcută, vom codifica un joc distractiv folosind API-urile Lua și Corona SDK.

Playerul va putea să utilizeze ecranul tactil de pe dispozitiv pentru a elimina casetele de pe scenă. Puteți modifica parametrii din cod pentru a personaliza jocul.


2. Dispozitivul țintă

Mai întâi vom selecta platforma pe care dorim să o executăm în cadrul aplicației. Acest lucru ne va permite să alegem dimensiunea imaginilor pe care le vom folosi.

Platforma iOS are următoarele caracteristici.

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

Deoarece Android este o platformă deschisă, există multe dispozitive și rezoluții diferite. Iată câteva dintre cele mai comune caracteristici ale ecranului.

  • 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 designul grafic, dezvoltând-o special pentru a fi distribuită pe un iPhone / iPod touch. Codul prezentat aici ar trebui să se aplice și dezvoltării Android cu SDK Corona.


3. Interfața

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


4. Export Graphics

Î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. preferat de imagine.

Am folosit Reglați dimensiunea ... funcția în previzualizare aplicație pe Mac OS X.

Nu uitați să dați imaginilor un nume descriptiv și să le salvați în dosarul proiectului.


5. Configurarea aplicației

Un fișier extern va fi utilizat pentru a face ca aplicația să fie complet ecranată pe toate dispozitivele. Acesta este 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",

6. Main.lua

Să scriem cererea!

Deschide-ți editorul preferat Lua și pregătește-te să-ți scriu aplicația minunată. Nu uitați să salvați fișierul ca main.lua în dosarul proiectului.


7. Structura codului

Ne vom structura codul ca și cum ar fi a Clasă. Daca stii ActionScript sau Java, veți găsi 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ă

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.


9. Fizica importului

Vom folosi biblioteca fizică pentru a face față coliziunilor. Utilizați codul de mai jos pentru al importa.

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

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')

11. Vizualizarea titlurilor

Aceasta este afișarea titlurilor. 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

12. Vizualizare credite

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

 -- [CreditsView] credite locale

13. Cutii

Cutiile creează nivelul. Există trei dimensiuni în această aplicație.


14. Mesaj de instrucțiuni

Un mesaj de instrucțiuni va apărea la începutul jocului. Se va completa după două secunde.

 -- Instrucțiuni locale ins

15. Ball

Acesta este graficul mingii. Obiectivul jocului este de a plasa acest element în caseta de goluri.

 -- Ball minge locală

16. Caseta de goluri

Acest cod stochează graficul casetei de țintă.

 -- Cutia de gloanțe la nivel local

17. Alertă

Aceasta este alerta care va fi afișată când câștigi jocul. Va termina nivelul și va încheia jocul.

 -- Alertă alertă localăVizualizare

18. Sună

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

 -- Suna local win = audio.loadSound ('win.caf')

19. Variabile

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

 -- Variabile locale lvlImg - stochează titlul imaginii curente

20. 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 =  local addBox =  local removeBox =

21. Constructor

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

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

22. Adăugați Vizualizarea titlurilor

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

 funcția Main () titleBg = display.newImage ('titleBg.png', 84, 12) playBtn = display.newImage ('playBtn.png', 220, 150) creditsBtn = 202) titleView = display.newGroup (titleBg, playBtn, creditsBtn) startButtonListeners ('adăuga') sfârșit

Data viitoare…


În această parte a seriei, am aflat despre interfața și configurarea de bază a jocului. În următoarea și ultima parte a seriei, vom gestiona crearea de niveluri, detectarea coliziunilor și pașii finali înainte de lansare. Vom trece prin testarea aplicațiilor, creând un ecran de pornire, adăugând o pictogramă și, în sfârșit, construind aplicația. Rămâi acordat pentru partea finală!

Cod