【UGUI】背包的交互01(道具信息跟随鼠标+道具信息面板显示)

详细程序逻辑过程

  1. 初始化物品栏

    • 在 Awake 方法中,通过标签找到提示框和信息面板。

    • 循环生成10个背包格子,并为每个格子设置图标和名称。

    • 为每个格子添加 UInterMaager232 脚本,以便处理交互事件。

  2. 关闭提示框和信息面板

    • 在 Start 方法中,如果提示框和信息面板在启动时是激活状态,则关闭它们。

  3. 鼠标滑入道具显示提示框

    • 在 OnPointerEnter 方法中,调用 MoveTip 方法将提示框移动到鼠标位置。

    • 如果提示框未激活,则激活它。

  4. 鼠标滑出道具关闭提示框

    • 在 OnPointerExit 方法中,如果提示框激活,则关闭它。

  5. 鼠标点击道具显示信息面板

    • 在 OnPointerClick 方法中,关闭提示框。

    • 切换信息面板的显示状态。

  6. 移动提示框到鼠标位置

    • 在 MoveTip 方法中,获取提示框的 RectTransform 组件。

    • 获取鼠标的屏幕坐标,并将其转换为画布坐标。

    • 计算提示框在鼠标右下角的偏移量,并设置提示框的位置。

通过以上步骤,我们实现了一个简单的背包系统,并详细讲解了每个步骤的逻辑过程。

  1. 初始化物品栏:在游戏启动时,自动生成一些初始物品。

  2. 拾取物体到背包:暂时不实现,但可以扩展。

  3. 鼠标放在道具上展示道具信息:当鼠标滑入道具时,显示道具的提示框。

  4. 鼠标点击道具,展示道具信息:当鼠标点击道具时,显示道具的详细信息面板。

我们将通过两个脚本来实现这些功能:InventoryManager 和 UInterMaager232

1. InventoryManager 脚本

InventoryManager 脚本负责初始化背包界面,并在游戏启动时生成一些初始物品。

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;
using TMPro;public class InventoryManager : MonoBehaviour
{// 背包格子的模板public GameObject GridMuban;// 背包格子的父对象public Transform GridParentTrans;// 道具的图标public Sprite[] oneIamge = new Sprite[10];// 道具的名称public string[] Name = new string[10];// 提示框和信息面板[SerializeField]public static GameObject OneTip;public static GameObject InfoRect;private void Awake(){// 通过标签找到提示框和信息面板OneTip = GameObject.FindGameObjectWithTag("OneTip");InfoRect = GameObject.FindGameObjectWithTag("InfoRect");// 初始化系统数据for (int i = 0; i < 10; i++){// 克隆一个背包格子GameObject TempCloneGrid = GameObject.Instantiate(GridMuban, GridParentTrans);// 修改道具的图标TempCloneGrid.transform.GetChild(0).GetChild(0).GetComponent<Image>().sprite = oneIamge[i];// 修改道具的名字TempCloneGrid.transform.GetChild(1).GetChild(0).GetComponent<TextMeshProUGUI>().text = Name[i];// 为克隆的格子添加交互管理脚本TempCloneGrid.AddComponent<UInterMaager232>();// 设置提示框的文本为当前道具的名称【下次更新】}}private void Start(){// 如果提示框和信息面板在启动时是激活状态,则关闭它们if (OneTip.activeSelf){OneTip.SetActive(false);}if (InfoRect.activeSelf){InfoRect.SetActive(false);}}
}

2. UInterMaager232 脚本

