Animating body shape depending of sprite frame

Phaser 3
1

Hi all. I have problem and maybe you could help me. I have a sprite which is animating and this is ok, but i need to animate body shape, but I don’t havve any idea how to achieve this. I’m using matter physics. DEMO: https://wetransfer.com/downloads/877d07d16fc8f71fcf5cfc038b8d047720191208191534/48f210?fbclid=IwAR2gNHznfK3SxbnsVeRpFzBoQaLrlelYyGR44RzW_DNSUdKRFDLhvHLQWhE

If you have any problems with running it, try running it on server.
First frame:
firstFrame
Second frame:
frame2

2

Can anybody help me?

3

There are events triggered for each frame, it you have a gameobject with a sprite property then:

sprite.on(Phaser.Animations.Events.SPRITE_ANIMATION_KEY_UPDATE + "keyOfAnimation", (anim, frame,gameObject) => {
       
 });

Unsure about the parameters, but think they are something like that, print them to know for sure. In each frame either modify the body or have a set of different bodies to assign.

4

@smjn Thanks for your reply, It was very helpful. I did it, but I fount little bugs when we try to change body shape:

class Boot extends Phaser.Scene {
	player: Phaser.GameObjects.Sprite;
	pigShapes: any;


	preload() {
		//? Load sprite sheet generated with TexturePacker
		this.load.atlas('pig-sprites', './assets/spritesheets/pig/pig-sprites.png', './assets/spritesheets/pig/pig-sprites.json');

		// Load body shapes from JSON file generated using PhysicsEditor?
		this.load.json('pig-shapes', './assets/spritesheets/pig/pig-shapes.json');

	}

	create() {
		this.pigShapes = this.cache.json.get('pig-shapes');

		this.anims.create({
			key: "fly-player",
			frames: this.anims.generateFrameNames("pig-sprites", { prefix: 'pig_0', suffix: '.png', start: 0, end: 6 }),
			repeat: -1,
			frameRate: 15
		});

		this.player = this.matter.add.sprite(400, 100, 'pig-sprites', 'pig_01.png', { shape: this.pigShapes.pig_01 }).setScale(.3).play('fly-player');


		this.player.on('animationupdate-fly-player', (anim, frame, gameObject )  => {
			let nextFrameId = frame.nextFrame.textureFrame.slice(0, frame.nextFrame.textureFrame.indexOf('.')); // get next frame id
			let nextShape = this.pigShapes[nextFrameId]; // get next shape
			
			/* These 2 methods must be run because:
			1) On every body chagne sprite go to the starting points. In my example (y: 100)
			2) Before change body if we scaled before our sprite we must set the scale to the start value
			*/
			let playerY = gameObject.y+1; // get current object Y
			gameObject.setScale(1);
			
			
			gameObject.setBody(nextShape, {shape:this.pigShapes[nextFrameId]} ); // set new  shape
			gameObject.setScale(.3); //again scale
			gameObject.y = playerY; //set last sprite Y position
		})

	}

}

And the result is:
chrome-capture (1)

Edit:
I found other solution fot this in: Matter.js, change body shape

this.player.on('animationupdate-fly-player', (anim, frame, gameObject )  => {
		var sx = gameObject.x;
		var sy = gameObject.y;
		var sav = gameObject.body.angularVelocity;
		var sv = gameObject.body.velocity;

		let nextFrameId = frame.nextFrame.textureFrame.slice(0, frame.nextFrame.textureFrame.indexOf('.')); // get next frame id
		let nextShape = this.pigShapes[nextFrameId]; // get next shape

		/* These 2 methods must be run because:
		1`) Before change body if we scaled before our sprite we must set the scale to the start value
		*/
		gameObject.setScale(1);


		gameObject.setBody(nextShape, { shape: this.pigShapes[nextFrameId] }); // set new  shape

		gameObject.setPosition(sx, sy);
		gameObject.setVelocity(sv.x, sv.y);
		gameObject.setAngularVelocity(sav);
		gameObject.setScale(.3); //again scale
	})