基本を超えて賢くなる: マウスとタッチのイベント

前回の Crafty シリーズでは、キーボードを使用して要素を移動するさまざまな方法について学びました。キーボードはさまざまなゲームの作成に役立ちますが、状況によっては、ゲームをより面白くするためにさまざまなマウス イベントを制御する必要があります。たとえば、画面上のランダムな位置に風船が表示されるゲームを考えてみましょう。ユーザーがバルーンをクリックしてポイントを獲得する必要がある場合は、必ずマウス コンポーネントが必要です。

同様に、モバイル デバイス向けのゲームを開発する場合、Keyboard コンポーネントは役に立ちません。この場合、ゲームを作成するにはタッチ コンポーネントに依存する必要があります。このチュートリアルでは、Crafty のマウスとタッチ コンポーネントについて学びます。

マウスコンポーネント

Mouse コンポーネントは、基本的なマウス イベントをエンティティに追加するために使用されます。以下は、このコンポーネントに含まれるすべてのイベントのリストです:

• MouseOver: このイベントは、マウスがエンティティに入るとトリガーされます。
• MouseOut: このイベントは、マウスがエンティティから離れるとトリガーされます。

• MouseDown: このイベントは、エンティティ上でマウス ボタンが押されたときにトリガーされます。

• MouseUp: このイベントは、エンティティ内でマウス ボタンが放されたときにトリガーされます。

• Click: このイベントは、エンティティ内でマウス ボタンがクリックされるとトリガーされます。

• DoubleClick: このイベントは、マウス ボタンでエンティティをダブルクリックするとトリガーされます。

• MouseMove: このイベントは、マウスがエンティティ内で移動するとトリガーされます。

マウス イベントは、エンティティに Mouse コンポーネントを追加した場合にのみエンティティ上で発生することに注意してください。以下のデモのボックスに MouseMove イベントをバインドするコードを示します:

リーリー

ボックスが MouseMove イベントにバインドされた後、マウスがボックス上で移動するたびに、ボックスは 1 度回転します。 .origin() このメソッドは、ボックスの回転ポイントを中心に設定するために使用されます。 "左上隅"、"右下隅" など、他の値を取ることもできます。

デモでカーソルをボックスの内外に移動してみてください。ボックス内でマウス ボタンを押し続けると、MouseDown イベントがトリガーされ、ボックスの色が赤に変わります。

MouseEvent オブジェクトは、これらすべてのマウス イベントのコールバック関数にパラメーターとしても渡されます。これには、特定のマウス イベントに関連するすべてのデータが含まれます。

mouseButton プロパティを使用して、ユーザーがどのマウス ボタンをクリックしたかを確認することもできます。たとえば、Crafty.mouseButtons.LEFT を使用して左クリックを検出できます。同様に、中クリックも Crafty.mouseButtons.MIDDLE を使用して検出できます。

マウスドラッグコンポーネント

MouseDragこのコンポーネントは、エンティティにさまざまなドラッグ アンド ドロップ マウス イベントを提供します。ただし、エンティティ自体をドラッグ アンド ドロップできない場合、これらのイベントを追加する意味はあまりありません。 Draggable コンポーネントを使用して、エンティティにドラッグ アンド ドロップ機能を追加できます。このコンポーネントは、MouseDrag コンポーネントからのイベントをリッスンし、それに応じて指定されたエンティティを移動します。 MouseDrag コンポーネントは、Draggable コンポーネントを持つエンティティに自動的に追加されます。

Draggable コンポーネントには、.enableDrag()、.disableDrag()、および .dragDirection().before の 3 つのメソッドがあります。 2 つのメソッドは、それぞれエンティティのドラッグを有効または無効にします。 3 番目の方法は、ドラッグ方向を設定するために使用されます。

デフォルトでは、エンティティはカーソルが移動する方向に移動します。ただし、this.dragDirection({x:0, y:1}) を使用して、エンティティの動きを垂直方向に制限することができます。同様に、this.dragDirection({x:1, y:0}) を使用して、エンティティを強制的に水平方向のみに移動させることができます。

方向を度単位で直接指定することもできます。たとえば、要素を 45 度移動するには、this.dragDirection({x:1, y:1} ) の代わりに this.dragDirection(45) を使用します。

要素のドラッグ アンド ドロップに加えて、ドラッグの開始と停止も把握する必要があります。これは、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 中国語 Web サイトの他の関連記事を参照してください。