UInterMaager232 脚本负责处理道具的交互事件,包括鼠标滑入、点击和滑出事件。

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.EventSystems;public class UInterMaager232 : MonoBehaviour, IPointerEnterHandler, IPointerClickHandler, IPointerExitHandler
{// 当鼠标点击道具时触发public void OnPointerClick(PointerEventData eventData){// 关闭提示框InventoryManager.OneTip.SetActive(false);Debug.Log("鼠标点击了");// 切换信息面板的显示状态if (InventoryManager.InfoRect.activeSelf){InventoryManager.InfoRect.SetActive(false);}else{InventoryManager.InfoRect.SetActive(true);}}// 当鼠标滑入道具时触发public void OnPointerEnter(PointerEventData eventData){Debug.Log("鼠标滑入了");// 移动提示框到鼠标位置MoveTip();// 如果提示框未激活,则激活它if (!InventoryManager.OneTip.activeSelf){InventoryManager.OneTip.SetActive(true);}}// 当鼠标滑出道具时触发public void OnPointerExit(PointerEventData eventData){// 如果提示框激活,则关闭它if (InventoryManager.OneTip.activeSelf){InventoryManager.OneTip.SetActive(false);}}// 移动提示框到鼠标位置void MoveTip(){// 获取提示框的RectTransformRectTransform TipObject = InventoryManager.OneTip.GetComponent<RectTransform>();// 获取鼠标在屏幕上的位置Vector3 mousePosition = Input.mousePosition;// 将屏幕坐标转换为画布坐标Vector2 canvasPosition;RectTransformUtility.ScreenPointToLocalPointInRectangle(TipObject.parent as RectTransform, // 使用父对象的RectTransformmousePosition,null, // 如果Canvas是Overlay模式,可以传nullout canvasPosition);// 计算对象在鼠标右下角的位置Vector2 offset = new Vector2(TipObject.rect.width / 2, -TipObject.rect.height / 2f); // 右下角偏移// 设置对象的位置TipObject.localPosition = canvasPosition + offset;}
}

详细解释

InventoryManager 脚本
  1. 变量声明

    • GridMuban:背包格子的模板。

    • GridParentTrans:背包格子的父对象。

    • oneIamge:道具的图标数组。

    • Name:道具的名称数组。

    • OneTip 和 InfoRect:提示框和信息面板的静态引用。

  2. Awake 方法

    • 通过标签找到提示框和信息面板。

    • 初始化背包界面,生成10个道具格子,并设置每个格子的图标和名称。

    • 为每个格子添加 UInterMaager232 脚本,以便处理交互事件。

  3. Start 方法

    • 如果提示框和信息面板在启动时是激活状态,则关闭它们。

UInterMaager232 脚本
  1. 接口实现

    • IPointerEnterHandler:处理鼠标滑入事件。

    • IPointerClickHandler:处理鼠标点击事件。

    • IPointerExitHandler:处理鼠标滑出事件。

  2. OnPointerClick 方法

    • 关闭提示框。

    • 切换信息面板的显示状态。

  3. OnPointerEnter 方法

    • 移动提示框到鼠标位置。

    • 如果提示框未激活,则激活它。

  4. OnPointerExit 方法

    • 如果提示框激活,则关闭它。

  5. MoveTip 方法

    • 获取提示框的 RectTransform

    • 获取鼠标在屏幕上的位置。

    • 将屏幕坐标转换为画布坐标。

    • 计算提示框在鼠标右下角的位置。

    • 设置提示框的位置。

总结

通过以上两个脚本,我们实现了一个简单的背包系统,包括初始化物品栏、鼠标滑入显示提示框、鼠标点击显示信息面板等功能。你可以根据需要进一步扩展这个系统,例如添加物品拾取、物品使用等功能。

使用本教程前先学习!

【UGUI】事件侦听EventSystem系统0学-CSDN博客文章浏览阅读1.4k次,点赞23次,收藏23次。实现它主要有三个核心组件:当谈论这些组件时,我们实际上是在谈论游戏中管理事件和交互的“守护神”。让我生动地为你解释一下这三个组件的作用:🖼️ **BaseRaycaster(图形光线投射器)**:它是一个基础的射线投射器,用于确定用户点击的目标对象。Unity提供了一些默认的射线投射器,比如PhysicsRaycaster(用于3D物体)、Physics2DRaycaster(用于2D物体)和GraphicRaycaster(用于UI元素)。如果你有特殊需求,也可以自定义你自己的射线投射器。_eventsystemhttps://blog.csdn.net/leoysq/article/details/134693945?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522E96802B4-FB66-43F2-9AC5-A9F757EFDC88%2522%252C%2522scm%2522%253A%252220140713.130102334.pc%255Fblog.%2522%257D&request_id=E96802B4-FB66-43F2-9AC5-A9F757EFDC88&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~blog~first_rank_ecpm_v1~rank_v31_ecpm-11-134693945-null-null.nonecase&utm_term=UGUI&spm=1018.2226.3001.4450

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/474106.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

