How to alter sprite hitbox in sprite animation

Phaser 3
1

Hey Guys, I am trying to figure how I can change the hitbox of each frame of a sprite animation. I have a slime that is bouncing up and down and I would need to change the hitbox when it bounce up in the air.
I only know how to alter the hitbox as a whole by using

this.setSize(180, 270);
this.setoffset(45, 0);
2

With Arcade physics, you can find this example.
With other physics engines, I guess examples are available.

Maybe you can test the current sprite’s frame in your main update function, or in the sprite’s update function. and adjust the hitbox accordingly.

3

Thanks but not quite what I am looking for. I need to change the hitbox of each individual frame of sprite animation, not just the first frame. I am currenting looking into matter.js physics and I think I got a pretty good idea what to do.

4

There’s only one hitbox, so you would have to resize the body at each frame change, probably in an animation callback.

5

UPDATE: So I decide to switch to Matter Physics which will allow me to use a program called the Physics Editor to create custom shapes for my sprite and exported it into a json file. I’ve also use the TexturePacker to create my spritesheet which will also exported as a json file and a png file.

 //load in slime spritesheet created with Texture editor
this.load.atlas('slimesheet', 'assets/images/slime_sheet.png', 'assets/images/slime_sheet.json');

//load in slime shapes created with Physics editor
this.load.json('shapes', 'assets/images/slime_shapes.json');

//Then I create my slime
var shapes = this.cache.json.get('shapes');
    this.slime = this.matter.add.sprite(200, 200, 'slimesheet', '0001.png', {shape: shapes.slime1}).setScale(0.5);

So I succeed on creating my sprite with my custom shape on but I am having trouble on switching the shape on each individual frame of my animation. Is there a animation callback to specify the shapes of each frame? I’m not sure how I do this but this is what I did and it doesn’t work.

    this.anims.create({
            key: 'walkdown',
            frames: [{ key: 'slimesheet', frame: '0001.png', shape: shapes.slime1},
                         { key: 'slimesheet', frame: '0002.png', shape: shapes.slime2}],
            frameRate: 3,
            repeat: -1
        });

Does anyone know how I can do this correctly :grimacing:

6

Hello @Nivlecs I’m facing the same issue. Where you able to fix it?

7 
function resizeBodyFromFrame (anim, animFrame, sprite) {
  var f = sprite.frame;
  
  // Choose one:
  
  // (1)
  sprite.body.setSize();
  // Same as:
  // (2)
  sprite.body.setSize(f.realWidth, f.realHeight, true)

  // (3)
  // Other values. Depends on your texture atlas?
  sprite.body.setSize(f.cutWidth, f.cutHeight, false).setOffset(f.x, f.y);
};
8

Assuming you got this to work, can you explain how you implemented it? I’m trying to do the same thing but I’m a little lost on this post

9

How are you getting custom shapes to work??? I followed the same example for physics editor, and all I’m getting is a rectangle body…