feat: Add lookAt method for PositionComponent

[ufrshubham]

Description

This PR adds a new method called lookAt for PositionComponent. It is a convenience method which rotates the component to make it point towards/look at the given target position.

Additionally, this PR also adds a angleTo method which can be used to get the calculated angle for lookAt. It will be useful if someone want to smoothly rotate towards target using effects or manual lerping.

Checklist

• The title of my PR starts with a [Conventional Commit] prefix (fix:, feat:, docs: etc).
• I have read the [Contributor Guide] and followed the process outlined for submitting PRs.
• I have updated/added tests for ALL new/updated/fixed functionality.
• I have updated/added relevant documentation in docs and added dartdoc comments with ///.
• I have updated/added relevant examples in examples.

Breaking Change

• Yes, this is a breaking change.
• No, this is not a breaking change.

Related Issues

Fixes #1107

[spydon]

@st-pasha didn't you make a function like this once? But for Radiance maybe? I think you had another name for it if I remember correctly.

[spydon]

Found it, #1107 should be done before, or together with this

[ufrshubham]

Okay, now I am confused, or maybe my understanding of this new property is wrong😅. In any application dealing with transformations, angles are always w.r.t something. Just like how position is w.r.t to a origin. In most cases angle=0 implies a vector pointing up. Looking at how angle works in Flame as well, this seems to be the case. So following that logic, my understanding of angularOffset was that it is just to help orient the component in the desired direction.

For example, if a sprite is pointing downwards (as shown in the image), angle=0 implies the default orientation of the sprite (which in this case is, pointing down).

But with the help of the angularOffset, we are trying to allow users to offset the rotation by whatever angle they want. So if they want the angle=0 to mean that the sprite points up, they can just set the angularOffset to -pi/2 or pi/2. That is the reason why I applied the angularOffset to transform.angle in constructor, getter and setter.

I am not able to understand how this can be achieved without actually changing angle of the component.😅

[spydon]

The angle will be in regards to the angulaOffset, but you don't have to do canvas transformations to achieve that, because the sprite is already rotated in that direction.

So if you have a sprite looking to the right and set angularOffset = pi/2 and angle = pi the sprite will look to the left, without having to add angularOffset to the transform. Does it make sense? :)

[ufrshubham]

Okay, I think I get what you mean conceptually. Will have to play around with the code to wrap my head around it. I'll make modifications to this PR accordingly. I'm marking this as draft till I get it working.

[spydon]

Almost there! Just two comments

[spydon]

It would be good with some docs for this and a tiny example in the examples directory (or an embedded example in the docs).

[ufrshubham]

It would be good with some docs for this and a tiny example in the examples directory (or an embedded example in the docs).

Here we go

LookAtExamples.mp4

[spydon]

Just some tiny things left!