I want to rotate a Tile of my Tilemap around its center point, instead of its top left corner.

I tried some calculations with Sinus and Cosinus, but no luck… I also found that some people were talking about Matrix, which I don’t know what it is, but maybe that’s the solution?

If anyone can help me or at least point me in the right direction, I would be greatful.

It almost works. The tile starts rotating around its center, it starts floating a bit up, then stops, then move up again… It keeps like this infinitly. Here’s my code:

var m:Matrix = matrix.clone();
var point:Point = new Point(x + width / 2, y + height / 2);
m.translate(-point.x, -point.y);
m.rotate(rotation_value * Math.PI / 180);
m.translate(point.x, point.y);
set_matrix(m);

I think the problem may be with the width / 2 and height / 2.

My situation’s also with a Class that I created which extends Tile.

I was thinking that maybe we could try to solve this by simply analysing the rotation value. For example, At 45°, the sprite is at his lowest on Y, so we need to move the sprite up a bit. At 225°, the sprite is at his highest on Y, so we need to move it down a bit. The same thing is found on X at 135° and 315°.

Maybe I’ll try to work with that instead of continue fighting with Sinus, Cosinus and Matrix!

Or maybe someday they’ll add a way to choose the anchor point to the OpenFL Tile class.

I think this is worth trying. Let me provide a couple diagrams to make all of this easier to visualize.

To make this as easy as possible, let’s pick some convenient numbers. -100 as the minimum, and 100 as the maximum. So at 45°, where Y is lowest, it’s -100:

At 225°, where it’s highest, Y is 100:

(This is nothing new; I’m just illustrating your post.)

Same with X at the two other angles you mentioned:

So…

What X and Y values does the square have at 0°?

0° is halfway between 45° and 315°. Are the coordinates halfway between as well?

Glad you figured it out! However, I had a whole thing planned, and I’d like to follow through.

Let’s take a closer look. As a reminder, here are the points at 45° and 315°.

x goes from -100 to 0. If 0° is halfway between that, then x is -50. y goes from 0 to -100, so the same logic applies.

Now, let’s draw it:

That square is off-center!

Did we do the math wrong? Well, no. That diagonal line is a perfectly straight line between the points (-100, 0) and (0, -100). Our square is halfway along that line.

The halfway point isn’t what we want. It just isn’t. We want our square to trace out a circle as it rotates, not a straight line. (I actually drew this circle for you in the examples above. It’s faint, but it’s there.)

Here’s what the square should look like at 0°:

See how it’s aligned with the circle? Also notice that neither x nor y equals -50.

Yep. The angle is halfway between “up” and “left,” but the coordinates are slightly off from halfway.

So the final question is you have to ask is, if it isn’t following the obvious formula, what formula is it following?

We need a formula to take an angle and turn it into an x or y coordinate. This formula should go from 0 → 100 → 0 → -100 → 0 as you go around the circle. In addition to that, the formula should spend plenty of time near 100 and plenty of time near -100, but not much time near 0.

This is another reason the “halfway equals halfway” strategy fails. It would spend exactly the same amount of time in each green area, and we need a formula that doesn’t.

Any guesses as to what the correct formula is? Click here for the (perhaps unsurprising) answer.

I can clearly see the equation that I found on that gif! I’m calculating the hypotenuse of the triangle, which is the radius of the circle, to then find X and Y with Sinus and Cosinus.

Those drawings and gifs are a little bit better than my pen and paper!

By the way, I’m planning to turn these posts into a blog post at some point. Do you think there’s anything else I should include, or any parts I should skip?

The only thing I’m thinking is maybe add a concrete example with a sprite. In this example, you could put a triangle like in this example you shared and rotate the sprite calculating its X and Y.

And I don’t think you should skip anything. There are a lot of good informations!