吃鸡方向导航功能制作

吃鸡方向导航功能制作

现在吃鸡游戏大火，吃鸡已经不能是一个游戏了，俨然已经变为了一种游戏玩法游戏机制，类似之前的MOBA，
各种游戏模式与吃鸡的结合，在当下已经变成了一种趋势。吃鸡中的方向导航可能接下来项目中会用到，所以提前研究学习一下。

实际游戏案例展示

绝地求生方向导航展示

Apex方向导航展示

Apex是刚出的现象级吃鸡EA端游大作，热度超高。

需求分析

吃鸡的导航栏，首先我们肯定需要判断玩家自身的朝向，同时顶部的HUD需要根据玩家朝向进行更新，一般正中心用一个小三角标识。

思路设计

功能的实现大体上分为两步，
第一步：如何去设计头顶的方向刻度展示
第二部：如何去同步刷新方向刻度朝向
获取人物朝向的方式是一致的，直接利用Unity的API获取人物在世界空间下Y轴的欧拉角即可。
伪代码

this.m_Target.transform.rotation.eulerAngles.y;

这里的重点是如何设计头顶的方向刻度指示显示，
这里介绍两种方式，
第一种是直接用图片来显示，提前让美术做好带有刻度和标识的方向刻度图片
类似如下

图片的方式只需要利用Unity的Rawimage组件 然后通过控制UV来进行图片的偏移显示

第二种方式是使用untiy的UGUI来进行拼接显示方向刻度和标识，制作可能会稍显麻烦，需求多的话可以自行使用脚本来创建。


这种方式的显示需要利用遮罩+布局组件 然后控制X方向的偏移来进行显示
显示的时候需要自己进行相关的函数映射。

两种方式各有优劣，
第一种制作简单方便，但是比较固定，要更换只能更换图片。
第二种后期可扩展性强，比如皮肤更换，样式设计更改等，可以任意修改单个刻度或者标识的样式等。

其他的小的地方就比较容易了，中间的箭头指示，或者类似Apex的具体的角度朝向显示，固定放在最中间的位置即可。

核心代码

代码的关键主要是同步角度朝向 Demo中的玩家为一个Cube自行在场景中调整角度，查看方向导航变化。

   //第一种
	void Update () {
        UpdateCompassBar();
    }

    public void UpdateCompassBar()
    {
        // set compass bar texture coordinates
        this.Compass.uvRect = new Rect((m_Target.rotation.eulerAngles.y / 360f) - .5f, 0f, 1f, 1f);
    }
    //第二种 
  void Update()
    {
        if (this.m_Target == null || this.m_ContentRect == null)
            return;

        // 0 to 360 heading
        float compassHeading = this.m_Target.transform.rotation.eulerAngles.y;

        float numberOfPixelsNorthToNorth = this.headingRectWidth * 4f;
        float rationAngleToPixel = numberOfPixelsNorthToNorth / 360f;

        this.m_ContentRect.anchoredPosition = new Vector2(((compassHeading * rationAngleToPixel) + this.headingRectWidth) * -1f, 0f);   
    }
    

Demo案例

Unity5.6.6打开
Github
https://github.com/Silence-man/BlogFiles/blob/master/HUDNavTest.rar
百度云
链接: https://pan.baidu.com/s/1rKZJrzH7-4zMoqguYxxzKA 提取码: bg9p