Share
În ultima serie Crafty, ați învățat despre modalități diferite de a muta elemente în jurul valorii de folosind tastatura. În timp ce o tastatură vă poate ajuta să creați o varietate de jocuri, unele situații necesită controlarea diferitelor evenimente ale mouse-ului pentru a face jocul mai plăcut. De exemplu, luați în considerare un joc în care baloanele apar în locuri aleatorii pe ecran. Dacă utilizatorul trebuie să facă clic pe baloane pentru a câștiga puncte, cu siguranță aveți nevoie de o componentă a mouse-ului.
În mod similar, Tastatură componenta nu va fi folositoare atunci când dezvoltați jocuri pentru dispozitive mobile. În acest caz, va trebui să vă bazați pe componenta Touch pentru a vă crea jocurile. În acest tutorial, veți afla despre componentele Mouse și Touch de la Crafty.
Șoarece componentă este utilizată pentru a adăuga evenimente de bază ale mouse-ului la entități. Iată o listă a tuturor evenimentelor incluse în această componentă:
Rețineți că evenimentele mouse-ului vor fi declanșate pe o entitate numai dacă ați adăugat Șoarece pentru ele. Iată câteva coduri care leagă MouseMove la caseta din demo de mai jos:
Accentsconagua
var Box = Crafty.e ("2D, Canvas, Color, Mouse") .attr (x: 200, y: 100, w: 200, h: 200 ") .bind ('MouseMove', funcția () this.rotation + = 1;);După ce caseta a fost legată de MouseMove eveniment, fiecare mișcare a mouse-ului peste cutie îl va roti cu 1 grad. .origine() metoda a fost utilizată pentru a seta punctul de rotație al cutiei noastre în centru. Poate lua și alte valori, cum ar fi "stânga sus", "dreapta-jos", etc.
Încercați să mutați cursorul în și din cutie în demo. Ținerea unui buton al mouse-ului în interiorul casetei va declanșa MouseDown și schimbați culoarea casetei în roșu.
A MouseEvent obiect este, de asemenea, trecut ca un parametru pentru funcția de apel invers al tuturor acestor evenimente mouse-ului. Acesta conține toate datele referitoare la acel eveniment specific mouse-ului.
De asemenea, puteți verifica pe ce buton al mouse-ului a fost făcut clic de către utilizator utilizând butonul mouseButton proprietate. De exemplu, un clic stâng poate fi detectat prin utilizarea Crafty.mouseButtons.LEFT. În mod similar, un clic pe butonul din mijloc poate fi detectat prin utilizarea Crafty.mouseButtons.MIDDLE.
MouseDrag oferă o entitate cu diferite evenimente de mouse drag-and-drop. Cu toate acestea, adăugarea acestor evenimente nu va avea sens dacă entitatea însăși nu poate fi trasă și abandonată. Puteți adăuga abilități de drag-and-drop la o entitate utilizând draggable componentă. Această componentă ascultă evenimentele din MouseDrag componentă și mută respectiva entitate în consecință. MouseDrag componentă este adăugată automat la orice entitate cu draggable component.
draggable componenta are trei metode: .enableDrag (), .disableDrag (), și .dragDirection (). Primele două metode permit și dezactivează tragerea la o entitate respectiv. A treia metodă este folosită pentru a seta direcția de tragere.
În mod implicit, entitatea se va deplasa în orice direcție se mișcă cursorul. Cu toate acestea, puteți restricționa mișcarea entității într-o direcție verticală utilizând this.dragDirection (x: 0, y: 1). În mod similar, puteți forța o entitate să se deplaseze numai în direcție orizontală utilizând thisdirectional (x: 1, y: 0).
De asemenea, puteți specifica direcția direct în grade. De exemplu, pentru a muta un element de 45 de grade, puteți pur și simplu utiliza this.dragDirection (45) in loc de această direcție de direcție (x: 1, y: 1).
În afară de tragerea și detașarea elementelor în jurul valorii de, este de asemenea necesar să știți când a pornit și a oprit tragerea. Acest lucru poate fi realizat prin utilizarea StartDrag și StopDrag evenimente. Este deasemenea o glisarea eveniment care este declanșat în timp ce o entitate este trasă.
Iată codul pentru a trage caseta roșie în demo-ul de mai jos:
var hBox = Crafty.e ("2D, Canvas, Culoare, Draggable") .attr (x: 50, y: 50, w: 50, h: 50) .color .bind ('Dragging', funcția (evt) this.color ("negru");) .bind ('StopDrag', funcția (evt) this.color ("roșu");După ce am setat lățimea, înălțimea și poziția cutiei, am folosit .dragDirection (0) pentru a restricționa mișcarea casetei noastre în direcția orizontală. Am folosit de asemenea .lega() - metoda de legare a entității la glisarea și StopDrag metodă.
Modificarea culorii în negru oferă utilizatorului indicația că entitatea este în prezent trasă. Ați putea folosi și StartDrag eveniment în loc de glisarea deoarece culoarea entității trebuie schimbată o singură dată. glisarea evenimentul este mai potrivit atunci când trebuie să modificați sau să monitorizați în mod continuu o proprietate a entității trase. De exemplu, puteți utiliza următorul cod pentru a dezactiva tragerea pe cutie după ce a ajuns la locația dorită.
hBox.bind ("Dragging", funcția (evt) this.color ("negru"); dacă (this.x> 300) this.disableDrag (););Dacă aveți nevoie să accesați evenimente legate de atingere pentru o entitate, puteți utiliza funcția Atingere componentă. Această componentă vă oferă acces la patru evenimente diferite:
Primele trei evenimente au acces la TouchEvent obiect, care conține toate informațiile despre atingere.
Unele jocuri sau proiecte ar putea necesita detectarea mai multor atingeri. Acest lucru se poate realiza prin activarea multi-touch Crafty.multitouch (true). Trecerea acestei metode Adevărat sau fals activează și dezactivează funcția multi-touch.
Înainte de a utiliza funcția Atingere componentă în proiectele dvs., trebuie să știți că este în prezent incompatibilă cu draggable component.
După ce ați terminat acest tutorial, acum ar trebui să puteți gestiona cu ușurință diferite evenimente ale mouse-ului sau să creați cu ușurință jocuri bazate pe drag-and-drop. Rețineți că am folosit Crafty versiunea 0.7.1 în acest tutorial și că demo-urile ar putea să nu funcționeze cu alte versiuni ale bibliotecii.
În tutorialul următor, veți învăța cum să utilizați foile de sprite pentru a anima diferite personaje de joc în Craft.
