Phaserjs, sprite overlap, не работает

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 и проверить, соответствует ли он определенному порогу. Это можно сделать с помощью дополнительного обратного вызова функции перекрытия, который называется processCallback в documentation. В качестве примера:

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

Другим способом сделать это (кроме того, что предлагает Хамдите Douss) является resize вашего тела, чтобы только занять до 50% площади. Это автоматически гарантирует, что столкновения/перекрытие не произойдет, если только уменьшенные тела не касаются друг друга.

Чтобы просмотреть текущее тело, используйте Phaser в debug методы

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