# Load sprite rotated - matter physics

**URL:** <https://phaser.discourse.group/t/load-sprite-rotated-matter-physics/6183>\
**Category:** Phaser 3\
**Created:** [May 4, 2020, 1:45am UTC](https://phaser.discourse.group/t/load-sprite-rotated-matter-physics/6183 "2020-05-04T01:45:27Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![lee](https://avatars.discourse-cdn.com/v4/letter/l/bc8723/32.png) [@lee](https://phaser.discourse.group/u/lee)\
**Post date:** [May 4, 2020, 1:45am UTC](https://phaser.discourse.group/t/load-sprite-rotated-matter-physics/6183/1 "2020-05-04T01:45:27Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![Telinc1](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/telinc1/32/60_2.png) [@Telinc1](https://phaser.discourse.group/u/Telinc1)\
**Post date:** [May 4, 2020, 5:57am UTC](https://phaser.discourse.group/t/load-sprite-rotated-matter-physics/6183/2 "2020-05-04T05:57:36Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![lee](https://avatars.discourse-cdn.com/v4/letter/l/bc8723/32.png) [@lee](https://phaser.discourse.group/u/lee)\
**Post date:** [May 4, 2020, 2:47pm UTC](https://phaser.discourse.group/t/load-sprite-rotated-matter-physics/6183/3 "2020-05-04T14:47:14Z")

</div>

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');
```

---

<div class="post-metadata">

**Author:** ![lee](https://avatars.discourse-cdn.com/v4/letter/l/bc8723/32.png) [@lee](https://phaser.discourse.group/u/lee)\
**Post date:** [May 5, 2020, 12:04am UTC](https://phaser.discourse.group/t/load-sprite-rotated-matter-physics/6183/4 "2020-05-05T00:04:15Z")

</div>

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.

---

<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:** [May 5, 2020, 8:02am UTC](https://phaser.discourse.group/t/load-sprite-rotated-matter-physics/6183/5 "2020-05-05T08:02:58Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Telinc1](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/telinc1/32/60_2.png) [@Telinc1](https://phaser.discourse.group/u/Telinc1)\
**Post date:** [May 5, 2020, 8:25am UTC](https://phaser.discourse.group/t/load-sprite-rotated-matter-physics/6183/6 "2020-05-05T08:25:30Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![lee](https://avatars.discourse-cdn.com/v4/letter/l/bc8723/32.png) [@lee](https://phaser.discourse.group/u/lee)\
**Post date:** [May 6, 2020, 12:06am UTC](https://phaser.discourse.group/t/load-sprite-rotated-matter-physics/6183/7 "2020-05-06T00:06:26Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![lee](https://avatars.discourse-cdn.com/v4/letter/l/bc8723/32.png) [@lee](https://phaser.discourse.group/u/lee)\
**Post date:** [May 6, 2020, 12:24am UTC](https://phaser.discourse.group/t/load-sprite-rotated-matter-physics/6183/8 "2020-05-06T00:24:01Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![Telinc1](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/telinc1/32/60_2.png) [@Telinc1](https://phaser.discourse.group/u/Telinc1)\
**Post date:** [May 6, 2020, 8:04am UTC](https://phaser.discourse.group/t/load-sprite-rotated-matter-physics/6183/9 "2020-05-06T08:04:04Z")

</div>

> [@lee](#):
>
> Do you know of a tool that will fix the atlas files based on rotating the sheets?

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.