IT数码 购物 网址 头条 软件 日历 阅读 图书馆
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
图片批量下载器
↓批量下载图片,美女图库↓
图片自动播放器
↓图片自动播放器↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁
 
   -> 移动开发 -> 鼠标悬停物体上时,出现一个跟随光标的标签 -> 正文阅读

[移动开发]鼠标悬停物体上时,出现一个跟随光标的标签

一、先看表现形式

请添加图片描述

主要形式:

  • 1、标签跟随光标移动
  • 2、pointer enter时,显示部件信息
  • 3、pointer exit时,隐藏标签

二、数据的组织

inspector上的数据配置表

    /// <summary>
    /// 房屋组件信息表:组成合院的组件:【照壁】、【走马转角楼】、【大门】、【山墙装饰】、【屋顶】......
    /// </summary>
    [Serializable]
    public class PartsInfo
    {
        /// <summary>
        /// 部件名字        
        /// </summary>
        [Header("部件名字")]
        [SerializeField]
        public string partsName;

        /// <summary>
        /// 部件root:用于绑定高亮脚本
        /// </summary>
        [Header("部件root:用于绑定高亮脚本")]
        [SerializeField]
        public Transform partsRoot;

        /// <summary>
        /// 部件的子物体:物体进入该零件,显示所属部件名字
        /// </summary>
        [Header("部件的子物体:物体进入该零件,显示所属部件名字")]
        [SerializeField]
        public List<GameObject> parts;
    }

    /// <summary>
    /// 房屋部件信息        
    /// </summary>  
    [Serializable]
    public class House
    {
        /// <summary>
        /// 房屋名字
        /// </summary>
        [Header("房屋名字")]
        [SerializeField]
        public string houseName;

        /// <summary>
        /// 房屋部件信息
        /// </summary>
        [Header("房屋部件信息")]
        [SerializeField]
        public List<PartsInfo> partsInfos;
    }

    /// <summary>
    /// 房屋信息
    /// </summary>
    [Header("房屋信息")]
    [SerializeField]
    public List<House> houses;

三、交互时的注意事项

  • 基本组件【EventTrigger】、【MeshCollider】(注意不是【BoxCollider】)
//添加组件——EventTrigger
if (obj.GetComponent<EventTrigger>() == null)
{
    obj.gameObject.AddComponent<EventTrigger>();
}

//添加Collider组件
if (obj.GetComponent<Collider>() == null)
{
    //obj.gameObject.AddComponent<BoxCollider>();
    obj.gameObject.AddComponent<MeshCollider>();
}
  • 光标进入时,显示信息标签
  //得着焦点
  obj.GetComponent<EventTrigger>().AddListener(EventTriggerType.PointerEnter, (PointerEventData eventData) =>
   {
       Debug.Log($"进入物体:{partName} {obj.name} {currentPart} {Time.realtimeSinceStartup}");
       pi.partsRoot.GetComponent<Highlighter>().tween = true;                       
       ShowTag.ShowNameTag(partName, true);                       
   });
  • 光标退出时,隐藏信息标签
 //失去焦点
 obj.GetComponent<EventTrigger>().AddListener(EventTriggerType.PointerExit, (PointerEventData eventData) =>
 {
     Debug.Log($"退出物体:{partName}  {obj.name} {currentPart} {Time.realtimeSinceStartup}");
     pi.partsRoot.GetComponent<Highlighter>().tween = false;                        
     ShowTag.ShowNameTag(partName, false);                    
 });
  • 标签图片随时跟随光标

/// <summary>
/// 显示建筑物部件的名字标签
/// </summary>
public class ShowTag : MonoBehaviour
{
   /// <summary>
   /// 标签图片包含Text组件  
   /// </summary>
   [Header("标签图片包含Text组件  ")]
   [SerializeField]
   public GameObject image;

   /// <summary>
   /// 图片跟随鼠标——开关
   ///     true:跟随
   ///     false:不跟随
   /// </summary>
   private bool dragOn;

   /// <summary>
   /// 外部调用的入口,在Start()里面初始化  
   /// </summary>
   public static Action<string, bool> ShowNameTag;

