Share
In de laatste Crafty-serie heb je geleerd over verschillende manieren om elementen rond het toetsenbord te verplaatsen. Hoewel een toetsenbord u kan helpen verschillende games te maken, moet u in bepaalde situaties verschillende muisgebeurtenissen bedienen om het spel aangenamer te maken. Overweeg bijvoorbeeld een spel waarbij ballonnen op willekeurige plaatsen op het scherm verschijnen. Als de gebruiker op de ballonnen moet klikken om punten te scoren, heeft u zeker een muiscomponent nodig.
Evenzo is de Toetsenbord component zal niet van enig nut zijn bij het ontwikkelen van spellen voor mobiele apparaten. In dit geval moet u op het Touch-onderdeel vertrouwen om uw games te maken. In deze tutorial leert u over zowel de componenten Mouse en Touch in Crafty.
De Muis component wordt gebruikt om basismuisgebeurtenissen aan entiteiten toe te voegen. Hier is een lijst met alle evenementen die in dit onderdeel zijn opgenomen:
Onthoud dat muisgebeurtenissen alleen op een entiteit worden geactiveerd als u het Muis component voor hen. Hier is een code die de bindt MouseMove evenement naar de doos in de demo hieronder:
Accentsconagua
var Box = Crafty.e ("2D, Canvas, Color, Mouse") .attr (x: 200, y: 100, w: 200, h: 200) .color ("black") .origin ("centre "). bind ('MouseMove', function () this.rotation + = 1;);Nadat het vak is gebonden aan de MouseMove gebeurtenis, elke beweging van de muis over de doos zal deze 1 graad verdraaien. De .oorsprong() methode is gebruikt om het rotatiepunt van onze box in te stellen. Het kan ook andere waarden aannemen zoals "linksboven", "rechts onder", enz.
Probeer de cursor in en uit de doos in de demo te verplaatsen. Als u een muisknop ingedrukt houdt in de doos, wordt de MouseDown gebeurtenis en verander de kleur van het vak in rood.
EEN MouseEvent object wordt ook als parameter doorgegeven aan de callback-functie van al deze muisgebeurtenissen. Het bevat alle gegevens met betrekking tot die specifieke muisgebeurtenis.
U kunt ook controleren met welke muisknop door de gebruiker is geklikt met behulp van de muisknop eigendom. Een linkerklik kan bijvoorbeeld worden gedetecteerd door te gebruiken Crafty.mouseButtons.LEFT. Evenzo kan een middelste knopklik worden gedetecteerd door te gebruiken Crafty.mouseButtons.MIDDLE.
De MouseDrag component verschaft een entiteit met verschillende slepen-en-neerzettende muisgebeurtenissen. Het toevoegen van deze gebeurtenissen heeft echter weinig zin als de entiteit zelf niet kan worden gesleept en weggehaald. U kunt mogelijkheden voor slepen en neerzetten toevoegen aan een entiteit met behulp van de Sleepbaar component. Dit onderdeel luistert naar gebeurtenissen uit de MouseDrag component en verplaatst de gegeven entiteit dienovereenkomstig. De MouseDrag component wordt automatisch toegevoegd aan elke entiteit met de Sleepbaar bestanddeel.
De Sleepbaar component heeft drie methoden: .enableDrag (), .disableDrag (), en .dragDirection (). De eerste twee methoden activeren en deactiveren het verslepen van een entiteit respectievelijk. De derde methode wordt gebruikt om de richting van de sleep in te stellen.
Standaard verplaatst de entiteit zich in de richting waarin de cursor zich verplaatst. U kunt echter de beweging van de entiteit in een verticale richting beperken door te gebruiken this.dragDirection (x: 0, y: 1). Op dezelfde manier kun je een entiteit dwingen om alleen in een horizontale richting te bewegen door te gebruiken this.dragDirection (x: 1, y: 0).
U kunt de richting ook direct in graden opgeven. Als u bijvoorbeeld een element 45 graden wilt verplaatsen, kunt u het eenvoudig gebruiken this.dragDirection (45) in plaats van this.dragDirection (x: 1, y: 1).
Naast het slepen en neerzetten van elementen, is het ook nodig om te weten wanneer het slepen is gestart en gestopt. Dit kan worden bereikt door het gebruik van startDrag en stopDrag evenementen. Er is ook een slepen gebeurtenis die wordt getriggerd terwijl een entiteit wordt gesleept.
Hier is de code om het rode vak in de onderstaande demo te slepen:
var hBox = Crafty.e ("2D, Canvas, Color, Draggable") .attr (x: 50, y: 50, w: 50, h: 50) .color ("red") .dragDirection (0) .bind ('Dragging', functie (evt) this.color ("black");). bind ('StopDrag', function (evt) this.color ("red"););Na het instellen van de breedte, hoogte en positie van de doos, heb ik gebruikt .dragDirection (0) om de beweging van onze box in horizontale richting te beperken. Ik heb ook de .binden() methode om de entiteit te binden aan de slepen en stopDrag methode.
Als u de kleur zwart maakt, krijgt de gebruiker een indicatie dat de entiteit momenteel wordt gesleept. Je zou ook de startDrag evenement in plaats van slepen omdat de kleur van de entiteit slechts eenmaal hoeft te worden gewijzigd. De slepen evenement is meer geschikt als u een eigenschap van de gesleepte entiteit voortdurend moet wijzigen of controleren. U kunt bijvoorbeeld de volgende code gebruiken om het slepen in het vak uit te schakelen als het eenmaal de gewenste locatie heeft bereikt.
hBox.bind ('Slepen', functie (evt) this.color ("black"); if (this.x> 300) this.disableDrag (););Als u toegangsgerelateerde gebeurtenissen voor een entiteit nodig hebt, kunt u de aanraken component. Dit onderdeel geeft u toegang tot vier verschillende evenementen:
De eerste drie evenementen hebben toegang tot de TouchEvent object, dat alle informatie over de aanrakingen bevat.
Voor sommige games of projecten moet u mogelijk meerdere aanrakingen detecteren. Dit kan worden bereikt door multi-touch te gebruiken Crafty.multitouch (true). Deze methode passeren waar of vals zet de multi-touch aan en uit.
Voordat u de aanraken component in uw projecten, moet u weten dat het momenteel niet compatibel is met de Sleepbaar bestanddeel.
Na het voltooien van deze tutorial, zou je nu in staat moeten zijn om verschillende muisgebeurtenissen goed af te handelen of gemakkelijk drag-and-drop-gebaseerde spellen te maken. Houd er rekening mee dat ik Crafty-versie 0.7.1 in deze zelfstudie heb gebruikt en dat de demo's mogelijk niet werken met andere versies van de bibliotheek.
In de volgende tutorial leer je hoe je Sprite-sheets kunt gebruiken om verschillende gametekens in Crafty te animeren.
