I'm trying to make a horizontal compass. The compass is made up of UI components: panel (with mask), with a child UI Image (the compass image).
Here is the compass from Fallout:
As you turn around, so does the compass. I want to move the child based on the rotation of the player. I want to move the child by using transform.position so that any child components will also move (i.e way points).
I found some code on the Unity forum. I got it to kinda work, however when it wraps around, it doesn't wrap to the correct position. See GIF. When I approach the South rotation, it wraps but not to the correct position. The compass image and code can be found here.
I've made sure that the image is native size, and also tried various values in the "numberOfPixelsNorthToNorth" property.

using UnityEngine; using UnityEngine.UI; using System.Collections; public class CompassHandler : MonoBehaviour { public float numberOfPixelsNorthToNorth; public GameObject target; Vector3 startPosition; float rationAngleToPixel; void Start(){ startPosition = transform.position; rationAngleToPixel = numberOfPixelsNorthToNorth / 360f; } void Update (){ Vector3 perp = Vector3.Cross(Vector3.forward, target.transform.forward); float dir = Vector3.Dot(perp, Vector3.up); transform.position = startPosition + (new Vector3(Vector3.Angle(target.transform.forward, Vector3.forward) * Mathf.Sign(dir) * rationAngleToPixel, 0, 0)); } } I don't really understand how the code works in the Update method, as my Math knowledge is pretty poor. I looked up the methods used, but still was clueless. So I can't work out how to solve it.
I would like to understand what is going on in the Update, but if that is too much, can anyone help fix the issue that is seen in the GIF?
Edit: Here is a GIF using the accepted solution.

