Arcade overlap doesn't work

[Leonard]

var Undertale = {

	preload: function () {
		
		game.load.spritesheet('stillsans','assets/images/sans/still/still.png',167, 133);
		game.load.spritesheet('blaster','assets/images/sans/blasters/blasters.png',44,57);
		game.load.image('beam','assets/images/sans/blasters/beam.png');
		game.load.image('heart','assets/images/heart.png');
		game.load.image('bone','assets/images/bone.png');
		game.load.image('hpbar','assets/images/hpbar.png');
		game.load.image('redhpbar','assets/images/hpdamage.png');
		game.load.image('fight','assets/images/fight.png');
		game.load.image('greymercy','assets/images/greymercy.png');
		game.load.image('hlfight','assets/images/hlfight.png');
		game.load.image('hlmercy','assets/images/hlmercy.png');
		game.load.image('background','assets/images/background.png');
		game.load.bitmapFont('carrier_command', 'assets/fonts/carrier_command.png', 'assets/fonts/carrier_command.xml');
		
	},
	create: function () {
		game.physics.startSystem(Phaser.Physics.ARCADE);
		game.add.tileSprite(0, 0, 800, 600, 'background');
		setupButtons();
		
    	healthTxt = game.add.bitmapText(500, 500, 'carrier_command',"HP:99/99",15);
    	debugtext = game.add.bitmapText(50, 10, 'carrier_command',"x: y:",10);
		game.add.bitmapText(50, 500, 'carrier_command','CHARA  LV19   HP:',15);
		hpbar = game.add.tileSprite(350, 500, 99*1.4, 21, 'hpbar');
		redbar = game.add.tileSprite(350, 500, 0, 21, 'redhpbar');
		
		
		sans = game.add.sprite((game.world.width/2) - 60, 100,'stillsans');
		sans.animations.add('still',[0,1,2],4,true);
		sans.animations.play('still');
		
		graphics = game.add.graphics(0, 0);
		setupBox();
		
		
		
		player = game.add.sprite((game.world.width/2), (game.world.height/2)+100,'heart');
		player.z = 1;
		player.maxhealth = 99;
		player.health = 99;
		player.enableBody = true;
		game.physics.arcade.enable(player);
		
		bones = game.add.group();
		bones.enableBody = true;
		bones.physicsBodyType = Phaser.Physics.ARCADE;
		bones.createMultiple(30, 'bone');
		bones.setAll('anchor.x', 0.5);
		bones.setAll('anchor.y', 1);
		bones.setAll('outOfBoundsKill', true);
		bones.setAll('checkWorldBounds', true);
		
		beams = game.add.group();
		beams.enableBody = true;
		beams.physicsBodyType = Phaser.Physics.ARCADE;
		beams.createMultiple(30, 'beam');
		beams.setAll('anchor.x', 0.5);
		beams.setAll('anchor.y', -0.01);
		beams.setAll('outOfBoundsKill', true);
		beams.setAll('checkWorldBounds', true);
		
		blasters = game.add.group();
		blasters.enableBody = true;
		blasters.physicsBodyType = Phaser.Physics.ARCADE;
		blasters.createMultiple(30, 'blaster');
		blasters.setAll('anchor.x', 0.5);
		blasters.setAll('anchor.y', 0.5);
		blasters.setAll('outOfBoundsKill', true);
		blasters.setAll('checkWorldBounds', true);
		
		setupControls();
		enterButtonMode();

	},
	update: function () { //60Hz
		drawHealth();
		//console.log(player.x + "," + player.y + " boxbounds = " + boxTopLeftX + "," + boxTopLeftY);
		if(!battleMode){
			manageButtonMovement();
		}else{
			manageHeartMovement();
			playAttack();
			game.physics.arcade.overlap(bones,player,deductHP,null, this);
			game.physics.arcade.overlap(beams,player,deductHP,null, this);
			//beams.forEachAlive(checkOverlapAndDamage, this, player);
		}
		updateBox();
	
	}

}

The problem is with the line "game.physics.arcade.overlap(beams,player,deductHP,null, this);", which isn't really working. I've tried bounds as a replacement, but in the picture, the beam clearly misses, but the player still gets health deducted. The other overlap works (game.physics.arcade.overlap(bones,player,deductHP,null, this);). Is there a way to solve it?

[Leonard]

Up

[3man7]

I think the problem here is the beam's hitbox.

You see, every sprite has a hitbox and it's basically a rectangle shape; rotating the beam at 45 degrees will not rotate the hitbox. You can change its size but not its shape; unless you take the p2 physics route which will have an impact on the performance due to the complex shape; it will require more cpu power.

Granted I might be wrong about this and your problem might be something else...sorry that I can't give you a straight answer but I'm kinda new to Phaser myself. Someone more experienced might help you on this one

Take a look here: https://phaser.io/examples/v2/p2-physics/body-debug

Try to render the beam's body and see what's going on:

update: function () {
    //stuff
},

render: function () {
    this.game.debug.body(player);

    this.beams.forEachAlive(function (beams_body) {
        this.game.debug.body(beams_body);
    }, this);
}

 

[Leonard]

I figured as much, but how do I solve this? How do I detect the player overlapping an angled beam sprite?

[Leonard]

Ok I reread what you've said and realised I missed something out. I got the bounds for the beam, and apparently the bounds does not rotate with the beam sprite. What do I do from here?

[samid737]

In arcade physics, your bounding boxes will always remain axis aligned (its how the collision detection algorithm works). Here are two ideas:

1. switch to p2 physics. This shouldn't be too much work in your case.
2. Since you are using beams which are similar to lines, you could use geometric lines instead of sprites and draw the lines using graphics to replicate your beams.You could then check for intersections between lines and rectangles (this post has a good codepen example). I think you should even be able to add the gradient to your line via linestyles, but im not sure. If its not possible, you could cut your beam sprite to the point where it is completely filled and add it on top of the line, but below the player sprite. 

 

[Leonard]

But p2 physics doesn't have an overlap. Is there a similar function for it?