Stuck in the Corners

[CaioMGA]

Hi!

I'm making a game where the player clicks or touches the screen and his avatar walks towards that point and stops.

It works great without obstacles.
With obstacles the player avatar get stuck in the corner. See gif below.

I managed to fix it, but it feels hacky.
When hero (player's avatar) collides with box (obstacle on screen) I move him towards his target
EXAMPLE: if hero collides with left or right side of box and target is above him, I move hero up a bit
 

function collisionHandler(){
    //prevent hero avatar from getting stuck on corners
    kick = 0.4;
    if(box.x < hero.sprite.x && hero.target.sprite.x > hero.sprite.x){
        hero.sprite.x += kick; //KICK right
    } else if(box.x > hero.sprite.x && hero.target.sprite.x < hero.sprite.x){
        hero.sprite.x -= kick; //KICK left
    }

    if(box.y < hero.sprite.y && hero.target.sprite.y > hero.sprite.y){
        hero.sprite.y += kick; //KICK down
    } else if(box.y > hero.sprite.y && hero.target.sprite.y < hero.sprite.y){
        hero.sprite.y -= kick; //KICK up
    }
}

Is there a property of ARCADE physics I'm missing? Do I need my hacky code or there's a better way of fixing it?

 

UPDATE:

Github page: https://github.com/CaioMGA/ZenvaGameJam/
hero.js:

function createHero(x, y, _speed){ return { "alive":true, "walking" : false, "speed":_speed, "direction" : {"x":1, "y":0}, "target":null, "sprite" : null, "createTarget": function(){ this.target = createTarget(); }, "createAnimations" :function(){ this.sprite = game.add.sprite(x, y, 'hero_spritesheet', 10); this.sprite.anchor.setTo(0.5, 0.5); this.sprite.animations.add('walkH', [13, 14 ,15, 14], 8, true); this.sprite.animations.add('walkUp', [7, 8, 7, 9], 8, true); this.sprite.animations.add('walkDown', [10, 11, 10, 12], 8, true); this.sprite.animations.add('idle', [10], 8, false); this.sprite.animations.add('idleUp', [7], 8, false); this.sprite.animations.add('victory', [10, 16, 10, 16, 10, 16], 5, false); this.sprite.animations.add('death', [0, 1, 2, 3, 0, 1, 2, 3, 4, 5, 6], 10, false); this.sprite.animations.play('idle'); game.physics.enable(this.sprite, Phaser.Physics.ARCADE); this.sprite.body.collideWorldBounds = true; this.sprite.body.setCircle(16); this.sprite.body.bounce.set(0.05); }, "death" : function(){ this.sprite.animations.play('death'); }, "walk" : function(direction){ this.sprite.animations.play('walkH'); this.sprite.scale.x = direction; }, "walkUp" : function(){ this.sprite.animations.play('walkUp'); }, "walkDown" : function(){ this.sprite.animations.play('walkDown'); }, "stop" : function(){ this.walking = false; this.sprite.animations.play('idle'); }, "victory" : function(){ this.sprite.animations.play('victory'); }, "update" : function(){ this.move(); }, "move" : function(){ if(this.walking){ game.physics.arcade.moveToXY(this.sprite, this.target.sprite.x, this.target.sprite.y,this.speed, 0); if(Phaser.Math.distance(this.sprite.x, this.sprite.y, this.target.sprite.x, this.target.sprite.y) < 8){ this.sprite.x = this.target.sprite.x; this.sprite.y = this.target.sprite.y; this.walking = false; this.sprite.body.velocity.setTo(0, 0); this.stop(); this.target.hide(); } } }, "setTarget" : function (x, y){ this.target.set(x, y); this.walking = true; if(Math.abs(this.sprite.x - this.target.sprite.x) >= Math.abs(this.sprite.y - this.target.sprite.y)){ if(this.sprite.x > this.target.sprite.x){ this.walk(-1); } else { this.walk(1); } } else { if(this.sprite.y > this.target.sprite.y){ this.walkUp(); } else { this.walkDown(); } } }, "init" : function(){ this.createAnimations(); this.createTarget(); this.target.init(); } }; }

[squilibob]

You are already setting the bounce property to do this kick for you. It seems redundant to do it again. Have you tried setting bounce to a value higher than 0.05?

 

[CaioMGA]

1 hour ago, squilibob said:

You are already setting the bounce property to do this kick for you. It seems redundant to do it again. Have you tried setting bounce to a value higher than 0.05?

 

The bounce just push the hero in the opposite direction of collision. In some cases it keeps bouncing in the same position forever.
The kicks don't do it, they move the hero towards its target.
I use bounce to prevent overlapping.