UGUI 进阶

UI事件监听接口

目前所有的控件都只提供了常用的事件监听列表
如果想做一些类似长按,双击,拖拽等功能是无法制作的
或者想让Image和Text,RawImage三大基础控件能够响应玩家输入也是无法制作的

而事件接口就是用来处理类似问题
让所有控件都能够添加更多的事件监听来处理对应的逻辑

事件接口

常用的:

IPointerEnterHandler-OnPeterEnter  当指针进入对象时调用(鼠标进入)

IPointerExitHandler-OnPointerExit当指针退出对象时调用(鼠标离开)

IPointerDownHandler-OnPointerDown-在对象上按下指针时调用(按下)

IPointerUpHandler - OnPointerup - 松开指针时调用(在指针正在点击的游戏对象上调用)(抬起)

IPointerClickHandler -OnPointerclick-在同一对象上按下再松开指针时调用 (点击)


IBeginDragHandler-OnBeginDrag-即将开始拖动时在拖动对象上调用(开始拖拽)

IDragHandler-OnDrag-发生拖动时在拖动对象上调用(拖中)

IEndDragHandler-OnEndDrag-拖动完成时在拖动对象上调用(结束拖)

不常用:

InitializePotentialDragHandler - OnInitializePotentialDrag - 在找到拖动目标时调用,可用于初始化值

IDropHandler-OnDrop-在拖动目标对象上调用

IScrollHandler-OnScroll-当鼠标滚轮滚动时调用

IUpdateSelectedHandler -OnUpdateSelected-每次勾选时在选定对象上调用

ISelectHandler-Onselect-当对象成为选定对象时调用

IDeselectHandler-OnDeselect-取消选择选定对象时调用


导航相关
IMoveHandler-OnMove-发生移动事件(上、下、左、右等)时调用

ISubmitHandler-OnSubmit-按下 Submit 按钮时调用、

ICancelHandler-OnCancel-按下 Cancel 按钮时调用

使用

需要命名空间using UnityEngine.EventSystems;

继承需要的接口并实现

注意需要勾选挂载对象的 Raycast Target

using UnityEngine;
using UnityEngine.EventSystems;//要继承,继承就得实现
public class Lesson18 : MonoBehaviour,IPointerEnterHandler,IPointerExitHandler,IPointerDownHandler,IPointerUpHandler,IPointerClickHandler
{public void OnPointerClick(PointerEventData eventData){print("鼠标点击");}public void OnPointerDown(PointerEventData eventData){print("鼠标按下");}public void OnPointerEnter(PointerEventData eventData){//移动设备上不存在,因为只有点击、按下、抬起,没有进入的概念print("鼠标进入");}public void OnPointerExit(PointerEventData eventData){//移动设备上不存在,因为只有点击、按下、抬起,没有离开的概念print("鼠标离开");}public void OnPointerUp(PointerEventData eventData){print("鼠标抬起");}
}

PointerEventData参数的关键内容

父类:  BaseEventData

pointerId: 鼠标左右中键点击鼠标的ID 通过它可以判断石键点击
position:当前指针位置(屏幕坐标系)
pressPosition:按下的时候指针的位置
delta:指针移动增量
clickCount:连击次数
clickTime:点击时间

pressEventCamera:最后一个OnPointerPress按下事件关联的摄像机

enterEvetnCamera:最后一个OnPointerEnter进入事件关联的摄像机

    public void OnDrag(PointerEventData eventData){print(eventData.position);print(eventData.delta);}

总结

好处:
需要监听自定义事件的控件挂载继承实现了接口的脚本就可以监听到一些特殊事件

可以通过它实现一些长按,双击拖拽等功能
坏处:
不方便管理,需要自己写脚本继承接口挂载到对应控件上,比较麻烦

EventTrigger事件触发器

事件触发器是EventTrigger组件
它是一个集成了上节所有事件接口的脚本
它可以让我们更方便的为控件添加事件监听

使用

1.拖曳脚本进行关联
2.代码添加

要求参数是BaseEventData类型(是PointerEventData这些的父类,需要using UnityEngine.EventSystems).

拖曳

   public void TestPointerEnter(BaseEventData baseEventData){print("enter");}
    public void TestPointerEnter(BaseEventData data){PointerEventData eventData = data as PointerEventData;print("enter " + eventData.position);}

代码添加

