Phaser 2 - 如何检测我何时拖动另一个精灵？答案

【问题标题】：Phaser 2 - how to detect when I am dragging over another sprite?Phaser 2 - 如何检测我何时拖动另一个精灵？
【发布时间】：2017-09-26 10:31:21
【问题描述】：

我正在构建一个 Phaser 应用程序，在该应用程序中，我能够将一个精灵拖到另一个精灵的顶部并将其放到它下面的精灵上，在这个阶段我的代码将创建与放置的精灵和它的精灵的关系被丢弃了。我没有为此使用任何物理学。这应该为问题添加一些上下文，但“drop”不是我想要回答的问题。

在拖动精灵时，我想更改拖动精灵的比例，以向用户显示它被检测为悬停在它可以落入的东西上。

我可以遍历屏幕上的精灵并检查被拖动精灵的坐标是否撞到了另一个精灵，但是将其放入 dragUpdate 函数会非常低效。

我正在寻找一种替代方法，我可以从精灵的 x/y 拖动位置从被拖动的精灵向下投射，看看它是否击中另一个精灵。文档中的任何想法在这方面有点薄？

【问题讨论】：

您不是在寻找类似phaser.io/examples/v2/sprites/overlap-without-physics 的东西吗？
类似，这是我想在拖动停止时调用的函数，但我有未知数量的精灵来运行此检查，在更新或拖动更新时循环遍历确实让粉丝兴奋不已。在某一点向场景中发射光线将不需要循环，但我不确定这在 Phaser 中是否可行
JSFiddle 帮助演示场景：jsfiddle.net/trevburley/3ymgadvo/9

标签： javascript typescript drag-and-drop phaser-framework

【解决方案1】：

我已经用一些工作示例更新了您的小提琴，包括当精灵被拖动到其中一个目标上时缩小比例。

我循环每个目标并检测可拖动精灵是否在目标内。

function onDragUpdate(sprite, pointer, dragX, dragY, snapPoint) {   
        var draggableBounds = sprite.getBounds();
        for (var i = 0; i < targets.length; i ++)  
      {
        var target = targets[i];
        var targetBounds = target.getBounds();
         var rect = new Phaser.Rectangle(draggableBounds.x, draggableBounds.y, draggableBounds.width, draggableBounds.height);
        if (Phaser.Rectangle.intersects(draggableBounds, targetBounds))     
        { 
          sprite.scale.setTo(0.2);
          if (!targetBounds.containsRect(sprite.getBounds())) {
                sprite.scale.setTo(0.5);
          }
          else {
            game.debug.text(sprite.draggable_custom_id + ' is over ' +  target.target_custom_id, 20, 20 );
        }    
    }

检查小提琴：https://jsfiddle.net/22zpsbna/2/

【讨论】：