MySQL45讲 第二十四讲 MySQL是怎么保证主备一致的?——阅读总结

文章目录 MySQL45讲 第二十四讲 MySQL是怎么保证主备一致的&#xff1f;——阅读总结一、MySQL 主备基本原理&#xff08;一&#xff09;主备切换流程&#xff08;二&#xff09;主备数据同步流程 二、binlog 格式及相关问题&#xff08;一&#xff09;binlog 的三种格式&#…

RSA算法原理

1、RSA加密算法介绍 2、RSA算法的基本原理 2.1、RSA密钥生成 2.2、RSA加密和解密 1、RSA加密算法介绍 简单介绍一下&#xff0c;RSA算法是现代密码学的基石之一&#xff0c;广泛应用与安全通信、数据加密和身份验证等领域。 RSA加密是一种非对称加密算法&#xff0c;由罗…

html 图片转svg 并使用svg路径来裁剪html元素

1.png转svg 工具地址: Vectorizer – 免费图像矢量化 打开svg图片,复制其中的path中的d标签的路径 查看生成的svg路径是否正确 在线SVG路径预览工具 - UU在线工具 2.在html中使用svg路径 <svg xmlns"http://www.w3.org/2000/svg" width"318px" height…

哋它亢SEO技术分析:如何提升网站在搜索引擎中的可见性

文章目录 哋它亢SEO技术分析&#xff1a;如何提升网站在搜索引擎中的可见性网站的基本情况SEO优化分析与建议1. 元数据优化2. 关键词优化3. URL结构4. 图像优化5. 移动端优化6. 网站速度7. 结构化数据&#xff08;Schema Markup&#xff09;8. 内链与外链9. 社交分享 哋它亢SEO…

Liunx-Ubuntu22.04.1系统下配置Anaconda+pycharm+pytorch-gpu环境配置

这里写自定义目录标题 Liunx-Ubuntu22.04.1系统下配置Anacondapycharmpytorch-gpu环境配置一、Anaconda3配置1.Anaconda安装2.Anaconda更新3.Anaconda删除 二、pycharm配置1.pycharm安装 三、pytorch配置 Liunx-Ubuntu22.04.1系统下配置Anacondapycharmpytorch-gpu环境配置 一…

视觉SLAM--经典视觉SLAM框架

整个视觉SLAM流程主要包括以下步骤&#xff1a; 1、传感器信息读取&#xff1a;在视觉SLAM中主要为相机图像信息的读取和预处理。 2、前端视觉里程计&#xff1a;估算相邻图像间相机的运动&#xff0c;以及局部地图的样子。 3、后端&#xff08;非线性&#xff09;优化&#…

3、C语言基本数据类型关键字

本章学习目标&#xff1a; 1、认识存储单位&#xff1a;位bit和字节Byte 2、根据不同的应用场景选择符合需求的数据类型关键字,了解关键字的表示数据范围 1、内存单位 一、位 内存中的数据无论是文本、图像、音频还是视频&#xff0c;都是以位的形式进行存储的。 位是二进制…

Mac os 系统上如何开启远程登录的 ssh 22 端口

macOS 允许使用 SSH 连接&#xff0c;但为了安全起见&#xff0c;需要手动启动 SSH 服务&#xff0c;有两种方法可以激活远程登录。 方法一&#xff1a;界面化操作 1. 打开“系统偏好设置”&#xff0c;点击屏幕左上角的 Apple 图标&#xff0c;然后选择 系统偏好设置。 2. …

利用Python爬虫获取淘宝店铺详情

在数字化时代&#xff0c;数据已成为企业最宝贵的资产之一。对于电商平台&#xff0c;尤其是淘宝这样的大型电商平台&#xff0c;店铺详情数据的获取和分析对于商家来说至关重要。它不仅可以帮助商家了解市场趋势&#xff0c;还可以优化营销策略&#xff0c;提升销售业绩。本文…

RabbitMQ教程:发布/订阅模式(Publish/Subscribe)(三)

文章目录 RabbitMQ教程&#xff1a;发布/订阅模式&#xff08;Publish/Subscribe&#xff09;&#xff08;三&#xff09;一、引言二、简介三、准备工作3.1 说明3.2 生成项目 四、实战4.1 交换机&#xff08;Exchanges&#xff09;4.2 临时队列&#xff08;Temporary Queues&am…

