Getting clever beyond the basics: Mouse and touch events

In the last Crafty series, you learned about different ways to move elements using your keyboard. While the keyboard can help you create a variety of games, some situations require you to control different mouse events to make the game more interesting. For example, consider a game in which balloons appear at random locations on the screen. If the user needs to click on the balloon to score points, then you definitely need a mouse component.

Similarly, when you develop a game for mobile devices, the Keyboard component will be of no use. In this case, you will have to rely on touch components to create your game. In this tutorial, you'll learn about mouse and touch components in Crafty.

Mouse component

Mouse Component is used to add basic mouse events to entities. The following is a list of all events contained in this component:

• MouseOver: This event is triggered when the mouse enters the entity.
• MouseOut: This event is triggered when the mouse leaves the entity.

• MouseDown: This event is triggered when the mouse button is pressed on the entity.

• MouseUp: This event is triggered when the mouse button is released within the entity.

• Click: This event is triggered when the mouse button is clicked within the entity.

• DoubleClick: This event is triggered when the mouse button double-clicks an entity.

• MouseMove: This event is triggered when the mouse moves within the entity.

Remember that mouse events will only fire on an entity if you have added a Mouse component to the entity. Here is the code to bind the MouseMove event to the box in the demo below:

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;
  });

After the box is bound to the MouseMove event, every time the mouse moves on the box, the box will rotate 1 degree. .origin() The method is used to set the rotation point of the box to the center. It can also take other values, such as "upper left corner", "lower right corner", etc.

Try moving the cursor in and out of the box in the demo. Holding down the mouse button inside the box will trigger the MouseDown event and change the color of the box to red.

MouseEvent The object is also passed as a parameter to the callback functions of all these mouse events. It contains all the data related to that specific mouse event.

You can also use the mouseButton property to check which mouse button the user clicked. For example, you can use Crafty.mouseButtons.LEFT to detect left clicks. Likewise, middle clicks can be detected using Crafty.mouseButtons.MIDDLE.

Mouse drag component

MouseDragThe component provides entities with different drag and drop mouse events. However, there isn't much point in adding these events if the entity itself can't be dragged and dropped. You can add drag-and-drop functionality to entities using the Draggable component. This component listens for events from the MouseDrag component and moves the given entity accordingly. The MouseDrag component is automatically added to any entity that has a Draggable component.

The

Draggable component has three methods: .enableDrag(), .disableDrag() and .dragDirection().before Two methods enable and disable dragging on entities respectively. The third method is used to set the drag direction.

By default, entities will move in whatever direction the cursor moves. However, you can constrain the entity's movement to the vertical direction using this.dragDirection({x:0, y:1}). Likewise, you can use this.dragDirection({x:1, y:0}) to force the entity to move only in the horizontal direction.

You can also specify the direction directly in degrees. For example, to move an element 45 degrees, you would simply use this.dragDirection(45) instead of this.dragDirection({x:1, y:1} ).

In addition to dragging and dropping elements, you also need to know when dragging starts and stops. This can be accomplished using the StartDrag and StopDrag events. There is also a Dragging event, which is triggered when an entity is dragged.

Here is the code for dragging the red box in the demo below:

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 中为不同的游戏角色设置动画。

The above is the detailed content of Getting clever beyond the basics: Mouse and touch events. For more information, please follow other related articles on the PHP Chinese website!