Über das Wesentliche hinaus clever werden: Maus- und Touch-Events

In der letzten Crafty-Serie haben Sie verschiedene Möglichkeiten kennengelernt, Elemente mithilfe Ihrer Tastatur zu verschieben. Während Sie mit der Tastatur eine Vielzahl von Spielen erstellen können, müssen Sie in manchen Situationen verschiedene Mausereignisse steuern, um das Spiel interessanter zu gestalten. Stellen Sie sich zum Beispiel ein Spiel vor, bei dem Luftballons an zufälligen Stellen auf dem Bildschirm erscheinen. Wenn der Benutzer auf Ballons klicken muss, um Punkte zu erzielen, dann benötigt er unbedingt eine Mauskomponente.

Ebenso sind KeyboardKomponenten nutzlos, wenn Sie ein Spiel für mobile Geräte entwickeln. In diesem Fall müssen Sie sich bei der Erstellung Ihres Spiels auf Touch-Komponenten verlassen. In diesem Tutorial erfahren Sie mehr über Maus- und Touch-Komponenten in Crafty.

Mauskomponente

Mouse Komponente wird verwendet, um grundlegende Mausereignisse zu Entitäten hinzuzufügen. Hier ist eine Liste aller in dieser Komponente enthaltenen Ereignisse:

• MouseOver: Dieses Ereignis wird ausgelöst, wenn die Maus in das Objekt eindringt.
• MouseOut: Dieses Ereignis wird ausgelöst, wenn die Maus die Entität verlässt.

• MouseDown: Dieses Ereignis wird ausgelöst, wenn die Maustaste auf der Entität gedrückt wird.

• MouseUp: Dieses Ereignis wird ausgelöst, wenn die Maustaste innerhalb der Entität losgelassen wird.

• Klick: Dieses Ereignis wird ausgelöst, wenn mit der Maustaste innerhalb der Entität geklickt wird.

• DoubleClick: Dieses Ereignis wird ausgelöst, wenn die Maustaste auf ein Objekt doppelklickt.

• MouseMove: Dieses Ereignis wird ausgelöst, wenn sich die Maus innerhalb der Entität bewegt.

Denken Sie daran, dass Mausereignisse nur dann auf Entitäten ausgelöst werden, wenn Sie ihnen die Mouse 组件时，鼠标事件才会在实体上触发。以下是将 MouseMove-Komponente hinzugefügt haben. Hier ist der Code zum Binden des MouseMove-Ereignisses an das Feld in der Demo unten:

var Box = Crafty.e("2D, Canvas, Color, Mouse")
  .attr({
    x: 200,
    y: 100,
    w: 200,
    h: 200
  })
  .color("black")
  .origin("center")
  .bind('MouseMove', function() {
    this.rotation += 1;
  });

Der Karton ist gebunden MouseMove 事件后，鼠标在盒子上每移动一次，盒子就会旋转 1 度。 .origin() 方法用于将盒子的旋转点设置为中心。它还可以采用其他值，例如 "左上角"、"右下角" usw.

Versuchen Sie, Ihren Cursor in die Felder in der Demo hinein und aus ihnen heraus zu bewegen. Wenn Sie die Maustaste im Feld gedrückt halten, wird das Ereignis MouseDown ausgelöst und die Farbe des Feldes wird rot.

Sie können mouseButton 属性检查用户单击了哪个鼠标按钮。例如，可以使用 Crafty.mouseButtons.LEFT 检测左键单击。同样，可以使用 Crafty.mouseButtons.MIDDLE auch verwenden, um mittlere Klicks zu erkennen.

MouseDrag组件提供了具有不同拖放鼠标事件的实体。但是，如果实体本身无法拖放，那么添加这些事件就没有多大意义。您可以使用 Draggable 组件向实体添加拖放功能。该组件侦听来自 MouseDrag 组件的事件并相应地移动给定的实体。 MouseDrag 组件会自动添加到具有 Draggable Jede Entität der Komponente.

Draggable 组件具有三个方法：.enableDrag()、.disableDrag() 和 .dragDirection().Die ersten beiden Methoden aktivieren bzw. deaktivieren das Ziehen von Elementen. Mit der dritten Methode wird die Ziehrichtung festgelegt.

Standardmäßig bewegen sich Elemente in jede Richtung, in die sich der Cursor bewegt. Sie können jedoch this.dragDirection({x:0, y:1}) 将实体的运动限制为垂直方向。同样，您可以使用 this.dragDirection({x:1, y:0}) verwenden, um zu erzwingen, dass sich die Entität nur in horizontaler Richtung bewegt.

Sie können die Richtung auch direkt in Grad angeben. Um beispielsweise ein Element um 45 Grad zu verschieben, verwenden Sie einfach this.dragDirection(45) 而不是 this.dragDirection({x:1, y:1} ).

Zusätzlich zum Ziehen und Ablegen von Elementen müssen Sie auch wissen, wann das Ziehen beginnt und endet. Dies kann mithilfe des StartDrag 和 StopDrag 事件来完成。还有一个 Dragging-Ereignisses erfolgen, das beim Ziehen einer Entität ausgelöst wird.

Hier ist der Code zum Ziehen des roten Kästchens in der Demo unten:

var hBox = Crafty.e("2D, Canvas, Color, Draggable")
  .attr({
    x: 50,
    y: 50,
    w: 50,
    h: 50
  })
  .color("red")
  .dragDirection(0)
  .bind('Dragging', function(evt) {
    this.color("black");
  })
  .bind('StopDrag', function(evt) {
    this.color("red");
  });

设置框的宽度、高度和位置后，我使用 .dragDirection(0) 来限制框在水平方向的移动。我还使用 .bind() 方法将实体绑定到 Dragging 和 StopDrag 方法。

将颜色更改为黑色可以向用户表明实体当前正在被拖动。您还可以使用 StartDrag 事件代替 Dragging 因为实体的颜色只需要更改一次。当您必须连续更改或监视被拖动实体的属性时，Dragging 事件更合适。例如，您可以使用以下代码在框到达所需位置后禁用对其的拖动。

hBox.bind('Dragging', function(evt) {
    this.color("black");
    if(this.x > 300) {
      this.disableDrag();
    }
});

如果需要访问实体的触摸相关事件，可以使用 Touch 组件。该组件使您可以访问四个不同的事件：

• TouchStart：当实体被触摸时触发此事件。
• TouchMove：当手指在实体上移动时会触发此事件。
• TouchCancel：当某些事件中断触摸事件时会触发此事件。
• TouchEnd：当手指在实体上抬起或离开该实体时，会触发此事件。

前三个事件可以访问TouchEvent对象，该对象包含有关触摸的所有信息。

某些游戏或项目可能需要您检测多次触摸。这可以通过使用 Crafty.multitouch(true) 启用多点触控来实现。传递此方法 true 或 false 可打开和关闭多点触控。

在您的项目中使用 Touch 组件之前，您应该知道它目前与 Draggable 组件不兼容。

结论

完成本教程后，您现在应该能够正确处理不同的鼠标事件或轻松创建基于拖放的游戏。请记住，我在本教程中使用了 Crafty 版本 0.7.1，并且演示可能无法与该库的其他版本一起使用。

在下一个教程中，您将学习如何使用精灵表在 Crafty 中为不同的游戏角色设置动画。

Das obige ist der detaillierte Inhalt vonÜber das Wesentliche hinaus clever werden: Maus- und Touch-Events. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!