# Rectangle Rotate Function

**URL:** <https://phaser.discourse.group/t/rectangle-rotate-function/4304>\
**Category:** Phaser 3\
**Created:** [November 19, 2019, 11:14am UTC](https://phaser.discourse.group/t/rectangle-rotate-function/4304 "2019-11-19T11:14:23Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![DaSoup](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/dasoup/32/1059_2.png) [@DaSoup](https://phaser.discourse.group/u/DaSoup)\
**Post date:** [November 19, 2019, 11:14am UTC](https://phaser.discourse.group/t/rectangle-rotate-function/4304/1 "2019-11-19T11:14:23Z")

</div>

Hi,

Just wondering why there isn’t a rotate function for rectangles e.g. Phaser.Geom.Triangle.Rotate. I’m trying to emulate this steering tutorial I found, but I can’t seem to find a rotate for rectangles.

I’m not the best at math, so bare with me.

---

<div class="post-metadata">

**Author:** ![quasipickle](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/quasipickle/32/2277_2.png) [@quasipickle](https://phaser.discourse.group/u/quasipickle)\
**Post date:** [November 20, 2019, 6:17am UTC](https://phaser.discourse.group/t/rectangle-rotate-function/4304/2 "2019-11-20T06:17:56Z")

</div>

I might be missing the point of the question but… Arcade physics doesn’t have rotation. Matter JS (and I believe Impact) do. You can set `.rotation` (radians), or `.angle` (degrees)

---

<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:** [November 20, 2019, 7:25am UTC](https://phaser.discourse.group/t/rectangle-rotate-function/4304/3 "2019-11-20T07:25:20Z")

</div>

Apart from what quasipickle said, Rectangle shapes are axis-aligned, which means they can’t be rotated. How you’d rotate a rectangle depends on how your code uses it.

As a side note, I don’t think Impact can rotate bodies. Only MatterJS supports complex collision.

---

<div class="post-metadata">

**Author:** ![DaSoup](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/dasoup/32/1059_2.png) [@DaSoup](https://phaser.discourse.group/u/DaSoup)\
**Post date:** [November 20, 2019, 10:31am UTC](https://phaser.discourse.group/t/rectangle-rotate-function/4304/4 "2019-11-20T10:31:43Z")

</div>

Hi,

I wasn’t thinking of using a rectangle for collisions/overlays per se, but I guess thinking about your replies that’s what it is. I was just thinking of a rectangle that is projected in front of my enemy ship and can rotate along with it. Kind of like the example below, but with a rectangle.

> **[Phaser - Examples - Contains](https://phaser.io/examples/v3/view/geom/triangle/contains)**
>
> Desktop and Mobile HTML5 game framework. A fast, free and fun open source framework for Canvas and WebGL powered browser games.

I’m trying to model some ideas from [http://opensteer.sourceforge.net/](http://opensteer.sourceforge.net/) where each ship has a long rectangular box that helps it steer away from obstacles and other ships.

I’ll check into Impact and Matter JS, but I’ve been working on this game for a long time and would like to release it.

Thanks for the help,  
DaSoup

---

<div class="post-metadata">

**Author:** ![DaSoup](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/dasoup/32/1059_2.png) [@DaSoup](https://phaser.discourse.group/u/DaSoup)\
**Post date:** [November 20, 2019, 10:51am UTC](https://phaser.discourse.group/t/rectangle-rotate-function/4304/5 "2019-11-20T10:51:37Z")

</div>

Think I’ll try two triangles and see how it works.

---

<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:** [November 20, 2019, 11:08am UTC](https://phaser.discourse.group/t/rectangle-rotate-function/4304/6 "2019-11-20T11:08:36Z")

</div>

Some other ideas if two triangles does not work for you and you don’t want to use matter/impact.

1: Perhaps create a rectangle using the factory? This will make a gameobject that is like the geom rectangle but can be rotated. this.add.rectangle(…) to create it and then move/rotate it with relation to the ship gameobject and set visible false if the rectangle is not meant to be seen.

2: You can get the points of a Phaser.Geom.Rectangle (or change to Phaser.Geom.Polygon) and then loop through them to update their position using Phaser.Math.RotateAround(…) again using the ship gameobject as a point to rotate around/with.

---

<div class="post-metadata">

**Author:** ![DaSoup](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/dasoup/32/1059_2.png) [@DaSoup](https://phaser.discourse.group/u/DaSoup)\
**Post date:** [November 21, 2019, 10:26am UTC](https://phaser.discourse.group/t/rectangle-rotate-function/4304/7 "2019-11-21T10:26:23Z")

</div>

I’ll look into those. Thanks. Seems like every door I open in Phaser leads to like five more.

I appreciate the help.
