阶段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

您可以使用精灵的setInteractive方法来定义一个有效的hitArea，它大于"按钮">，根据要求。(此处为文档链接(。

只需定义hitArea和hitAreaCallback，它就会起作用
(我使用Phaser内置函数来测试它，点在hitArea，这里是文档(

这里是一个工作演示：

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

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

hitArea相对于图像的左上角，这就是为什么前两个参数为负数。