How to alter sprite hitbox in sprite animation


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);

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.


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.


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


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.

            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:

Matter JS

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