How to alter sprite hitbox in sprite animation

#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:

Matter JS
#6

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