   //将控件的EventTrigger拖到这public EventTrigger et;// Start is called before the first frame updatevoid Start(){//代码添加//声明一个希望监听的事件对象EventTrigger.Entry entry = new EventTrigger.Entry();//声明 事件的类型entry.eventID = EventTriggerType.PointerUp;//监听函数关联entry.callback.AddListener((data) =>{print("抬起");});//声明好的事件加入到EventTrigger中et.triggers.Add(entry);}

运行结果如图

面板上没有添加,但实际有,控制面板上显示

加入多个同种类型的eventID也不会报错,不想这样可以遍历et.triggers的对象,看有没有相同ID。

总结

EventTrigger可以让我们写更少的代码
可以在面板类中处理面板控件的事件逻辑,更加的面向对象,便于管理

屏幕坐标转UI相对坐标

RectTransformUtility类

RectTransformUtility公共类是RectTransform的]辅助类
主要用于进行一些 坐标的转换等等操作
其中对于我们目前来说 最重要的函数是 将屏幕空间上的点,转换成UI本地坐标下的点

将屏幕坐标转换UI本地坐标

方法:
RectTransformUtility.ScreenPointToLocalPointInRectangle
参数一:相对父对象
参数二:屏幕点
参数三:摄像机
参数四:最终得到的点
一般配合拖拽事件使用

