How to handle collisions with sprite animations in Phaser 3

Phaser 3
1

Hello there,

I’ve been puzzling about this for while now. I know of this concept through old fighting games from the 90s such as Street Fighter etc, using hitboxes or some form of collision.

Having a collision follow the player seems like a simple task, but I want to have the collision shape to change with the sprite or having it change depending on which frame its using. I’ve found that other people in the past have come across a similar problem and have posted on other forums. Going through the phaser 3 docs hasnt really helped me much.

I’ve also seen other forms of melee attack, which might rotate a rectangle to imitate a swinging a sword motion. I want to have a go at implementing something that involves collisions frame by frame of an animation such as in 90s fighting games that I grew playing as a kid.

I don’t have any running code. aside from other projects and things I’ve been learning. I don’t have the understanding of how to begin the code in Phaser 3 by any means.

I’ve watched this problem be easily solved in other software such as Godot, but that has a animation editor that can help handle that.

Here is a link to someone with a similar problem. here shadoworker made a tool designed to handle this problem but I think its before Phaser 3.

I’m hoping I can have a discussion on this. I would really appreciate any suggestions or help, or any thoughts from anyone who have accomplished this. Thanks.

I posted this on another forum but I should post it here.

2

Create a physics-enabled Zone for each box. Add overlap colliders to detect collisions.

Listen to the character animation start, complete, and update events and enable/disable, size, and offset the box bodies. Position the box bodies in scene update so they track the character body.

2 Likes
3

Okay. I can see how using a listener would help. I’ve been able to make a frameCount variable which will count the frames at a time. My hunch is to use a boolean operation that will set the size and position of the zone. So far, my operation isn’t working. I can read each frame and send a message to the console on the third frame. I’m unsure if I can move the x and y position of the zone that I’m using.

let zone, graphics, color = null

export class Player {
constructor(scene) {
    this.offsetX = 50
    this.offsetY = 50
    this.frameCount = null

    this.playerSprite = scene.add.sprite(0 + this.offsetX, 0 + this.offsetY, "adventurer")
    this.playerSprite.setScale(3, 3)
    let walkAnimConfig = {
        key: 'attack',
        frames: scene.anims.generateFrameNames('adventurer', {
            start: 42,
            end: 58
        }),
        frameRate: 1,
        yoyo: false,
        repeat: 0,
    };

    // zone
    zone = scene.add.zone(100, 100, 32, 32).setDropZone();
    graphics = scene.add.graphics();
    color = 0xffff00;
    graphics.lineStyle(2, color);
    graphics.strokeRect(zone.x + zone.input.hitArea.x, zone.y + zone.input.hitArea.y, zone.input.hitArea.width, zone.input.hitArea.height);

    this.anim = scene.anims.create(walkAnimConfig)
    this.playerSprite.anims.play('attack')

    // add listeners
    this.playerSprite.on("animationstart", (e) => {
    })

    this.playerSprite.on("animationcomplete", (e) => {
    })

    this.playerSprite.on("animationupdate", (e) => {
        this.frameCount = this.frameCount + 1

        if (this.frameCount == 1) {
            // change position and size?
        }

        if (this.frameCount == 3) {
            console.log("3 found");
        }
    })

    this.playerSprite.emit("animationcomplete")
    this.playerSprite.emit("animationupdate")
    this.playerSprite.emit("animationstart")
}

update(time) {
    console.log(this.frameCount);
    this.playerSprite.on("animationupdate", (e) => {
        
    })
}
getFrameCount() {
    return this.frameCount
  }
}

Also unsure if using a zone is appropriate rather than a game object rectangle.

4

Look at the ANIMATION_UPDATE handler in http://labs.phaser.io/edit.html?src=src/animation/on%20update%20event.js.

1 Like
5

I decided to make a codepen demonstrating overlaps with animation, after your suggestions. I learned you can enable physics on zone objects, and I disable the zones physics by disabling it on the corresponding frames. Animation update really helped the situation. Thanks for the suggestions, much appreciated.

code pen here

1 Like