CODEWITHSUNDEEP
phaser-framework
raju
raju

Reputation: 6936

Phaserjs, sprite overlap, not working

I am new to Phaserjs, trying to create basic drag-drop style game.

I have created the game and add arcade physics (this.game.physics.arcade.enable(this.orange_outline);)

Currently overlap happen as soon as the edges collide.

I want to detect that my code should trigger when 50% overlap happen. is it possible in 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')
      }
}
}

In stopDrag() I am detecting overlap.enter image description here

Upvotes: 1

Views: 376

Answers (2)

James L.
James L.

Reputation: 14515

Another way to do this (other than what Hamdi Douss offers) is to resize your body to only take up 50% of the area. This will automatically ensure that collisions/overlap don't occur unless the reduced bodies touch each other.

To view your current body, use Phaser's debug methods

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

Upvotes: 0

Hamdi Douss
Hamdi Douss

Reputation: 1103

You can try to get the amount of horizontal and vertical overlap amount and check if it satisfies a certain threshold. This can be done in additional overlap function callback, that is called processCallback in documentation. As an example:

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) {
    //
}

Upvotes: 1

Related Questions