Jump to content

Fighting Game Hitboxes implementation


Recommended Posts

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?

Link to post
Share on other sites

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 by Sky Alpha
Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
  • Recently Browsing   0 members

    No registered users viewing this page.

×
×
  • Create New...