public class Lesson20 : MonoBehaviour,IDragHandler
{public void OnDrag(PointerEventData eventData){//参数一:相对父对象//参数二:屏幕点//参数三:摄像机//参数四:最终得到的点//该例子是遥感,类似王者荣耀的控制Vector2 nowPos;RectTransformUtility.ScreenPointToLocalPointInRectangle(//相对父对象的位置this.transform.parent as RectTransform,eventData.position,eventData.enterEventCamera,out nowPos);this.transform.localPosition = nowPos;}}

Mask遮罩

在不改变图片的情况下让图片在游戏中只显示其中的一部分

Scroll View的Viewport中就包含遮罩Mask组件

使用

实现遮罩效果的关键组件时Mask组件
通过在父对象上添加Mask组件即可遮罩其子对象

注意:
1.想要被遮罩的Image需要勾选Maskable
2.只要父对象添加了Mask组件,那么所有的UI子对象(包括子对象的子对象)都会被遮罩
3.遮罩父对象图片的制作,不透明的地方显示,透明的地方被遮罩

如图创建一个父对象为红色,加上Mask脚本

再创建一个子对象,如图所示

可以发现子对象好像也是圆形的,

实际子对象是方形。

参考注意第三条,父对象透明的地方被遮罩了,子对象显示不了。

要想子对象被父对象遮罩,要勾选Maskable

对于安装了Mask脚本的父对象,取消勾选Show Mask Graphic,则看不到父对象(但仍有遮罩效果)

模型和粒子显示在UI之前

模型显示在UI之前

方法一: 直接用摄像机渲染3D物体

canvas的渲染模式要不是覆盖模式
摄像机模式 和 世界(3D)模式都可以让模型显示在UI之前(z轴在UI元素之前即可)

注意:
1.摄像机模式时建议用专门的摄像机渲染UI相关
2.面板上的3D物体建议也用UI摄像机进行渲染

新建摄像机如图,并将Canvas的摄像机改为该摄像机

导入3D模型到UI前要记得把层级改为UI层,以及记得改成合适的缩放大小

如上图方块在图片前面,我们可以改变各物体z轴,来实现前后显示的效果,如下图

方法二 将3D物体渲染在图片上,通过图片显示

该方法适用于一个模型的显示(因为渲染物体需要额外的摄像机)

专门使用一个摄像机渲染3D模型,将其渲染内容输出到RenderTexture上
类似小地图的制作方式
再将渲染的图显示在UI上

该方式 不管canvas的渲染模式是哪种都可以使用

新建camera如图(Model是自己新建的层级)

新建一个方块,设置为Model层,适当调整方块位置让camera能看到

然后新建Render Texture

更改camera的Target Texture,让画面输出到图Mode上面

接着可以在Canvas中新建Raw Image(因为Mode不是Spirit,而Raw Image可以放任何图片)

则Raw Image显示的内容就是我们新建camera看到的画面

改变方块,则Raw Image画面也会改变

如图是方块移动造成的画面,但Raw Image出现了画面残影一样的拖曳效果,这需要更改摄像机

更改为 Solid Color的渲染模式就好了

粒子特效显示在UI之前

粒子特效的显示和3D物体类似

注意点:
在摄像机模式下时
可以在粒子组件的Renderer相关参数中改变排序层 让粒子特效始终显示在其之前不受z轴影响

一般方式如3D物体,这里讲修改层级

如图修改Order in Layer 如1,Canvas中也有Order in Layer,则只要粒子的Layer值大于Canvas,就会一直显示在UI前面。

异形按钮

图片形状不是传统矩形的按钮是异形按钮

如图将按钮改为了非传统矩形

发现点击Button周围透明区域仍然有效果(即点击范围仍为矩形)

但只希望点击图片显示范围

方法一 通过添加子对象的形式

内存消耗不大

按钮之所以能够响应点击,主要是根据图片矩形范围进行判断的
它的范围判断是自下而上的,意思是如果有子对象图片,子对象图片的范围也会算为可点击范围
那么我们就可以用多个透明图拼凑不规则图形作为按钮子对象用于进行射线检测

如图创建了一个透明矩形图片,作为Button的子对象,则发现点击子对象的区域也会判定为点击按钮。

但如果创建一个删除Image组件,只有Rect Transform的Image,

则发现点击这范围没效果

也就是说,必须要有元素(如图,文字等)才可以响应点击。

我们可以利用这个性质来实现异形按钮的点击

可以将按钮作为Image的子对象,异形按钮可以把Button的文字删掉,并更改透明度让Button看不到,但记得更改如下图的Target Graphic为Image,这样才能显示父对象被点击的效果。

因此可以用Button的子对象拼出异形按钮的点击范围。

方法二 通过代码改变图片的透明度响应阈值

消耗内存

第一步:修改图片参数 开启Read/Write Enabled开关
第二步:通过代码修改图片的响应阈值

该参数含义:指定一个像素必须具有的最小alpha值,以便能够认为射线命中了图片
说人话:当像素点alpha值小于了 该值 就不会被射线检测了

如图开启Read/Write

public Image img;// Start is called before the first frame update void Start(){//alpha 0.1f以下不响应img.alphaHitTestMinimumThreshold = 0.1f;}

给按钮挂载该脚本后,则边缘透明部分点击不响应。

自动布局组件

虽然UGUI的RectTransform已经非常方便的可以帮助我们快速布局
但UGUI中还提供了很多可以帮助我们对UI控件进行自动布局的组件
他们可以帮助我们自动的设置UI控件的位置和大小等

自动布局的工作方式一般是
自动布局控制组件 + 布局元素 = 自动布局


自动布局控制组件:Unity提供了很多用于自动布局的管理性质的组件用于布局
布局元素:具备布局属性的对象们,这里主要是指具备RectTransform的UI组件

布局元素的布局属性

如图为Image的布局属性 Layout Properties

水平垂直布局组件

水平垂直布局组件
将子对象并排或者竖直的放在一起

组件名:Horizontal Layout Group和Vertical Layout Group
参数相关:
Padding:左右上下边缘偏移位置
Spacing:子对象之间的间距

ChildAlignment:九宫格对齐方式
Control Child Size:是否控制子对象的宽高
Use Child Scale:在设置子对象大小和布局时,是否考虑子对象的缩放
Child Force Expand:是否强制子对象拓展以填充额外可用空间

如图创建一个蓝色父对象和绿,红,黑3个子对象,子对象现在重叠。

给父对象添加改组件

则显示如图

父对象大小变化时,它们位置也会变化,大小好像不变(唐老狮说变,但是我测试没有变化)

这里就是参数

勾选Control Child Size时 父对象大小变化,子对象也变化

Use Child Scale:在设置子对象大小和布局时,是否考虑子对象的缩放,勾选后会根据缩放后的结果重新布局位置。

Child Force Expand:是否强制子对象拓展以填充额外可用空间,没勾选就会紧靠着布局,勾选后会均匀布局

当勾选Control Child Size 而不勾选 Child Force Expand时,子对象会消失,因为默认的布局属性最小为0,0.

想要改变最小宽高,可以添加Layout Element组件

我将红色改为

则哪怕勾选了Control Child Size和Child Force Expand,改变父对象的大小,红色子对象最小也被限定在了50,50

而如果设置了Preferred 宽高(我认为是倾向宽高,当能往这值靠近时,他就会扩大靠近这个值),勾选Control Child Size而不勾选Child Force Expand,则最大为设置的值,但如果勾选了Child Force Expand,仍会扩大

相应的有垂直布局组件

网格布局组件

Grid Layout Group

内容大小适配器

Content Size Fitter

宽高比适配器

Aspect Ratio Fitter

Canvas Group

如何整体控制一个面板的淡入淡出等

如果我们想要整体控制一个面板的淡入淡出 或者 整体禁用
使用目前学习的知识点 是无法方便快捷的设置的

解决方案:Canvas Group

为面板父对象添加
CanvasGroup组件 即可整体控制

参数相关:
Alpha:整体透明度控制
Interactable:整体启用禁用设置
Blocks Raycasts:整体射线检测设置


Ignore Parent Groups:是否忽略父级CanvasGroup的作用

总结

UGUI源码位置

Data\Resources\PackageManager\BuiltInPackages\com.unity.ugui

其它知识

1.DoTween-缓动插件,可以制作一些缓动效果
2.TextMeshPro一文本网格插件,可以制作更多的特效文字
 

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

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

相关文章

【MySQL系列】使用 ALTER TABLE 语句修改表结构的方法

💝💝💝欢迎来到我的博客,很高兴能够在这里和您见面!希望您在这里可以感受到一份轻松愉快的氛围,不仅可以获得有趣的内容和知识,也可以畅所欲言、分享您的想法和见解。 推荐:kwan 的首页,持续学…

图的应用试题

01.任何一个无向连通图的最小生成树( )。 A.有一棵或多棵 B.只有一棵 C.一定有多棵 D.可能不存在 02.用Prim算法和Kruskal算法构造图的最小生成树,…

2024/4/2 IOday4

使用文件IO 实现父进程向子进程发送信息&#xff0c;并总结中间可能出现的各种问题 #include <stdio.h> #include <string.h> #include <stdlib.h> #include <sys/types.h> #include <sys/stat.h> #include <fcntl.h> #include <unistd…

【从零开始】自建高质量免费ip代理池(截止2024.4.1最新版)

文章目录 前言基础常识代理服务器状态码端口号 常见免费ip代理池网站实现思路代码实现main.pyutils.pydemo.py 结果如下 前言 为了防止ip被封后还能爬取网页&#xff0c;最常见的方法就是自己构建一个ip代理池。 本来用的是下面这个开源项目ip代理池&#xff0c; github开源项…

InternLM

任务一 运行1.8B模型&#xff0c;并对话 User >>> 请创作一个 300 字的小故事 在一片茂密的森林里&#xff0c;住着一只小松鼠&#xff0c;它的名字叫做小雪。小雪非常活泼好动&#xff0c;经常在树上跳跃玩耍。有一天&#xff0c;小雪发现了一个神秘的洞穴&#xf…

主干网络篇 | YOLOv8改进之用RCS-OSA替换C2f(来源于RCS-YOLO)

前言:Hello大家好,我是小哥谈。RCS-YOLO是一种目标检测算法,它是基于YOLOv3算法的改进版本。通过查看RCS-YOLO的整体架构可知,其中包括RCS-OSA模块。RCS-OSA模块在模型中用于堆叠RCS模块,以确保特征的复用并加强不同层之间的信息流动。本文就给大家详细介绍如何将RCS-YOLO…

Crossmanager 2024 64 bit(CAD文件格式转换工具)安装包分享

新增功能 1、NavisWorks输入&#xff1a;首次发布&#xff0c;支持2016至2023版本 2、Fusion 360输入&#xff1a;首次发布&#xff0c;支持版本2.0 3、Catia V6/3D体验输入&#xff1a;支持R2023x版本 4、Solidworks输入&#xff1a;支持Solidworks 2023版本 5、Solid Ed…

加密/ 解密 PDF:使用Python为PDF文档设置、移除密码

在数字化时代&#xff0c;文档的安全性变得越来越重要。特别是对于包含敏感信息的PDF文件&#xff0c;确保其不被未经授权的人员访问或修改是至关重要的。本文将介绍如何使用Python在PDF文档中设置密码&#xff0c;以及如何移除已经设置的密码。 目录 PDF加密基础知识 Pytho…

应用层的http和https协议

HTTP和HTTPS http和https是什么&#xff1f;http 常用的协议版本http/1.0http/1.1改进http/2.0 改进 http 和https有什么区别&#xff1f; http和https是什么&#xff1f; HTTP&#xff08;超文本传输协议&#xff09;是一种用于在网络上传输超文本数据的协议。它是一种客户端-…

考研数学|《1800》+《660》精华搭配混合用(经验分享)

肯定不行&#xff0c;考研数学哪有这么容易的&#xff01; 先说说这两本习题册&#xff0c;李永乐老师推出的新版660题&#xff0c;相较于18年前的版本&#xff0c;难度略有降低&#xff0c;更加适合初学者。因此&#xff0c;对于处于基础阶段的学习者来说&#xff0c;新版660…

ssm017网上花店设计+vue

网上花店的设计与实现 摘 要 网络技术和计算机技术发展至今&#xff0c;已经拥有了深厚的理论基础&#xff0c;并在现实中进行了充分运用&#xff0c;尤其是基于计算机运行的软件更是受到各界的关注。加上现在人们已经步入信息时代&#xff0c;所以对于信息的宣传和管理就很关…

用户体验:探讨Facebook如何优化用户体验

在数字化时代&#xff0c;用户体验是社交媒体平台成功与否的关键因素之一。作为全球最大的社交媒体平台之一&#xff0c;Facebook一直在努力优化用户体验&#xff0c;从功能设计到内容呈现再到隐私保护&#xff0c;不断提升用户满意度。本文将深入探讨Facebook如何优化用户体验…

【与C++的邂逅】---- 函数重载与引用

关注小庄 顿顿解馋(▿) 喜欢的小伙伴可以多多支持小庄的文章哦 &#x1f4d2; 数据结构 &#x1f4d2; C 引言 : 上一篇博客我们了解了C入门语法的一部分&#xff0c;今天我们来了解函数重载&#xff0c;引用的技术&#xff0c;请放心食用 ~ 文章目录 一. &#x1f3e0; 函数重…

获取用户位置数据,IP定位离线库助您洞悉消费者需求

获取用户位置数据是现代互联网应用中非常重要的一环。通过获取用户的位置数据&#xff0c;可以了解用户所在的地理位置&#xff0c;从而更好地为用户提供个性化的服务和推荐。而IP归属地离线库就是一种非常有用的工具&#xff0c;可以帮助企业准确地获取用户的位置信息。 IP归…

【Entity Framework】EF中DbSet类详解

【Entity Framework】EF中DbSet类详解 文章目录 【Entity Framework】EF中DbSet类详解一、概述二、定义DbSet2.1 具有DbSet属性的DbContext2.2 具有 IDbSet 属性的 DbContext 2.3 具有 IDbSet 属性的 DbContext三、DbSet属性四、DbSet方法五、DbContext动态生成DbSet 一、概述 …

后端基础篇- 社区 IDEA 手动 Maven 创建 SpringBoot 项目、Maven 安装与配置环境变量、IDEA 集成 Maven

&#x1f525;博客主页&#xff1a; 【小扳_-CSDN博客】 ❤感谢大家点赞&#x1f44d;收藏⭐评论✍ 文章目录 1.0 Maven 安装与配置环境变量 1.1 下载并解压安装包 1.2 配置本地仓库 1.3 配置阿里云私服 1.4 配置环境变量 2.0 IDEA 集成 Maven 2.1 首先创建一个新项目 2.2 开始…

二维相位解包理论算法和软件【全文翻译-二维相位解缠的离散形式 (2.5)】

我们已经指出,二维相位解包相当于在覆盖相关领域的路径上对相位梯度进行积分。在实践中,我们当然必须处理采样数据。然而,为了做到这一点,我们必须定义离散域中的二维相位解包问题,并明确本书中将会用到的相关术语。 从最一般、限制最少的意义上讲,二维相位解包是一个不…

121314饿

c语言中的小小白-CSDN博客c语言中的小小白关注算法,c,c语言,贪心算法,链表,mysql,动态规划,后端,线性回归,数据结构,排序算法领域.https://blog.csdn.net/bhbcdxb123?spm1001.2014.3001.5343 给大家分享一句我很喜欢我话&#xff1a; 知不足而奋进&#xff0c;望远山而前行&am…

vue3鼠标向下滑动,导航条改变背景颜色和logo的封装

代码中使用了element-plus组件&#xff0c;需先安装 向下滑动前 向下滑动后&#xff08;改变了logo 字体 背景颜色&#xff09; <script lang"ts" setup> import router from /router; import { ArrowDown } from element-plus/icons-vue import { ref, …

实测梳理一下kafka分区分组的作用

清空topickafka-topics.sh --bootstrap-server localhost:9092 --delete --topic second创建分区kafka-topics.sh --create --bootstrap-server localhost:9092 --replication-factor 1 --partitions 3 --topic second发kafka-console-producer.sh --bootstrap-server localhos…