   private void Start()
   {
       ShowNameTag = (name, onOff) => 
       {
           dragOn = onOff;
           image.GetComponentInChildren<Text>().text = name;
           image.SetActive(onOff);
       };
   }

   // Update is called once per frame
   void Update()
   {
       if (dragOn)
       {
           Drag2dObjectViaMouse(image);
       }
   }

#if UNITY_EDITOR
   [ContextMenu("测试")]
#endif
   async void Test5()
   {
       ShowNameTag("赵四", true);
       await UniTask.Delay(TimeSpan.FromSeconds(5f));
       ShowNameTag("刘能", true);    
       await UniTask.Delay(TimeSpan.FromSeconds(5f));
       ShowNameTag("", false);
   }
}

四、总结

  • 1、规划好底层的数据:本例中关键数据为【部件:GameObject -> 名字:string】
  • 2、交互式的组件配置:
    • (1)主相机:Physics Raycaster,Highlighting Renderer
    • (2)物体:EventTrigger + PointerEnter + PointerExit,MeshCollider,Highlighter
    • (3)跟随光标的图片:切记需要把【RayCast Target】取消勾选,不然会挡住射线
  • 3、在Start()中动态绑定:
 // Start is called before the first frame update
    void Start()
    {
        #region      =============================普通初始化=============================
        currentPart = "";
        #endregion   =============================普通初始化=============================end

        #region      =============================事件绑定=============================
        //事件添加
        //    每中合院逐个处理
        houses.ForEach(house =>
        {
            //【照壁、坊、大门、走马转角楼】逐个处理
            house.partsInfos.ForEach(pi =>
            {
                var partName = pi.partsName;     //部件名称

                //添加高亮组件
                if(pi.partsRoot.gameObject.GetComponent<Highlighter>() == null)
                {
                    pi.partsRoot.gameObject.AddComponent<Highlighter>();                    
                }                

                //每个物体逐个处理——添加事件
                pi.parts.ForEach(obj =>
                {
                    //添加组件——EventTrigger
                    if (obj.GetComponent<EventTrigger>() == null)
                    {
                        obj.gameObject.AddComponent<EventTrigger>();
                    }

                    //添加Collider组件
                    if (obj.GetComponent<Collider>() == null)
                    {
                        //obj.gameObject.AddComponent<BoxCollider>();
                        obj.gameObject.AddComponent<MeshCollider>();
                    }

                    //得着焦点
                    obj.GetComponent<EventTrigger>().AddListener(EventTriggerType.PointerEnter, (PointerEventData eventData) =>
                    {
                        Debug.Log($"进入物体:{partName} {obj.name} {currentPart} {Time.realtimeSinceStartup}");
                        pi.partsRoot.GetComponent<Highlighter>().tween = true;                       
                        ShowTag.ShowNameTag(partName, true);                       
                    });

                    //失去焦点
                    obj.GetComponent<EventTrigger>().AddListener(EventTriggerType.PointerExit, (PointerEventData eventData) =>
                    {
                        Debug.Log($"退出物体:{partName}  {obj.name} {currentPart} {Time.realtimeSinceStartup}");
                        pi.partsRoot.GetComponent<Highlighter>().tween = false;                        
                        ShowTag.ShowNameTag(partName, false);                    
                    });
                });
            });
        });
        #endregion   =============================事件绑定=============================end
    }
  移动开发 最新文章
Vue3装载axios和element-ui
android adb cmd
【xcode】Xcode常用快捷键与技巧
Android开发中的线程池使用
Java 和 Android 的 Base64
Android 测试文字编码格式
微信小程序支付
安卓权限记录
知乎之自动养号
【Android Jetpack】DataStore
上一篇文章      下一篇文章      查看所有文章
加:2022-06-01 15:22:00  更:2022-06-01 15:22:56 
 
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁

360图书馆 购物 三丰科技 阅读网 日历 万年历 2024年11日历 -2024/11/25 0:39:35-

图片自动播放器
↓图片自动播放器↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
  网站联系: qq:121756557 email:121756557@qq.com  IT数码