对PolyMarket的突袭

一天清晨六点&#xff0c;美国联邦调查局的探员冲进了纽约市的一间公寓。这间公寓的主人是26岁的Shane Copeland&#xff0c;一个有着凌乱头发的年轻人&#xff0c;也是一个加密货币狂热者。他运营着一个名为PolyMarket的网站——一个允许用户YZ全球事件结果的平台&#xff0c;…

DataStream编程模型之数据源、数据转换、数据输出

Flink之DataStream数据源、数据转换、数据输出&#xff08;scala&#xff09; 0.前言–数据源 在进行数据转换之前&#xff0c;需要进行数据读取。 数据读取分为4大部分&#xff1a; &#xff08;1&#xff09;内置数据源&#xff1b; 又分为文件数据源&#xff1b; socket…

Django5 2024全栈开发指南(三):数据库模型与ORM操作

目录 一、模型的定义二、数据迁移三、数据表关系四、数据表操作4.1 Shell工具4.2 数据新增4.3 数据修改4.4 数据删除4.5 数据查询4.6 多表查询4.7 执行SQL语句4.8 数据库事务 Django 对各种数据库提供了很好的支持&#xff0c;包括 PostgreSQL、MySQL、SQLite 和 Oracle&#x…

ASP.NET Core Webapi 返回数据的三种方式

ASP.NET Core为Web API控制器方法返回类型提供了如下几个选择&#xff1a; Specific type IActionResult ActionResult<T> 1. 返回指定类型&#xff08;Specific type&#xff09; 最简单的API会返回原生的或者复杂的数据类型&#xff08;比如&#xff0c;string 或者…

网关在能源物联网中扮演了什么角色?

随着通信、物联网、云平台等技术的飞速发展&#xff0c;越来越多能源用户希望借助先进的管理手段&#xff0c;对能源进行分布式监测、集中管理&#xff0c;构建能源物联网。准确的分布式监测和集中管理有助于制定更科学合理的节能减排计划。企业或能源使用单位可以依据能源物联…

【快速入门】前端御三家:HTML、CSS和JS

HTML HTML&#xff0c;超文本标记语言&#xff0c;可以理解成骨架&#xff0c;是一个基础的东西。 一.基础结构 如图所示&#xff1a; 二.常见标签 1.标题标签 在页面上定义标题性的内容 <h1>一级标题</h1> <h2>二级标题</h2> <h3>三级标…

WebSocket实战,后台修改订单状态,前台实现数据变更,提供前端和后端多种语言

案例场景&#xff1a; 在实际的后台中需要变更某个订单的状态&#xff0c;在官网中不刷新页面&#xff0c;可以自动更新状态 在前端页面实现订单状态的实时更新&#xff08;不刷新页面&#xff09;&#xff0c;可以通过 WebSocket 的方式与后台保持通信&#xff0c;监听订单状态…

Django5 2024全栈开发指南(二):Django项目配置详解

目录 一、基本配置信息二、资源文件配置2.1 资源路由——STATIC_URL2.2 资源集合——STATICFILES_DIRS2.3 资源部署——STATIC_ROOT2.2.4 媒体资源——MEDIA 三、模板配置四、数据库配置4.1 mysqlclient连接MySQL4.2 pymysql连接MySQL4.3 多个数据库的连接方式4.4 使用配置文件…

近几年新笔记本重装系统方法及一些注意事项

新笔记本怎么重装系统&#xff1f; 近几年的新笔记本默认开启了raid on模式或vmd选项&#xff0c;安装过程中会遇到问题&#xff0c;新笔记本电脑重装自带的系统建议采用u盘方式安装&#xff0c;默认新笔记本有bitlocker加密机制&#xff0c;如果采用一键重装系统或硬盘方式安装…

黑马智数Day10

项目背景说明 后台管理部分使用的技术栈是Vue2&#xff0c;前台可视化部分使用的技术栈是Vue3 前台可视化项目不是独立存在&#xff0c;而是和后台管理项目共享同一个登录页面 微前端的好处 微前端是一种前端架构模式&#xff0c;它将大型单体应用程序分解为小的、松散耦合的…