Visual Interface

Unity Engine
1

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 :slight_smile:

2

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:

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

3

^ I simplified my reply above.

4

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.

3301785--256150--Chevrons.png
3301785--256150--Chevrons.png1000×100 3.8 KB

5

Hi,

You’ll want to scale the Canvas to the screen resolution. To do this, add a Canvas Scaler component to the Canvas GameObject.

6

I know I’m almost there and I’m missing a little something. But I can’t make it works correctly :face_with_spiral_eyes:

7

What’s not working correctly?

You might find these manual pages helpful: Canvas Scaler and Designing UI For Multiple Resolutions.

8

I finaly got almost exactly what I wanted.
Thank you very much for your help.

9

Glad to help!