Share
Dacă ați dezvoltat vreodată jocuri HTML5, este posibil să fiți familiarizați cu câteva motoare de joc care pot face mult mai ușor dezvoltarea jocurilor. Aceștia au codul de care aveți nevoie pentru a detecta coliziuni, pentru a crea diverse entități sau pentru a adăuga efecte sonore în joc. În acest tutorial, veți afla despre un alt motor de joc numit Craft. Este foarte ușor de utilizat și acceptă toate browserele importante, inclusiv IE9.
Odată minificat, biblioteca are dimensiuni de numai 127kb, deci nu va duce la nici o întârziere importantă în încărcarea jocului. Acesta susține hărți sprite, astfel încât să puteți desena cu ușurință entități de joc pe ecran. De asemenea, puteți crea evenimente personalizate care pot fi declanșate ori de câte ori doriți și pe orice obiect doriți.
Există, de asemenea, componente pentru sunete, animație și alte efecte. În general, acest motor de joc este o alegere excelentă dacă doriți să dezvoltați câteva jocuri HTML5 de bază.
Primul lucru pe care trebuie să-l faceți este să includeți programul Crafty în proiectul dvs. Puteți descărca fișierul și îl puteți încărca în proiectele dvs. sau puteți să vă conectați direct la versiunea minimizată găzduită pe un CDN. Odată ce biblioteca a fost încărcată, puteți utiliza următoarea linie pentru a iniția programul Crafty:
Crafty.init ([Lățimea numărului, Înălțimea numărului, stage_elem]);
Primele două argumente determină lățimea și înălțimea scenei noastre. Al treilea argument este folosit pentru a specifica elementul pe care îl vom folosi ca etapă. Dacă nu este furnizat al treilea argument, Crafty va folosi a div cu id cr-stage ca etapă. În mod similar, dacă lipsesc argumentele de lățime și înălțime, Crafty va stabili lățimea și înălțimea etapei noastre egale cu lățimea și înălțimea ferestrei.
În acest moment, trebuie să aveți următorul cod:
Entitățile sunt blocuri ale unui joc Crafty. Totul de la jucător la dușmani și obstacole este reprezentat folosind entități. Puteți transmite o listă de componente unei entități. Fiecare dintre aceste componente va adăuga entității noastre o funcție suplimentară prin atribuirea de proprietăți și metode din acea componentă entității. De asemenea, puteți aloca alte metode unei entități pentru a seta diferite proprietăți, cum ar fi lățimea, înălțimea, locația și culoarea sa. Iată un exemplu foarte simplu de adăugare a componentelor unei entități:
Accentsconagua
Crafty.e ("2D, Canvas, Color");Fiecare entitate pe care doriți să o afișați utilizatorului va avea nevoie atât de componenta 2D, cât și de un strat de redare. Stratul de randare poate fi DOM, pânză, sau WebGL. Rețineți că asistența WebGL a fost adăugată în versiunea 0.7.1. În prezent, numai spiriduș, Imagine, SpriteAnimation, și Culoare componentele suportă redarea WebGL. Text entitățile trebuie să utilizeze în continuare DOM sau pânză deocamdata.
Acum, puteți folosi attr () pentru a stabili valoarea diferitelor proprietăți, inclusiv lățimea, înălțimea și poziția entității dvs. Cele mai multe metode din Craft vor readuce entitatea la care sunt chemați și attr () nu este o excepție. Aceasta înseamnă că veți putea să alăturați mai multe metode pentru a seta alte proprietăți ale elementelor dvs. Iată un exemplu:
Crafty.e ("2D, Canvas, Culoare") .attr (x: 200, y: 100, w: 200, h: 50) .color ("portocaliu");Aceasta va crea o entitate portocalie dreptunghiulară pe scenă.
Acum că ați creat entitatea, să scriem un cod pentru ao muta cu tastatura. Puteți să mutați o entitate în patru direcții diferite, adică în sus, în jos, în stânga și în dreapta, adăugând Patru direcții componentă a acesteia.
Apoi, entitatea poate fi mutată fie prin utilizarea tastelor săgeată, fie prin W, A, S și D. Puteți trece un număr ca argument la patru direcții constructor pentru a seta viteza entității. Iată ce ar trebui să arate codul entității:
Crafty.e ("2D, Canvas, Color, Fourway") .attr (x: 200, y: 100, w: 200, h: 50) .color ("portocaliu").Puteți restrânge mișcarea unei entități în doar două direcții utilizând twoWay pe opțiunea componentă. Înlocuirea Patru direcții componentă în codul de mai sus cu twoWay pe opțiunea va limita mișcarea casetei doar în direcția orizontală. Acest lucru este evident din următorul demo:
De asemenea, puteți adăuga propriile componente la diferite entități pentru a identifica sau a grupa împreună entități similare. În acest caz, adaug Podea componentă în cutia noastră portocalie. Puteți utiliza alte denumiri descriptive pentru a vă ajuta să identificați diferite entități.
Crafty.e ("2D, Canvas, Culoare, Twoway, Etaj") .attr (x: 200, y: 340, w: 200, h: 50) .color ("portocaliu").Există o altă componentă foarte utilă pe care o puteți utiliza pentru a muta elemente în jurul valorii și se numește Gravitatie componentă. Atunci când se adaugă la o entitate, aceasta va face ca entitatea să scadă. S-ar putea să doriți să opriți că entitatea dată nu va mai cădea, după ce va întâlni alte entități. Acest lucru poate fi obținut prin transmiterea unei componente de identificator ca argument al funcției gravitaționale. Iată codul care face micul pătrat negru să cadă pe podea sau platformă:
Crafty.e ("2D, Canvas, Culoare, Gravitate") .attr (x: 200, y: 50, w: 50, h: 50) .color ("negru") .gravity ("Floor");După cum vedeți în tutorial, am reușit să creăm structura de bază a unui joc simplu, folosind un cod foarte mic. Tot ce trebuia să facem era să adăugăm componente entităților noastre și să specificăm valorile diferitelor proprietăți, cum ar fi lățimea, înălțimea sau viteza de mișcare.
Acest tutorial a fost menit să vă ofere o idee de bază despre entități și alte concepte legate de Craft. În partea următoare, veți afla mai multe despre entități. Dacă aveți întrebări despre acest tutorial, anunțați-ne în comentarii.
