기본을 뛰어넘는 영리함: 마우스 및 터치 이벤트

지난 Crafty 시리즈에서는 키보드를 사용하여 요소를 이동하는 다양한 방법을 배웠습니다. 키보드는 다양한 게임을 만드는 데 도움이 될 수 있지만, 게임을 더욱 흥미롭게 만들기 위해 다양한 마우스 이벤트를 제어해야 하는 경우도 있습니다. 예를 들어 화면의 임의 위치에 풍선이 나타나는 게임을 생각해 보세요. 사용자가 점수를 얻기 위해 풍선을 클릭해야 한다면 반드시 마우스 구성 요소가 필요합니다.

마찬가지로 모바일 기기용 게임을 개발할 때 Keyboard구성 요소는 아무 소용이 없습니다. 이 경우 터치 구성 요소를 사용하여 게임을 만들어야 합니다. 이 튜토리얼에서는 Crafty의 마우스 및 터치 구성 요소에 대해 알아봅니다.

마우스 구성요소

Mouse 구성 요소는 엔터티에 기본 마우스 이벤트를 추가하는 데 사용됩니다. 다음은 이 구성 요소에 포함된 모든 이벤트 목록입니다.

• MouseOver: 이 이벤트는 마우스가 엔터티에 들어갈 때 트리거됩니다.
• MouseOut: 이 이벤트는 마우스가 엔터티를 떠날 때 트리거됩니다.

• MouseDown: 이 이벤트는 엔터티에서 마우스 버튼을 누르면 시작됩니다.

• MouseUp: 이 이벤트는 엔터티 내에서 마우스 버튼을 놓으면 트리거됩니다.

• Click: 이 이벤트는 엔터티 내에서 마우스 버튼을 클릭할 때 트리거됩니다.

• DoubleClick: 이 이벤트는 마우스 버튼이 엔터티를 두 번 클릭할 때 트리거됩니다.

• MouseMove: 이 이벤트는 엔터티 내에서 마우스가 움직일 때 트리거됩니다.

마우스 이벤트는 Mouse 组件时，鼠标事件才会在实体上触发。以下是将 MouseMove 구성 요소를 엔터티에 추가한 경우에만 엔터티에서 실행된다는 점을 기억하세요. 다음은 MouseMove 이벤트를 아래 데모의 상자에 바인딩하는 코드입니다.

으아아아

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

데모의 상자 안팎으로 커서를 움직여보세요. 상자 안에서 마우스 버튼을 누르고 있으면 MouseDown 이벤트가 발생하고 상자 색상이 빨간색으로 변경됩니다.

MouseEvent 개체도 이러한 모든 마우스 이벤트의 콜백 함수에 매개 변수로 전달됩니다. 여기에는 특정 마우스 이벤트와 관련된 모든 데이터가 포함됩니다.

mouseButton 属性检查用户单击了哪个鼠标按钮。例如，可以使用 Crafty.mouseButtons.LEFT 检测左键单击。同样，可以使用 Crafty.mouseButtons.MIDDLE를 사용하여 중간 클릭을 감지할 수도 있습니다.

마우스 드래그 구성요소

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

Draggable 组件具有三个方法：.enableDrag()、.disableDrag() 和 .dragDirection().처음 두 가지 방법은 각각 엔터티 드래그를 활성화하고 비활성화합니다. 세 번째 방법은 드래그 방향을 설정하는 데 사용됩니다.

기본적으로 엔터티는 커서가 움직이는 방향으로 움직입니다. 그러나 this.dragDirection({x:0, y:1}) 将实体的运动限制为垂直方向。同样，您可以使用 this.dragDirection({x:1, y:0})를 사용하면 엔터티가 수평 방향으로만 이동하도록 강제할 수 있습니다.

방향을 각도 단위로 직접 지정할 수도 있습니다. 예를 들어 요소를 45도 이동하려면 this.dragDirection(45) 而不是 this.dragDirection({x:1, y:1} )만 사용하면 됩니다.

요소를 드래그 앤 드롭하는 것 외에도 드래그가 시작되고 중지되는 시기도 알아야 합니다. 이는 엔터티를 드래그할 때 트리거되는 StartDrag 和 StopDrag 事件来完成。还有一个 Dragging 이벤트를 사용하여 수행할 수 있습니다.

아래 데모에서 빨간색 상자를 드래그하는 코드는 다음과 같습니다.

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

위 내용은 기본을 뛰어넘는 영리함: 마우스 및 터치 이벤트의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!