Hello all, I would like to recreate the interface effect in the following video. I'm talking about the arrows that are pointing toward the mouse icon from the center of the screen when the ship turns. I'm not sure what would be the best way to do this so I'm in quest for advices
This requires a wee bit of scripting and math. On a screen space UI canvas, add an Image anchored to the center of the screen. For example, use these settings: Canvas Image Pos (0,0,0) Width=160, Height=40 Pivot X=0, Y=0.5 Source Image: (your chevron image) Then add a script to Image1. In Update(), set Image1's Z rotation to the angle between Vector3.left and the vector from the center of the screen to the mouse, and set the width to the mouse vector's magnitude: Spoiler Code (csharp): using UnityEngine; public class Aimer : MonoBehaviour { private RectTransform rectTransform; private void Awake() { rectTransform = GetComponent<RectTransform>(); } void Update() { var center = new Vector2(Screen.width / 2, Screen.height / 2); var mouseVector = new Vector2(center.x - Input.mousePosition.x, center.y - Input.mousePosition.y); var angle = Vector2.Angle(Vector2.left, mouseVector); if (Input.mousePosition.y < center.y) angle = -angle; rectTransform.localRotation = Quaternion.Euler(0, 0, angle); rectTransform.sizeDelta = new Vector2(mouseVector.magnitude, 40); } } Here's an example scene: Aimer_2017-11-24.unitypackage
Thank you. It works perfectly. I tried to do the same with an image (attached). The only thing I don't know how to do is scaling the sprite to the screen resolution.
Hi, You'll want to scale the Canvas to the screen resolution. To do this, add a Canvas Scaler component to the Canvas GameObject.
What's not working correctly? You might find these manual pages helpful: Canvas Scaler and Designing UI For Multiple Resolutions.