吃鸡上面的方向罗盘用UGUI实现

自从吃鸡游戏火了以后，本人也是经常玩，玩的时候发现上面的方向罗盘，滑来滑去的挺好玩的，玩着玩着就想怎么去实现这个功能，所以就有了这篇文章，用的是UGUI去做的，纯手工制作不喜勿喷。

首先，分析一下需求，上面的刻度是循环转的是0到360度，他是根据人物正前方的朝向，转动的，再者还有一个遮罩，图片上面的刻度到了边上是渐隐的，还有一个固定的标识在中间是不动的。

 

gradution_bg一张图片，然后给这张图片添加了组件mask，还有gradutionScroll脚本也是挂在上面的，gradution就是一张图片上面有材质如图再往下有个fixed，是一个固定的标，重点是gradution上面有一个用的unity内置的shader去实现的无限滚动，代码很简单

public class GradutionScroll : MonoBehaviour {
    public static GradutionScroll instance;
    private void Awake()
    {
        instance = this;
    }
    // Use this for initialization
    void Start () {
		
	}
	
	// Update is called once per frame
	void Update () {
		
	}
    public void SetPosition(float pos)
    {
        Image image = transform.Find("gradution").GetComponent<Image>();
//根据偏移量实现的无限滚动的效果，把传过来的的值除以360，之所以加个0.5f是因为偏移量的范围是0到1，加上0.5f，才正好是player面向正北方，也就是进去之后的默认方向，
        image.material.SetTextureOffset("_MainTex", new Vector2(pos / 360+0.5f, 0));
    }
}

 另外一个脚本调用，这个脚本挂在相机上面，大家测试时手动拉相机的旋转的y轴即可，本人的是有插件的只需获取y就可以了。

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

public class CameraCtrl : MonoBehaviour {
   
    // Use this for initialization
    void Start () {
    }
	
	// Update is called once per frame
	void Update () {
//获取主相机的y通过改变主相机的角度，来对应上面的刻度，把相机的角度传过去
        float gradution = Camera.main.transform.eulerAngles.y;
        GradutionScroll.instance.SetPosition(gradution);
        
	}

}

 最后一个就是遮罩效果了，这个效果的实现是在让美术做一个，带有通明通道的图片，这个图片做的和带有刻度的图片一样大，这个图片中间是透明的也就是显示的区域，靠近边缘的地方设置半透明，当带有刻度的图片移动到边缘时，就会一种渐隐效果。

大概就是这些，不喜勿喷，有兴趣的同学，欢迎留言交流