3 posts in this topic

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.

596abb52eb5c1_bug1.gif.73df8589e675613bd42a14aab2fbcdfd.gif

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();
		}
	};
}

 

Share this post


Link to post
Share on other sites

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?

 

Share this post


Link to post
Share on other sites
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.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!


Register a new account

Sign in

Already have an account? Sign in here.


Sign In Now

  • Recently Browsing   0 members

    No registered users viewing this page.