Phaser 3 增加精灵的拖动点击区域大小

Question

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

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，它比 "button"，根据要求。 (here a link to the docs).

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

这是一个工作演示：

// Minor formating for Whosebug
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/phaser@3.55.2/dist/phaser.min.js">
</script>

信息：这个Demo没有加载真实图片，但是占位符是可拖动的（带填充），如nedede.

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

Phaser 3 增加精灵的拖动点击区域大小

Phaser 3 increase drag click area size of sprite

phaser-framework