吃鸡方向导航功能制作

吃鸡方向导航功能制作

现在吃鸡游戏大火,吃鸡已经不能是一个游戏了,俨然已经变为了一种游戏玩法游戏机制,类似之前的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

已标记关键词 清除标记
©️2020 CSDN 皮肤主题: 技术黑板 设计师:CSDN官方博客 返回首页