Question

我是Phaserjs的新手，尝试创建基本的拖放式游戏。

我创建了游戏并添加了街机物理（this.game.physics.arcade.enable（this.orange_outline）;）

当边缘碰撞时，目前会发生重叠。

我想检测到50％重叠发生时我的代码应该触发。 phaserjs有可能吗？

var GameState = {

init:function(){
    this.physics.startSystem(Phaser.Physics.ARCADE);
},
create: function () {
    this.background = this.game.add.sprite(0, 0, 'background');

    this.overlapHappen = false;


    this.orange_outline = this.game.add.sprite(459,199,'orange_outline');
    this.orange_outline.frame = 2;
    this.orange_outline.anchor.setTo(.5);
    this.orange_outline.customParams = {myName:'orange_outline',questionImg:'orange'};

    this.orange_inner = this.game.add.sprite(150,197,'orange_inner');
    this.orange_inner.anchor.setTo(.5);
    this.orange_inner.customParams = {myName:'orange_inner',questionImg:'orange',targetKey:this.orange_outline,targetImg:'orange_outline'};
    this.orange_inner.frame = 1;
    this.orange_inner.inputEnabled = true;
    this.orange_inner.input.enableDrag();
    this.orange_inner.input.pixelPerfectOver = true;
    this.orange_inner.events.onDragStart.add(this.onDragStart,this);

    // this.game.physics.enable(this.orange_inner,Phaser.Physics.ARCADE);
    this.game.physics.arcade.enable(this.orange_inner);

    this.game.physics.arcade.enable(this.orange_outline);

    this.orange_inner.events.onDragStop.add(this.onDragStop,this);



},
update: function () {
    //this.orange.animations.play('orange_one',1)

},
onDragStart:function(sprite,pointer){
    //console.log(sprite.key + " dragged")
},
onDragStop:function(sprite,pointer){
    var endSprite = sprite.customParams.targetKey;
    //console.log(sprite.customParams);
    this.stopDrag(sprite,endSprite)
},
stopDrag:function(currentSprite,endSprite){
    if (!this.game.physics.arcade.overlap(currentSprite, endSprite, function() {
        var currentSpriteTarget = currentSprite.customParams.targetImg;
        var endSpriteName = endSprite.customParams.myName;
        if(currentSpriteTarget === endSpriteName){
            currentSprite.input.draggable = false;
            currentSprite.position.copyFrom(endSprite.position); 
            currentSprite.anchor.setTo(endSprite.anchor.x, endSprite.anchor.y); 
        }
        console.log(currentSpriteTarget,endSpriteName);

      })) { 
        //currentSprite.position.copyFrom(currentSprite.originalPosition);
        console.log('you')
      }
}
}

在stopDrag（）中，我正在检测重叠。

Answer 1

您可以尝试获取horizontal和vertical重叠量，并检查它是否满足某个阈值。这可以在附加的重叠函数回调中完成，在documentation中称为processCallback。举个例子：

if (!this.game.physics.arcade.overlap(currentSprite, endSprite, function() {
    //your callback !
},function() {
    if (this.game.physics.arcade.getOverlapX(currentSprite, endSprite) > currentSprite.width / 2
        && this.game.physics.arcade.getOverlapY(currentSprite, endSprite) > currentSprite.height / 2) {
        //Overlaping !
        return true;
    } else {
        //as if no overlap occured
        return false;
    }
},this) {
    //
}

Answer 2

另一种方法（除了Hamdi Douss提供的）是resize你的身体只占50％的面积。除非减少的物体相互接触，否则这将自动确保不会发生碰撞/重叠。

要查看当前正文，请使用Phaser的debug方法

this.game.debug.body(someSprite, 'rgba(255,0,0,0.5)');

Phaserjs，精灵重叠，不起作用

2 个答案: