Unity_2D游戏_对屏幕外物体箭头指示

最新推荐文章于 2023-12-05 09:26:53 发布
最新推荐文章于 2023-12-05 09:26:53 发布
阅读量1.7k 收藏 18
点赞数 5
分类专栏： 学Unity
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41598184/article/details/110715121
版权

先给出效果
箭头指示的效果

^ ^

基本思路

箭头指示由两点组成，首先是定位，其次是旋转。旋转不是问题，所以主要思考如何定位。
最直接想到的思路：想象屏幕外物体和屏幕中心有一条连线，然后这条交点，就是定位点了。所以只需确认这条连线与屏幕矩形的哪一条边相交，再求这个定位点在连线上的比例。
初中学的相似三角形就可以解决它了。
直观思路

三种方法

四边对应的四区域判定

最早想到的是，直接根据物体的坐标来判断边。
当物体在区域外时，继续以下判断：
[屏幕左下角是(0,0)]
当y在0~height[屏幕高度]之间时，看x是小于0还是大于width[屏幕宽度]，这就两个区域了。
当x在0~width之间时，看y是小于0还是大于height。
四个角咋办？就被我漏了，只能直接定位到角落。

M1

可以注意到，在角落有一个很突兀的跳动。死角

代码：

    /// <summary>
    /// 得到【屏幕外物体位置到屏幕中心的连线】与屏幕边界的交点，无法过渡四角。
    /// </summary>
    /// <param name="x">物体X坐标</param>
    /// <param name="y">物体Y坐标</param>
    /// <param name="width">屏幕宽度</param>
    /// <param name="height">屏幕高度</param>
    /// <returns></returns>
    private static Vector2 CalculateIntersection(float x, float y, float width, float height)
    {

        Vector2 position = new Vector2();
        if (CheckInView(x, y, width, height))
        {
            position.x = x;
            position.y = y;
        }

        if (0 <= y && y <= height)
        {
            if (x < 0)
            {
                position.x = 0;
                position.y = height / 2 + (y - (height / 2)) * (width / 2) / (width / 2 - x);
            }
            else if (x > width)
            {
                position.x = width;
                position.y = height / 2 + (y - (height / 2)) * (width / 2) / (x - width / 2);
            }

        }
        else if (0 <= x && x <= width)
        {

            if (y < 0)
            {
                position.y = 0;
                position.x = width / 2 + (x - (width / 2)) * (height / 2) / (height / 2 - y);
            }
            else if (y > height)
            {
                position.y = height;
                position.x = width / 2 + (x - (width / 2)) * (height / 2) / (y - height / 2);
            }
        }
        else//四角当如何？
        {
            position.x = x < 0 ? 0 : width;
            position.y = y < 0 ? 0 : height;
        }

        return position;
    }

★横轴纵轴对角线八分区域★

