如何检测在拖动另一个精灵时指针何时位于一个角色上？

Question

在我的update（）函数中，我使用pointerOver（）来检测指针何时在精灵上。 这通常工作正常。 但是，如果我当时碰巧拖着另一个精灵，指针Over（） 函数总是返回 false。

我想我会通过获取指针的位置并将其与我的精灵的位置和边界进行比较来解决这个问题，但指针位置始终是 （-1， -1）。

下面是一些示例代码来演示该问题：

    var game = new Phaser.Game( 800, 600, Phaser.AUTO, '', { preload: preload, create: create, update: update, render: render });
    var triangle;
    var square;
    var isOver;
    var pointerX;
    var pointerY;
    function preload()
    {
        game.load.image( 'triangle', 'assets/triangle.png' );
        game.load.image( 'square', 'assets/square.png' );
    }
    function create()
    {
        triangle = game.add.sprite( 100, 100, "triangle" );
        triangle.inputEnabled = true;
        triangle.input.enableDrag( false, true );
        square = game.add.sprite( 100, 200, "square" );
        square.inputEnabled = true;
    }
    function update()
    {
        isOver = square.input.pointerOver() ? "Yes" : "No";
    }
    function render()
    {
        game.debug.text( "Mouse over square: " + isOver, 200, 100 );
        game.debug.text( "Pointer: (" + game.input.pointer1.x + ", " + game.input.pointer1.y + ")", 200, 116 );
    }

我发现了这篇关于使用精灵的input.priorityID：Phaser JS如何停止事件传播（触发）从textButton.events.onInputDown事件到game.input.onDown事件？

使用 priorityID 修复了当三角形位于正方形顶部且三角形未被拖动时的问题，但在拖动时问题仍然存在。

如何检测指针何时位于精灵上，即使我正在拖动另一个精灵？

谢谢。

Answer 1

我最近遇到了类似的问题，希望这仍然对您有所帮助。

我发现在启动拖动时，除了您正在拖动的精灵之外，所有精灵的输入都会被禁用。这可能发生在内部，我找不到覆盖它的方法。

我

所做的是：我想要可拖动的所有对象（在我的 Tile 实例中）都保存在 Board 对象中，该对象反过来包含对我的游戏状态的引用。在游戏状态下，我有一个标志dragIsActive.在对象类本身中，我有（打字稿）

    this.tileSprite.events.onDragStart.add(() => {
        this.parentBoard.gameState.dragIsActive = true;
    });
    this.tileSprite.events.onDragStop.add(() => {
        this.parentBoard.gameState.dragIsActive = false;
    });

等效的 JavaScript 将是

    this.tileSprite.events.onDragStart.add(function() {
        this.parentBoard.gameState.dragIsActive = true;
    });
    this.tileSprite.events.onDragStop.add(function() {
        this.parentBoard.gameState.dragIsActive = false;
    });

从对象的构造函数调用。

在游戏中，我有以下内容：

update() {
    if (this.dragIsActive) {        
        var firstTile : Tile = this.game.input.activePointer.targetObject.sprite.parent;
        this.board.tiles.forEach((t : Tile) => {
            if (firstTile.tileSprite.overlap(t.tileSprite)) {
                this.board.tilesToSlide.push(t);
            }
        });
        this.board.tilesToSlide.forEach((tileToSlide) => {
            // Do the processing on that array here.
        });
    }
}

JavaScript（只是forEach循环）：

this.board.tiles.forEach(fucntion(t) {
    if (firstTile.tileSprite.overlap(t.tileSprite)) {
        this.board.tilesToSlide.push(t);
    }
});

在我的例子中，检查是两个精灵重叠的，但在你的情况下，你可以检查一个兴趣点（例如，你正在拖动的精灵的位置）是否在另一个精灵的边界内：

if (secondSprite.getBounds().containsPoint(firstSprite.position)) {
    // This should be equivalent to pointerOver() while dragging something.
}

附言我希望您知道精灵的位置位于其边界框的左上角，除非明确设置为其他内容。通过sprite.anchor.set(x, y)设置-（0,0）为左上角（默认值），（1,1）为右下角。

Answer 2

您还可以

使用此方法查看该点是否包含在精灵边界内。

if( Phaser.Rectangle.contains( sprite.body, this.game.input.x, this.game.input.y) ){
    console.log('collide')
}