Change Sprite based on Direction of Motion

Phaser 3
1

Hey Gang!

My team is working on a game that will feature 3D-Modeled characters rendered to sprites, kind of like Donkey Kong Country! While programming with filler clip-art, I noticed that the matter.js bodies would slightly rotate after collisions, which is cool, but not what we want.

More info: my fabulous artists provided sprites of the models looking in 8 cardinal directions.

My questions:

  • How do I freeze rotation on matter.js sprites?
  • How do I work my code so that the sprite changes dynamically with the direction the player travels in?

Thanks so much in advance!

2

You can freeze the rotation of a matter.js sprite by keeping the body.angle always set to 0.

create: function ()
{
	this.dude = this.matter.add.sprite(50, 50, 'myspritesheet', 'thedude1');
	this.dude.setCircle();
};

update: function ()
{
	// keep sprite always right-side up
	this.dude.body.angle = 0;
};

Although, note that this will influency the body friction behaviour meaning it will roll less far away etc. And it might also cause the sprite and the actual collision body to go out of synch, so the collision body will be rotated but the sprite is not.

Because of that I would suggest using a circle collision body. Also, in your Phaser-config you can set physics: { matter: { debug: true } } to look at the collision bodies.

And as for the direction, in the update function you can use .body.velocity.x and .body.velocity.y to determine the current speed, calculate the velocity angle or derive which sprite to use.

3

Hey BdR,

I found an alternative solution that keeps us out of the update function, which I’ve been advised to keep as clear as possible. There exists a function in matter.js sprites called setFixedRotation(). It does just that, fixes the rotation, which is exactly what we needed!

Thanks anyway, though. We may still need some velocity work like you detailed.