那么就需要处理好四个角。用高宽比得到对角线斜率之后[camera自带的属性aspect可以提供宽高比]，用物体和中心连线的斜率与之对比，那么就可以进一步区分。
当然，使用的位置赋值公式还是没变。
M2
这种方法效果是最好的，相当的丝滑。
看看现在的角落：
丝滑
代码：

 /// <summary>
    /// 得到【屏幕外物体位置到屏幕中心的连线】与屏幕边界的交点，无死角。
    /// </summary>
    /// <param name="x">物体X坐标</param>
    /// <param name="y">物体Y坐标</param>
    /// <param name="width">屏幕宽度</param>
    /// <param name="height">屏幕高度</param>
    /// <returns></returns>
    private static Vector2 CalculateIntersectionBetter(float x, float y, float width, float height)
    {
        Vector2 position = new Vector2();
        if (CheckInView(x, y, width, height))
        {
            position.x = x;
            position.y = y;

            return position;
        }

        float aspectRatio = height / width;
        float relativeY = y - height / 2;
        float relativeX = x - width / 2;
        float k = relativeY / CommonParameter.GetSafeFloatDivisor(relativeX);//GetSafeFloatDivisor ： return value = value == 0 ? 0.01f : value;

        /*
         * 
         *                    |
         *           2        |        3
         *                    |
         *                    |
         *                    |
         *    1               |               4
         *                    |
         *                    |
         *————————————————————|————————————————————h/2
         *                    |
         *                    |
         *    8               |               5
         *                    |
         *                    |
         *                    |
         *           7        |        6
         *                    |
         *                   w/2
         * 
         *
         * 8=1  2=3  4=5  6=7
         */

        if (y > height / 2)
        {
            if (x < width / 2)
            {
                if (-aspectRatio < k)   //1
                {
                    position.x = 0;
                    position.y = height / 2 + (y - (height / 2)) * (width / 2) / (width / 2 - x);
                }
                else                    //2
                {
                    position.x = width / 2 + (x - (width / 2)) * (height / 2) / (y - height / 2);
                    position.y = height;
                }
            }
            else
            {
                if (aspectRatio < k)    //3
                {
                    position.x = width / 2 + (x - (width / 2)) * (height / 2) / (y - height / 2);
                    position.y = height;
                }
                else                    //4
                {
                    position.x = width;
                    position.y = height / 2 + (y - (height / 2)) * (width / 2) / (x - width / 2);
                }
            }
        }
        else
        {
            if (x > width / 2)
            {
                if (-aspectRatio < k)   //5
                {
                    position.x = width;
                    position.y = height / 2 + (y - (height / 2)) * (width / 2) / (x - width / 2);
                }
                else                    //6
                {
                    position.y = 0;
                    position.x = width / 2 + (x - (width / 2)) * (height / 2) / (height / 2 - y);
                }
            }
            else
            {
                if (aspectRatio < k)    //7
                {
                    position.y = 0;
                    position.x = width / 2 + (x - (width / 2)) * (height / 2) / (height / 2 - y);
                }
                else                    //8
                {
                    position.x = 0;
                    position.y = height / 2 + (y - (height / 2)) * (width / 2) / (width / 2 - x);
                }
            }
        }

        return position;
    }

其实仍然是四区域的四种赋值，但是因为斜率的符号问题…以我的水平只能用这种粗暴的方法了。
要套三层if else，其实我是拒绝的。可惜没水平做到以不降低效率的方式简化代码，这里层层二分已经很快了。

根据角度与屏幕矩形取比例

另辟蹊径：我想着，屏幕这四周这个矩形的周长是固定的，那么按照角度来定位到矩形的不同位置，是不是也可以呢？
M3
然后我写了一下

        float C = 2 * (width + height);
        float angle = Vector3.SignedAngle(Vector3.right, direction, Vector3.forward);
        float ratio = angle / 360f;
        float L = ratio * C;

效果是这样的：
方式3
整体效果看起来没大问题，只是箭头定位点没那么准。角度转换到线段上，这个变化并不是很平滑。
代码：

/// <summary>
    /// 利用物体位置所在角度和屏幕周长比例，
    /// 得到【屏幕外物体位置到屏幕中心的连线】
    /// 与屏幕边界的交点
    /// </summary>
    /// <param name="x">物体X坐标</param>
    /// <param name="y">物体Y坐标</param>
    /// <param name="width">屏幕宽度</param>
    /// <param name="height">屏幕高度</param>
    /// 有一些误差
    private static Vector2 CalculateIntersectionByPerimeter(float x, float y, float width, float height)
    {
        Vector2 position = new Vector2();
        Vector3 direction = new Vector2(x - width / 2, y - height / 2).normalized;


        /*
        * ▷ w + h / 2        2             ▷ h / 2 
        *   |————————————————|————————————————|
        *   |                |                |
        *   |               +90               |
        *   |                |                |
        *  1|        +       |       +        |
        *   |                |                |
        *   |                |                |
        *   |                |                |
        * ——|——————180———————|————————0———————|————h/2 3  
        *   |                |                |
        *   |                |                |
        *   |                |                |
        *  5|       -        |       -        |
        *   |                |                |
        *   |               -90               |
        *   |                |                |
        *   |————————————————|————————————————|
        * ▷ -h / 2 - w        w/2           ▷ -h / 2 
        *  0,0               4
        *
        */

        float C = 2 * (width + height);
        //AXIS做大拇指，四指从from转到to，其实就是叉乘。  这是左手系。 正的Z是向里的。  
        float angle = Vector3.SignedAngle(Vector3.right, direction, Vector3.forward);
        float ratio = angle / 360f;
        float L = ratio * C;

        if (width + height / 2 <= L && L < C / 2)            //1
        {
            position.x = 0;
            position.y = C / 2 - L + height / 2;
        }
        else if (height / 2 <= L && L < width + height / 2)  //2
        {
            position.x = width + height / 2 - L;
            position.y = height;
        }
        else if (-height / 2 <= L && L < height / 2)         //3
        {
            position.x = width;
            position.y = L + height / 2;
        }
        else if (-height / 2 - width <= L && L < -height / 2)//4
        {
            position.x = L + width + height / 2;
            position.y = 0;
        }
        else if (-C / 2 <= L && L < -height / 2 - width)     //5
        {
            position.x = 0;
            position.y = -C / 2 - L + height / 2;
        }

        return position; ;
    }

