Share
I den siste Crafty-serien lærte du om forskjellige måter å flytte elementer rundt ved hjelp av tastaturet. Mens et tastatur kan hjelpe deg med å lage en rekke spill, krever enkelte situasjoner at du skal kontrollere forskjellige museventil for å gjøre spillet morsommere. For eksempel, vurder et spill hvor ballonger dukker opp på tilfeldige steder på skjermen. Hvis brukeren må klikke på ballongene for å score poeng, trenger du definitivt en muskomponent.
På samme måte, Tastatur komponent vil ikke være til nytte når du utvikler spill for mobile enheter. I dette tilfellet må du stole på Touch-komponenten for å lage spillene dine. I denne opplæringen lærer du om både Mus og Touch-komponentene i Crafty.
De Mus komponent brukes til å legge til grunnleggende mushendelser til enheter. Her er en liste over alle hendelser som inngår i denne komponenten:
Husk at mushendelser vil bli utløst på en enhet bare hvis du har lagt til Mus komponent til dem. Her er noen kode som binder mousemove hendelse til boksen i demonstrasjonen nedenfor:
Accentsconagua
Var boks = Crafty.e ("2D, Lerret, Farge, Mus") .attr (x: 200, y: 100, w: 200, h: 200) .color ("svart") .origin ") .bind ('MouseMove', funksjon () this.rotation + = 1;);Etter at boksen har blitt bundet til mousemove Event, vil hver bevegelse av musen over boksen rotere den med 1 grad. De .opprinnelse() Metoden har blitt brukt til å sette rotasjonspunktet til boksen vår til senter. Det kan også ta andre verdier som "øverst til venstre", "Nede til høyre", etc.
Prøv å flytte markøren inn og ut av boksen i demoen. Hvis du holder en museknapp nede i boksen, vil den utløse mousedown hendelse og endre fargen på boksen til rød.
EN Mouseevent objektet er også bestått som en parameter til tilbakekallingsfunksjonen til alle disse museventilene. Den inneholder alle dataene som er relatert til den spesifikke mushendelsen.
Du kan også sjekke hvilken museknapp som er klikket av brukeren ved å bruke musknapp eiendom. For eksempel kan et venstre klikk detekteres ved å bruke Crafty.mouseButtons.LEFT. På samme måte kan et mellomknappsklikk oppdages ved å bruke Crafty.mouseButtons.MIDDLE.
De MouseDrag komponenten gir en enhet med forskjellige dra-og-slipp-mus hendelser. Å legge til disse hendelsene vil imidlertid ikke gi mye mening hvis enheten ikke kan bli trukket og falt. Du kan legge til dra-og-slipp-evner til et foretak ved å bruke flyttbare komponent. Denne komponenten lytter til hendelser fra MouseDrag komponent og flytter den oppgitte enheten tilsvarende. De MouseDrag komponent blir automatisk lagt til enhver enhet med flyttbare komponent.
De flyttbare komponenten har tre metoder: .enableDrag (), .disableDrag (), og .dragDirection (). De to første metodene aktiverer og deaktiverer å dra på en enhet henholdsvis. Den tredje metoden brukes til å angi draretningen.
Som standard vil enheten bevege seg i hvilken retning markøren beveger seg. Du kan imidlertid begrense bevegelsen til enheten i vertikal retning ved å bruke this.dragDirection (x: 0, y: 1). På samme måte kan du tvinge en enhet til å bare bevege seg i en horisontal retning ved å bruke this.dragDirection (x: 1, y: 0).
Du kan også spesifisere retningen direkte i grader. For eksempel, for å flytte et element 45 grader, kan du bare bruke this.dragDirection (45) i stedet for this.dragDirection (x: 1, y: 1).
I tillegg til å dra og slippe elementer rundt, er det også nødvendig å vite når draget startet og stoppet. Dette kan oppnås ved å bruke startdrag og stopdrag arrangementer. Det er også en dra Hendelse som utløses mens et foretak blir trukket.
Her er koden for å dra den røde boksen i demoen under:
var hBox = Crafty.e ("2D, Lerret, Farge, Draggbar") .attr (x: 50, y: 50, w: 50, h: 50) .color ("rød") .dragDireksjon .bind ('Drag', funksjon (evt) this.color ("black");) .bind ('StopDrag', funksjon (evt) this.color ("red"););Etter at jeg har satt inn bredde, høyde og posisjon på boksen, har jeg brukt .dragDirection (0) å begrense bevegelsen av boksen vår i horisontal retning. Jeg har også brukt .binde() metode for å binde enheten til dra og stopdrag metode.
Ved å endre fargen til svart gir brukeren en indikasjon på at enheten er i ferd med å bli dratt. Du kan også bruke startdrag arrangement i stedet for dra fordi faren på enheten bare trenger å endres en gang. De dra Hendelsen er mer hensiktsmessig når du må kontinuerlig endre eller overvåke en eiendom av enheten som blir dratt. For eksempel kan du bruke følgende kode for å deaktivere slepingen i boksen når den har nådd ønsket sted.
hBox.bind ('Dra', funksjon (evt) this.color ("black"); hvis (this.x> 300) this.disableDrag (););Hvis du trenger tilgang til berøringsrelaterte hendelser for et foretak, kan du bruke Ta på komponent. Denne komponenten gir deg tilgang til fire forskjellige hendelser:
De tre første hendelsene har tilgang til TouchEvent objekt, som inneholder all informasjon om berøring.
Noen spill eller prosjekter kan kreve at du oppdager flere berøringer. Dette kan oppnås ved å muliggjøre multi-touch bruk Crafty.multitouch (sann). Passerer denne metoden ekte eller falsk slår på og av multi-touch.
Før du bruker Ta på komponent i prosjektene dine, bør du vite at det for øyeblikket er uforenlig med flyttbare komponent.
Etter å ha fullført denne opplæringen, bør du nå kunne håndtere forskjellige museventiler, eller enkelt lage dra og slipp-baserte spill. Husk at jeg har brukt Crafty versjon 0.7.1 i denne opplæringen, og demoene fungerer kanskje ikke med andre versjoner av biblioteket.
I neste veiledning lærer du hvordan du bruker sprite-ark til å animere forskjellige spilltegn i Crafty.
