前回の Crafty シリーズでは、キーボードを使用して要素を移動するさまざまな方法について学びました。キーボードはさまざまなゲームの作成に役立ちますが、状況によっては、ゲームをより面白くするためにさまざまなマウス イベントを制御する必要があります。たとえば、画面上のランダムな位置に風船が表示されるゲームを考えてみましょう。ユーザーがバルーンをクリックしてポイントを獲得する必要がある場合は、必ずマウス コンポーネントが必要です。
同様に、モバイル デバイス向けのゲームを開発する場合、Keyboard
コンポーネントは役に立ちません。この場合、ゲームを作成するにはタッチ コンポーネントに依存する必要があります。このチュートリアルでは、Crafty のマウスとタッチ コンポーネントについて学びます。
Mouse
コンポーネントは、基本的なマウス イベントをエンティティに追加するために使用されます。以下は、このコンポーネントに含まれるすべてのイベントのリストです:
マウス イベントは、エンティティに 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
组件。该组件使您可以访问四个不同的事件:
前三个事件可以访问TouchEvent
对象,该对象包含有关触摸的所有信息。
某些游戏或项目可能需要您检测多次触摸。这可以通过使用 Crafty.multitouch(true)
启用多点触控来实现。传递此方法 true
或 false
可打开和关闭多点触控。
在您的项目中使用 Touch
组件之前,您应该知道它目前与 Draggable
组件不兼容。
完成本教程后,您现在应该能够正确处理不同的鼠标事件或轻松创建基于拖放的游戏。请记住,我在本教程中使用了 Crafty 版本 0.7.1,并且演示可能无法与该库的其他版本一起使用。
在下一个教程中,您将学习如何使用精灵表在 Crafty 中为不同的游戏角色设置动画。
以上が基本を超えて賢くなる: マウスとタッチのイベントの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。