下面是整个类的代码，因为篇幅问题，上面的三个方法就不再重复了。

using UnityEngine;
using UnityEngine.UI;

public class DrawArrowForOutOfSight : MonoBehaviour
{
    public Transform arrow;
    public Transform root;
    private static Transform s_arrow;
    private static Transform canvasTransform;
     private static Transform arrowObject;

    private void Awake()
    {
        s_arrow = Component.FindObjectOfType<DrawArrowForOutOfSight>().arrow;
        canvasTransform = Component.FindObjectOfType<DrawArrowForOutOfSight>().root;
    }

    private void FixedUpdate()
    {
        Vector3 objectPosition = Camera.main.ViewportToWorldPoint
         (
            new Vector3(Input.mousePosition.x / Screen.width, Input.mousePosition.y / Screen.height, 0f)
         );

        arrowObject= DrawArrow(arrowObject, objectPosition);

    }

    /// <summary>
    /// 在Canvas设置指向屏幕外部物体的箭头，返回此箭头对象。
    /// </summary>
    /// <param name="arrowObject">箭头对象</param>
    /// <param name="objectPosition">目标物体的位置</param>
    public static Transform DrawArrow(Transform arrowObject, Vector3 objectPosition)
    {
        Vector2 objectScreenPoint = Camera.main.WorldToScreenPoint(objectPosition);

        if (!CheckInView(objectScreenPoint.x, objectScreenPoint.y, Screen.width, Screen.height))
        {
	        Vector2 arrowPosition = CalculateIntersectionBetter(objectScreenPoint.x, objectScreenPoint.y, Screen.width, Screen.height);
            Vector3 direction = (arrowPosition - new Vector2(Screen.width / 2, Screen.height / 2)).normalized;

            if (arrowObject == null)
            {
                arrowObject = Instantiate(s_arrow, arrowPosition, Quaternion.AngleAxis(Vector3.SignedAngle(Vector3.up, direction, Vector3.forward), Vector3.forward), canvasTransform);
            }
            else
            {
                arrowObject.gameObject.SetActive(true);
                arrowObject.position = arrowPosition;
                arrowObject.rotation = Quaternion.AngleAxis(Vector3.SignedAngle(Vector3.up, direction, Vector3.forward), Vector3.forward);
            }
        }
        else if (arrowObject != null)
        {
            arrowObject.gameObject.SetActive(false);
        }

        return arrowObject;
    }

    public static bool SetArrowColor(Transform arrowObject, Color color)
    {
        if (arrowObject == null) return false;

        arrowObject.GetComponent<Image>().color = color;

        return true;
    }

    /// <summary>
    /// 确认目标是否在视野内
    /// </summary>
    /// <param name="x">物体X坐标</param>
    /// <param name="y">物体Y坐标</param>
    /// <param name="width">屏幕宽度</param>
    /// <param name="height">屏幕高度</param>
    private static bool CheckInView(float x, float y, float width, float height)
    {
        return x > 0 && x < width && y > 0 && y < height;
    }
     private static Vector2 CalculateIntersection(float x, float y, float width, float height){}
     private static Vector2 CalculateIntersectionBetter(float x, float y, float width, float height){}
     private static Vector2 CalculateIntersectionByPerimeter(float x, float y, float width, float height){}
}

这里的FixedUpdate是为了用鼠标指针来演示。

使用的时候，需求对象类内直接调用静态方法，传入信息就可以了，但对象类要多持有一个Transform变量。如：

