Fighting Game Hitboxes implementation

[Kyran]

I'm currently trying to make an adventure/fighting game. So far I have the player character programmed to move around, jump, attack, etc. Right now I am contemplating on how to implement hitboxes for my attack animations. Would creating an empty/invisible sprite in a so called hitbox group and attaching it to my player character when it attack be a good idea?

[Sky Alpha]

Hey Kyran.

I was creating an RPG a couple of months ago and I had the same question about hitboxes.

What I did on my case, was to Create a container. Inside that container I would have 2 sprites, my player sprite, and my sword Sprite. The sword Sprite had no physical "body" until the atack was finished. And I had to be careful to call it one time per atack animation, that is a problem i had to deal with.

I only implemented the atack to the right side, but you will get the Idea.

    function atack()
    {
        atackInterval = [];
        console.log(sprite.list[1].body);
        playAnimation('atk_right');
        if (sprite.list[1].anims.currentAnim.key.includes('atk')) {
            atackInterval[0] = setInterval(() =>
            {

                sprite.list[1].body.setSize(16, 16);
                sprite.list[1].body.setOffset(50, 24);
                setColliderStatus(true);

            }, 500);
            atackInterval[1] = setInterval(() =>
            {
                setColliderStatus(false);
                resetBodySize()

            }, 1000);
        }
    }

I had to detect only the sword Sprite collision with the enemies group.

Take a closer look at the player.setColliderStatus(false) that prevents the hitbox to be called several times.

	// Adiciona um Listener de colisões entre a espada e o inimigo.
	this.physics.add.collider(
		player.getSprite().list[1],
		enemiesGroup,
		function(p, e) {
			console.log(e);

			// Muda o status de colisão para falso para colidir apenas 1 vez
			player.setColliderStatus(false);
			// Verifica se o HP do inimigo chegou a 0
			if (e.enemy.getHp() - player.getStrength() > 0) {
				e.enemy.playAnimation("idle_down");
				e.enemy.setHp(e.enemy.getHp() - player.getStrength());
			} else {
				// Zera o HP.
				e.enemy.setHp(0);
				// Se o HP do Inimigo Zerar ele destroi o inimigo.
				e.destroy();
			}
		},
		function() {
			// Se retornar falso não realiza colisão, isso previne que a função acima seja chamada multiplas vezes seguidas.
			return player.getColliderStatus();
		},
		this
	);

I hope it helps you.

 

Edited April 16, 2020 by Sky Alpha