Phaserjs, спрайт перекрывается, не работает

Question

Я новичок в Phaserjs, пытаюсь создать простую игру в стиле drag-drop.

Я создал игру и добавил физику аркад (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

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

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

Для просмотра вашего текущего тела используйте Phaser's debug методы

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