public class Planet : CelestialBodyBase
{
    private Transform arrowObject;
    private bool isArrowUpdated;
     void OnEnable()
    {
        isArrowUpdated = false;
    }
   void FixedUpdate()
    {
        arrowObject = DrawArrowForOutOfSight.DrawArrow(arrowObject, transform.position);
        if (!isArrowUpdated)
        {
            isArrowUpdated = DrawArrowForOutOfSight.SetArrowColor(arrowObject, gameObject.GetComponent<SpriteRenderer>().color);
        }
    }

我是把这个类的脚本挂到场景object上，然后放一个箭头预制体进去。
ArrowRoot是一个空物体，以免Hierarchy太乱。
挂载1

若无明日
关注
  • 5
    点赞
  • 踩
  • 18
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
offscreen_markers:Unity 3D游戏对象的屏幕外指示器
04-25
屏幕外标记 单个脚本中Unity 3D游戏对象的屏幕外指示器 用法 将OffscreenMarker组件附加到要跟踪的游戏对象上，并在其中填充纹理。 跟踪的对象由自动附加到主摄像头并在OnGUI（）上打钩的组件注册和管理。 视频： ：
Unity3d C#实现UGUI上箭头指示3D地图物体位置功能源码
02-09
本项目源码着重展示了如何利用C#编程语言和UGUI来实现在3D场景中，当物体位于玩家视野之外时，在屏幕上显示指示箭头的功能。这在制作导航系统、指示目标位置或者增强用户体验方面具有很高的实用性。 首先，我们来看...
Unity悬浮指针在屏幕边缘或者固定移动线路指示屏幕外目标物体
lazy_lady的博客
06-12 1257
参考文章链接： https://www.jianshu.com/p/ecbfe9c88fb2 https://blog.csdn.net/Nightmare_ak/article/details/77917438
Unity屏幕外怪物指示器/FairyGUI屏幕边缘指示器。笔记
AlanJoe_的博客
08-12 810
回顾下初中三角函数 ** 1，tan(α的弧度) = 对边长b / 领边长a 2，弧度 = 角度 * PI / 180 3，根据Cos,就可以算出CosMax,和CosMin,角度，知道落在什么方位上，如图下图分为8个方位，顺时针** using System.Collections; using System.Collections.Generic; using UnityEngine; using UnityEngine.UI; public class UIArrow { // 角度转屏幕边
Unity 抬头显示 屏幕外跟踪标记
一点没什么技术含量的经验分享
04-10 670
游戏中经常会需要实现屏幕外标记指示的功能，这样能方便玩家快速定位目标方位，尤其在多人网络游戏中出现（守望先锋，彩虹六号，Apex英雄等等），现在用Unity快速实现
关于屏幕外物体在屏幕边缘的指示功能实现
xiao_shixiong的博客
07-11 701
屏幕外物体指示
Unity实现UI在屏幕边缘跟随并指向视野外敌人
lcy的博客
11-29 5321
最终效果 实现 心急的小伙伴可以直接跳到文章末尾查看最终代码，如果有问题再来看下思路。 首先我们需要确定实现思路。我想到的方案是将玩家和敌人的世界坐标转换为UI坐标，然后求玩家和敌人坐标的线段与Canvas边界的交点即为箭头坐标。 下面是求出交点的代码。 using System.Collections; using System.Collections.Generic; using UnityEngine; using UnityEngine.UI; public class FindTest : M
Unity3D常用游戏功能复刻：屏幕外目标UI导航效果，寻路提示，指向屏幕外敌人位置
m0_72922928的博客
11-02 1131
本文实现了屏幕外目标UI追踪提示的效果，同时采用椭圆形的轨迹提高追踪的视觉效果
xxl.zip_BQR_u3d 消消乐_unity3D 游戏_消消乐
09-21
《xxl.zip_BQR_u3d 消消乐_unity3D 游戏_消消乐》是一款基于Unity3D引擎开发的休闲消除类游戏，旨在帮助初学者掌握Unity3D的基本操作和游戏开发流程。在这个项目中，你将深入理解如何使用Unity3D构建一款功能完备的...
feiji.zip_unity_unity 射击_unity射击_unity游戏_unity飞机
09-23
《Unity射击游戏开发详解——基于"feiji.zip"的Unity飞机大战实例》 Unity是一款强大的跨平台游戏开发引擎，被广泛应用于2D、3D游戏的制作，尤其在射击类游戏中，Unity以其高效的性能和易用性备受开发者青睐。本篇...
UnityVR项目中常用的箭头指引功能demo
03-14
材质球贴图滚动
unity箭头路径指示器插件Procedural Indicators 1.3
05-17
程序指标是用于创建游戏3D UI的包。目前它支持程序生成的箭头和选择指标。使用此包，您可以生成各种3D箭头。使用可编辑路径（点阵列，线段，贝塞尔曲线）定义箭头的路径，然后您可以沿该路径更改大小，旋转，颜色，透明度和形状。 程序指示器包还支持具有断开路径的箭头和由自定义网格（球体，框，网格）构成的箭头。您可以使用用于主路径的类似选项在路径的两端定义箭头提示。 程序选择指示器使用户能够定义对象周围的选择路径（正常，破碎或由形状组成）。选择指示器路径可以投射到地面或障碍物层中指定的任何其他对象。 网格指示器绘制3D线网格，网格网格指示器将网格切割成可以着色的3D网格单元格。 非常适合策略，赛车和益智游戏或fps教程级别/目标。
unity画线插件
04-25
unity动态画波动图，可以实现类似心电图之类的波动图
SnakeEatFood.zip_unity 小游戏_unity游戏_贪吃蛇 Unity_贪吃蛇unity
09-19
2. **Java与Unity的交互**：项目中的游戏逻辑是用Java编写的，这涉及到Unity的外部脚本调用。Unity支持通过C#脚本来控制游戏逻辑，但通过插件或者自定义解决方案，也可以实现Java代码的嵌入。开发者可能使用了Unity...
【Unity】实现箭头追踪效果，将2D箭头沿着屏幕边缘指向3D模型
梅思源的LOG
12-12 3181
只需要一个脚本，就可以实现标题所述的效果 废话不多说，直接上脚本 using System.Collections; using UnityEngine; public class UIGuidManager : MonoBehaviour { public Transform arrows; //2d的箭头拖在这里 Transform target; Vector3 p...
【0909】unity作业：2d箭头跟随指引物体方向，箭头始终在屏幕内。
weixin_43996171的博客
05-22 2978
【0909】unity作业：2d箭头跟随指引物体方向，箭头始终在屏幕内。 1、对需要用到的箭头进行抠图： 上课老师说用Sprite Editor不过那个好像师 欢迎使用Markdown编辑器 你好！ 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Markdown编辑器, 可以仔细阅读这篇文章，了解一下Markdown的基本语法知识。 新的改变 我们对Markdow...
Unity3d C#实现UGUI上箭头指示3D地图物体位置功能（含源码）
qq_33789001的博客
02-09 4841
前言 之前我们实现了“UGUI面板跟随标注3D模型功能”，效果如下图： 发现要是物体都移出视野外后提示都会消失，在需要重点提示的对象上，如果不在视野内有指示效果会更好，于是本文的实现的功能就很有必要，效果如下： 实现思路 要实现在屏幕内的动态提示，只需要实现两个重要步骤： 1计算出提示UI在屏幕空间内的位置； 2计算出箭头指向的方向。 流程图如下： 实现过程 本案例是在这两篇文章的基础上开发的： Unity3d C# 实现UGUI面板跟随标注3D模型功能（含源码） Unity3d C# 实现纯鼠标平滑
Unity3D中实现箭头指向目标点的效果(shader)
最新发布
心疼你的一切博客
12-05 1712
大家好，我是心疼你的一切，不定时更新Unity开发技巧，觉得有用记得一键三连哦。提示：以下是本篇文章正文内容，下面案例可供参考不定时更新Unity开发技巧，觉得有用记得一键三连哦。
Unity新手引导（圆形指引、矩形指引）
weixin_43282348的博客
01-19 2744
Unity新手引导（圆形指引、矩形指引） 声明：中心镂空为圆形或矩形，增加指引动画，基于UGUI 一、Shader 建立两个shader，命名为RectGuide、CircleGuide。 RectGuide Shader "UI/RectGuide" { Properties { [PerRendererData] _MainTex("Sprite Texture", 2D) = "white" {} _Color("Tint", Color) = (1
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值