phaser-framework - Phaser 3 增加 Sprite 拖动点击区域的大小

Question

我们有一个 Sprite ，我们将其设置为交互式

this.testSprite = this.add.sprite(100, 100, 'button')
    .setInteractive();

现在我们通过添加使该对象可拖​​动

this.input.dragDistanceThreshold = 20;
this.input.setDraggable(this.testSprite);

this.input.on('drag', function (pointer, obj, dragX, dragY) {
   obj.x = dragX;
   obj.y = dragY;
});

现在，如果我们想增加可拖动区域的大小(能够进一步单击以仍然拖动对象)，我尝试为 .setInteractive() 函数提供附加参数新边界 new Phaser.Geom.Rectangle(0, 0, 1000, 1000) 例如:

this.testSprite = this.add.sprite(100, 100, 'button')
    .setInteractive(new Phaser.Geom.Rectangle(0, 0, 1000, 1000));

它似乎不影响这个可拖动属性。这是正确的方法吗？还是有一个我找不到的单独的拖动大小属性？

Answer 1

您可以使用 Sprite 的setInteractive方法来定义一个有效的hitArea，它比“按钮”大，如下所示要求。 (here a link to the docs)。

只需定义一个hitArea和一个hitAreaCallback，它就应该可以工作。
(我使用 Phaser 内置函数来测试它，该点位于 hitArea， here the docs )

这是一个工作演示:

// Minor formating for stackoverflow
document.body.style = "display: flex;flex-direction: column;";    

var config = {
    type: Phaser.AUTO,
    width: 536,
    height: 183,
    scene: {
        create
    }
}; 

function create () {
    // Padding for the drag Area, just for the demo
    let padding = 50;
    let button = this.add.sprite(50, 50, 'button').setOrigin(0);
    
    button.setInteractive({
        draggable: true,
        // SETUP hitarea
        hitArea: new Phaser.Geom.Rectangle(
            - padding,
            - padding,
            button.width + padding * 2,
            button.height + padding * 2 ),
        //Check hitarea
        hitAreaCallback: function(hitArea, x, y){
            return Phaser.Geom.Rectangle.Contains(hitArea, x, y);
        }
    });

    // The following line, is not needed since this option is set in "setInteractive"
    // this.input.setDraggable(button);
    this.input.on('drag', function (pointer, obj, dragX, dragY) {
       obj.x = dragX;
       obj.y = dragY;
    });
}

var game = new Phaser.Game(config);

<script src="//cdn.jsdelivr.net/npm/<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="394951584a5c4b790a170c0c170b" rel="noreferrer noopener nofollow">[email protected]</a>/dist/phaser.min.js">
</script>

信息:此演示不加载真实图像，但占位符是可拖动的(带有填充)，如nedede。

The hitArea is relative to the top left corner of the image, thats why the first two parameters, are negative.