Load sprite rotated - matter physics

Phaser 3
1

I have a scene where I want to load a sprite. The image file is orientated to face upward (north); however, when I load it into the matter physics and the force is applied (direction of movement when thrust) is toward the right (east).
Is there a way to initially load the sprite so it would be properly orientated west (load 90 degrees) so it corresponds with the physics body?

2

I’m not sure if this applies to Matter, but the general rule in Phaser is that 0 degrees points east. Rotate your image file, then rotate the sprite in-game to -90 degrees so it correctly points north.

3

If I understand you correctly, you’re suggesting rotating the file (.png) clockwise and saving it. This way the sprites will be loaded in the correct orientation.
Yes, I did consider that option, but I have a number of sprite sheets (not of my creation) that all point north. I was hoping there was support for the rotated=“true” (of course if I understand the rotated value correctly); however, my experiments show that this is not supported when loading the atlas.
What I was hoping for would be to load the image -> rotate -> then add the game object, but again this does not work as the image direction is carried through to the game object.

So is there a way to rotate the image and store it in the texture manager as a new texture (or replace the existing one) ?

// maybe something like this? (pseudo code)
let tmp = this.texturemap.get('img');
tmp.setRotation(90); // I think this should be in rads
let proper = this.texturemap.createCavas('shouldbegood', tmp.height, tmp.width);
proper.draw(0,0, tmp);
this.matter.add.image(x, y , 'shouldbegood');
4

Well, I can’t get the pseudo code to work. I guess the only alternative is to rotate the sprite sheet and re-generate the atlas file.

5

Not sure I understand the problem. If I create a matter gameobject and rotate it the physics body rotate with the sprite.

Here is a test I did in my code that rotates sprite and corresponding matter body:

let test = this.matter.add.sprite(X, Y, "key", "frame"); //X, Y to something visible for you
test.body.vertices[0].x -= 10; //These two only to quickly create a shape easy to see if it rotates
test.body.vertices[2].x -= 10;
test.setAngle(90); //Using angle instead of rotation as rotation is rads
6

That solution should work with some changes, but it’s really wasteful to do it at runtime. Rotating the spritesheet is the best long-term solution.

I want to reiterate that I’m not 100% certain that Matter works the way I assumed in my previous post. Before committing to a time-consuming solution, try it with just a single image to make sure that you’re solving the right problem.

7

smjn: Yes, rotation does work, but the sprite is 90 degrees out. So if you thrust, it is moving sideways. I had to rotate the sprite sheet 90 degrees, save it, then load.

8

I did end up rotating the sprite sheet. and just updated the atlas. And everything works as expected. I just didn’t want to re-do all the atlas files as I didn’t create the sheets in the first place.

Do you know of a tool that will fix the atlas files based on rotating the sheets?

9

I haven’t seen any. If all you need to do is change the atlas JSON, I doubt it’d be too hard to make your own, since all you’d have to do is rotate the coordinates in the JSON and swap the dimensions.