# Animating body shape depending of sprite frame

**URL:** <https://phaser.discourse.group/t/animating-body-shape-depending-of-sprite-frame/4523>\
**Category:** Phaser 3\
**Created:** [December 9, 2019, 4:49pm UTC](https://phaser.discourse.group/t/animating-body-shape-depending-of-sprite-frame/4523 "2019-12-09T16:49:20Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![MEJS](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/mejs/32/2427_2.png) [@MEJS](https://phaser.discourse.group/u/MEJS)\
**Post date:** [December 9, 2019, 4:49pm UTC](https://phaser.discourse.group/t/animating-body-shape-depending-of-sprite-frame/4523/1 "2019-12-09T16:49:20Z")

</div>

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](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](https://global.discourse-cdn.com/free1/uploads/phaser1/original/2X/6/6fe55debbb0bae01f919ae1f4845731c6e99e0fc.png)  
**Second frame:**  
 ![frame2](https://global.discourse-cdn.com/free1/uploads/phaser1/original/2X/a/aca1851c5c72e4440b44642c4fdc2a8bd8ae52d6.png)

---

<div class="post-metadata">

**Author:** ![MEJS](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/mejs/32/2427_2.png) [@MEJS](https://phaser.discourse.group/u/MEJS)\
**Post date:** [December 9, 2019, 9:47pm UTC](https://phaser.discourse.group/t/animating-body-shape-depending-of-sprite-frame/4523/2 "2019-12-09T21:47:16Z")

</div>

Can anybody help me?

---

<div class="post-metadata">

**Author:** ![smjn](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/smjn/32/2087_2.png) [@smjn](https://phaser.discourse.group/u/smjn)\
**Post date:** [December 10, 2019, 11:52am UTC](https://phaser.discourse.group/t/animating-body-shape-depending-of-sprite-frame/4523/3 "2019-12-10T11:52:48Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![MEJS](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/mejs/32/2427_2.png) [@MEJS](https://phaser.discourse.group/u/MEJS)\
**Post date:** [December 10, 2019, 3:35pm UTC](https://phaser.discourse.group/t/animating-body-shape-depending-of-sprite-frame/4523/4 "2019-12-10T15:35:27Z")

</div>

@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)](https://global.discourse-cdn.com/free1/uploads/phaser1/original/2X/0/0f91b1713a1ceaf2cf4672c1d840e6792845d5ce.gif)

**Edit:**  
I found other solution fot this in: [Matter.js, change body shape](https://phaser.discourse.group/t/matter-js-change-body-shape/3339/4)

```
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
	})
```