Unity——指針跟隨鼠標旋轉,GTA武器菜單選擇等效果實現

GTA武器菜單選擇

簡單實現這種效果

Demo的效果

以下是主要代碼

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;

public class Menu : MonoBehaviour {

    public Image[] items;

    public Color nomorlColor;
    public Color heightColor;

    int oldItemIndex = 0;

	// Use this for initialization
	void Start () {
		
	}
	
	// Update is called once per frame
	void Update () {
        int currentItemindex = GetItemIndex();
        //設置高亮,並將其他item置回默認樣式
        if (oldItemIndex != currentItemindex)
        {
            items[currentItemindex].color = heightColor;
            items[oldItemIndex].color = nomorlColor;
            oldItemIndex = currentItemindex;
        }

        if (Input.GetMouseButtonDown(0))
        {
           //點擊左鍵確認選擇,這裏未做處理
        }
	}

    //根據角度獲得當前鼠標所處的image數組的index
    int GetItemIndex()
    {
        //V是鼠標相對屏幕大小以中心點原點的2維向量
        Vector2 v = new Vector2(Input.mousePosition.x / Screen.width - 0.5f, Input.mousePosition.y / Screen.height - 0.5f);
        //f是(相對屏幕大小以中心點原點的座標系)(0,1)與v的角度
        float f = Mathf.Atan2(v.x, v.y) * Mathf.Rad2Deg + 180;
        //根據f返回index
        return ((int)(f / (360/items.Length)));
    }

}

指針跟隨鼠標旋轉

效果1

效果2

這裏可以看到,旋轉的中心不再侷限於屏幕中心的位置了,而是可以以任意位置爲中心進行旋轉.

需要注意的是

Canvas需要設置爲overlay模式,其他模式下實現方式需要大家自己研究,這裏只能使用overlay模式
以下是主要代碼

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;

public class RotateNeedle : MonoBehaviour {

    public Transform center;
    public Transform needle;

    public Color heightColor;
    private Color nomorlColor = Color.white;

    private Image needleImg;
    private bool isRotate = false;

	void Start () {
        needleImg = needle.GetComponent<Image>();
        nomorlColor = needleImg.color;
    }
	
	void Update () {
        if (Input.GetMouseButtonDown(0))
        {
            isRotate = true;
        }
        if (Input.GetMouseButtonUp(0))
        {
            isRotate = false;
            needleImg.color = nomorlColor;
        }
        if (isRotate)
        {
            SetNeedleAngle(needle, center);
            needleImg.color = heightColor;
        }
    }

    void SetNeedleAngle(Transform _needle, Transform _center)
    {
        if (_needle == null || _center == null)
        {
            return;
        }
        var centerX = _center.transform.position.x;
        var centerY = _center.transform.position.y;

        var centerScreenPos = Camera.main.WorldToScreenPoint(center.transform.position);
        var mouseScreenPos = Camera.main.WorldToScreenPoint(Input.mousePosition);
        var angle = new Vector3(mouseScreenPos.x - centerScreenPos.x, mouseScreenPos.y - centerScreenPos.y, 0);
        var f = Mathf.Atan2(angle.x, angle.y) * Mathf.Rad2Deg;
        _needle.eulerAngles = Vector3.back* f;
    }
}

謝謝大家的點贊,收藏,評論,這些都是點點星光,似的前方的路,不再孤獨

碼雲下載地址
百度網盤下載地址 提取碼: r8me