Unity中UI系统3——UGUI

概述

基础知识

UGUI基础

六大基础组件

Canvas——渲染模式控制组件

Canvas Scaler —— 分辨率自适应组件

CanvasScaler——恒定像素模式

CanvasScaler——缩放模式

可以适当的自己去了解对数

CanvasScaler——恒定物理模式

CanvasScaler —— 3D模式

Graphic Raycaster——射线事件交互组件

Event System 和 Standalone Input Module —— 点击事件监听组件

Recttransform —— UI位置锚点组件

三大基础控件

Image —— 图片

Text——文本控件

RawImage——(原始图片)大图控件

组合控件

Button ——按钮

练习:

先创建玩家,并设置面板的适配模式和分辨率自适应

Toggle——单选多选框控件

练习

1.建立一个音效数据

2.在玩家类中调用

3.toggle控制

InputField——文本输入控件

上半部分参数和Button一样

练习

1.拼面板

2.创建 ChengeNamePanel 脚本

3.与 GamePanel 关联

Slider —— 滑动条组件

1.在 MusicData 中添加数据

2.GamePanel 中处理逻辑

3. PlayerObj 中获取音效大小的改变

Scrollbar——滚动条

ScrollView——滚动视图

1.拼面板

2. 创建 BagPanel 

3. GamePanel 关联

Dropdown——下拉列表控件

图集制作

UGUI进阶

UI事件监听接口

为了保持面向对象,蓄能条的一些逻辑用事件的方式抛出给GamePanel去实现

Eventtrigger——事件触发器

拼出摇杆

逻辑处理

屏幕坐标转UI相对坐标

Mask —— 遮罩

模型和粒子显示在UI之前

异形按钮

自动布局组件

CanvasGroup——画布组件

总结

实践小项目

需求分析

准备工作

UGUI初始化

将UGUI摄像机设置为 Screen Space - Camera模式

然后单独设置一个摄像机用来渲染UI

面板基类

UI管理器

using System.Collections;
using System.Collections.Generic;
using UnityEngine;public class UIManager 
{private static UIManager instance = new UIManager();public static UIManager Instance => instance;//存储面板的容器private Dictionary<string, BasePanel> panelDic = new Dictionary<string, BasePanel>();//应该一开始 就得到我们的 Canvas对象private Transform canvasTrans;private UIManager(){//得到场景上创建好的 Canvas对象canvasTrans = GameObject.Find("Canvas").transform;//让 Canvas对象 过场景 不移除//我们都是通过 动态裁剪 和 动态删除 来显示 隐藏面板的 所以不删除它 影响不大GameObject.DontDestroyOnLoad(canvasTrans.gameObject);}//显示面板public T ShowPanel<T>() where T:BasePanel{//我们只需要保证 泛型T的类型 和 面板名 一致 定一个这样的规则 就非常方便我们的使用string panelName = typeof(T).Name;//判断是否已经显示该面板 如果是就直接返回出去if (panelDic.ContainsKey(panelName))return panelDic[panelName] as T;//显示面板 就是 动态的创建面板预设体 设置父对象//根据得到的 类名 就是我们的预设体面板名 直接 动态创建它 即可GameObject panelObj = GameObject.Instantiate(Resources.Load<GameObject>("UI/" + panelName));panelObj.transform.SetParent(canvasTrans, false);//接着 就是得到对应的面板脚本 存储起来T panel = panelObj.GetComponent<T>();//把面板脚本存储到 对应容器中 之后 可以方便我们获取它panelDic.Add(panelName, panel);//调用显示自己的逻辑panel.ShowMe();//返回给外部,方便调用return panel;}//隐藏面板//参数一:如果希望 淡出 就默认传true 如果希望直接隐藏(删除) 面板 那么就传falsepublic void HidePanel<T>(bool isFade = true) where T:BasePanel{//根据 泛型类型 得到面板 名字string panelName = typeof(T).Name;//判断当前显示的面板 有没有该名字的面板if (panelDic.ContainsKey(panelName)){if (isFade){panelDic[panelName].HideMe(() =>{//面板 淡出成功后 希望删除面板GameObject.Destroy(panelDic[panelName].gameObject);//删除面板后 从 字典中移除panelDic.Remove(panelName);});}else{//删除面板GameObject.Destroy(panelDic[panelName].gameObject);//删除面板后 从 字典中移除panelDic.Remove(panelName);}}}//获得面板public T GetPanel<T>() where T:BasePanel{string panelName = typeof(T).Name;if (panelDic.ContainsKey(panelName)){return panelDic[panelName] as T;}//如果没有 直接返回空return null;}}

提示面板

1.拼面板

2.提示面板功能制作

登录面板

1.拼面板

2.登录面板功能制作

先创建 登录数据类

创建 登录管理器

登录面板 逻辑

注册面板

1.拼面板

2.注册面板逻辑

建立注册数据

LoginMgr 逻辑

创建 RegisterPanel

LoginPanel 补充逻辑

服务器面板

1.拼面板

2.服务器面板功能

服务器面板逻辑

LoginData 补充

LoginPanel 补充逻辑

选服面板

拼面板

选服面板配置文件数据相关

LoginMgr 添加逻辑

选服面板右侧按钮功能

选服面板右侧按钮功能

选服面板功能——动态创建按钮

创建 ChooseServerPanel 

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.U2D;
using UnityEngine.UI;public class ChooseServerPanel : BasePanel
{//左右的滚动视图public ScrollRect svLeft;public ScrollRect svRight;//上一次登录的服务器相关信息public Text txtName;public Image imgState;//当前选择的区间范围public Text txtRange;//用于存储右侧按钮们private List<GameObject> itemList = new List<GameObject>();public override void Init(){//动态创建左侧的 区间按钮//获取到服务器列表的数据List<ServerInfo> infoList = LoginMgr.Instance.ServerData;//得到一共要循环创建多少个区间按钮//由于向下取整 所以 要+1 就代表 平均分成了num个按钮int num = infoList.Count / 5 + 1;//循环创建 一个一个的区间按钮for (int i = 0; i < num; i++){//动态创建预设体对象GameObject item = Instantiate(Resources.Load<GameObject>("UI/ServerLeftItem"));item.transform.SetParent(svLeft.content, false);//初始化ServerLeftItem serverLeft = item.GetComponent<ServerLeftItem>();int beginIndex = i * 5 + 1;int endIndex = 5 * (i + 1);//判断 最大 是不是超过了 服务器的总数if (endIndex > infoList.Count)endIndex = infoList.Count;//初始化区间按钮serverLeft.InitInfo(beginIndex, endIndex);}}public override void ShowMe(){base.ShowMe();//显示自己时//应该初始化 上一次选择的服务器//更新当前的选择int id = LoginMgr.Instance.LoginData.frontServerID;if (id <= 0){txtName.text = "无";imgState.gameObject.SetActive(false);}else{//根据上一次登录的 服务器ID 获取到 服务器信息 用于界面数据更新ServerInfo info = LoginMgr.Instance.ServerData[id - 1];//拼接显示上一次登录的服务器名字txtName.text = info.id + "区    " + info.name;//一开始让状态图 显示imgState.gameObject.SetActive(true);//状态//加载图集SpriteAtlas sa = Resources.Load<SpriteAtlas>("Login");switch (info.state){case 0:imgState.gameObject.SetActive(false);break;case 1://流畅imgState.sprite = sa.GetSprite("ui_DL_liuchang_01");break;case 2://繁忙imgState.sprite = sa.GetSprite("ui_DL_fanhua_01");break;case 3://火爆imgState.sprite = sa.GetSprite("ui_DL_huobao_01");break;case 4://维护imgState.sprite = sa.GetSprite("ui_DL_weihu_01");break;}}//更新当前的选择区间UpdatePanel(1, 5 > LoginMgr.Instance.ServerData.Count ? LoginMgr.Instance.ServerData.Count : 5);}/// <summary>/// 提供给其他地方 用于更新 当前选择区间的右侧按钮/// </summary>/// <param name="beginIndex"></param>/// <param name="endIndex"></param>public void UpdatePanel(int beginIndex, int endIndex){//更新服务器区间显示txtRange.text = "服务器  " + beginIndex + "-" + endIndex;//第一步:删除之前的单个按钮for (int i = 0; i < itemList.Count; i++){//删除之前的 对象Destroy(itemList[i]);}// 删除完成后 一定要清空列表itemList.Clear();//第二步:创建新的按钮for (int i = beginIndex; i <= endIndex; i++){//首先获取 服务器信息ServerInfo nowInfo = LoginMgr.Instance.ServerData[i - 1];//动态创建预设体GameObject serverItem = Instantiate(Resources.Load<GameObject>("UI/ServerRightItem"));serverItem.transform.SetParent(svRight.content, false);//根据信息 更新按钮数据ServerRightItem rightItem = serverItem.GetComponent<ServerRightItem>();rightItem.InitInfo(nowInfo);//创建成功后 把它记录到列表中itemList.Add(serverItem);}}
}

ServerLeftItem 补充逻辑

ServerRightItem 补充逻辑

ServerPanel 补充逻辑

选服面板功能——功能串联

1.服务器面板功能

2.清理登录缓存

3.存储选择的服务器ID

4.将背景图作为一个面板来控制

5.自动登录逻辑

图集整理

视频展示

UGUI实践项目视频

总结

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

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

相关文章

RabbitMQ的学习和模拟实现|muduo库的介绍和使用

muduo库 项目仓库&#xff1a;https://github.com/ffengc/HareMQ muduo库 muduo库是什么快速上手搭建服务端快速上手搭建客户端上面搭建的服务端-客户端通信还有什么问题?muduo库中的protobuf基于muduo库中的protobuf协议实现一个服务器 muduo库是什么 Muduo由陈硕大佬开…

人工智能与机器学习原理精解【3】

文章目录 泰勒级数逼近基础一阶导数和二阶导数的几何意义一阶导数的几何意义二阶导数的几何意义应用示例 导数与微分的区别1. 定义与本质2. 几何意义3. 表达式与关系4. 应用场景 可微函数定义几何意义性质例子 导数导数的定义导数的计算导数的几何意义导数函数的图像一、常见导…

在Ubuntu上部署Zerotier IPV6网络

今天我们将在阿贝云提供的免费服务器上,部署并优化一个Zerotier网络,支持IPV6。阿贝云确实提供了不错的免费云服务器,1核CPU、1G内存、10G硬盘、5M带宽,完全可以满足我们的部署需求。接下来让我们一起看看如何在Ubuntu上安装和配置Zerotier吧。 Zerotier是一个非常出色的虚拟网…

数据编织 VS 数据仓库 VS 数据湖

目录 1. 什么是数据编织?2. 数据编织的工作原理3. 代码示例4. 数据编织的优势5. 应用场景6. 数据编织 vs 数据仓库6.1 数据存储方式6.2 数据更新和实时性6.3 灵活性和可扩展性6.4 查询性能6.5 数据治理和一致性6.6 适用场景6.7 代码示例比较 7. 数据编织 vs 数据湖7.1 数据存储…

前端性能优化面试题汇总

面试题 1. 简述如何对网站的文件和资源进行优化? 参考回答&#xff1a; 举列&#xff1a; 1.文件合并&#xff08;目的是减少http请求&#xff09;&#xff1a;使用css sprites合并图片&#xff0c;一个网站经常使用小图标和小图片进行美化&#xff0c;但是很遗憾这些小图片…

文献检索。

* 号代表通配符。 参考视频&#xff1a; 武汉科技大学图书馆信息素养微课程--EI数据库的检索与利用_哔哩哔哩_bilibili &#xff08;讲了爱斯维尔的检索方法&#xff0c;以及期刊选刊查找&#xff09; 【图情专场】文献检索课中的Web of Science_在线大讲堂_哔哩哔哩_bilib…

证书上的服务器名错误解决方法

方法 win r &#xff0c;输入mmc 点击文件——>添加/删除管理单元 找到证书——> 添加 根据自己的存放选择存放位置 点击控制台根节点——> 受信任的根证书颁发机构——>导入 若还出现问题&#xff0c;则参考https://blog.csdn.net/mm120138687/article/details/…

环境收集 开始阶段

预攻击阶段 渗透测试信息搜集总结 > 确定要攻击的网站后&#xff0c;用whois工具查询网站信息注册时间&#xff0e;管理员联系方式&#xff08;电话、邮箱.&#xff09; 2&#xff1a;使用nslookup、dig工具进行域名解析已得到IP地址。 &#xff1e;3&#xff1a;查询得…

go-kratos 学习笔记(2) 创建api

proto 声明SayHi 先删除go.mod 从新初始化一下 go mod init xgs_kratosgo mod tidy 编辑 api/helloword/v1/greeter.proto 新声明一个方法 rpc SayHi (HelloHiRequest) returns (HelloHiReply) {option (google.api.http) {post: "/hi"body: "*"};} …

SpringCloud 环境工程搭建

SpringCloud 环境&工程搭建 文章目录 SpringCloud 环境&工程搭建1. SpringCloud介绍2. 服务拆分原则2.1 单一职责原则2.2 服务自治2.3 单向依赖2.4 服务拆分示例 3. 数据准备4. 工程搭建4.1 创建父工程4.2 创建子工程4.2.1 子项目-订单服务4.2.2 子项目-商品服务 4.3 完…

Django cursor()增删改查和shell环境执行脚本

在Django中&#xff0c;cursor()方法是DatabaseWrapper对象&#xff08;由django.db.connectio提供&#xff09;的一个方法&#xff0c;用于创建一个游标对象。这个游标对象可以用来执行SQL命令&#xff0c;从而实现对数据库的增删改查操作。 查询&#xff08;Select&#xff0…

VUE中的重点*

1.MVC 和 MVVM的区别&#xff1f; MVC&#xff1a;M&#xff08;model数据&#xff09;、V&#xff08;view视图&#xff09;&#xff0c;C&#xff08;controlle控制器&#xff09; 缺点是前后端无法独立开发&#xff0c;必须等后端接口做好了才可以往下走&#xff1b; 前端没…

四、GD32 MCU 常见外设介绍 (4) EXTI 中断介绍

4.EXTI 中断介绍 EXTI(中断/事件控制器)包含多个相互独立的边沿检测电路并且能够向处理器内核产生中断请求或唤醒事件。 EXTI 有三种触发类型&#xff1a;上升沿触发、下降沿触发和任意沿触发。 EXTI中的每一个边沿检测电路都可以独立配置和屏蔽。 4.1.GD32 EXTI 外设原理简介…

【前端】20种 Button 样式

20种 Button 样式 在前端开发中&#xff0c;Button 按钮的样式设计是提升用户交互体验的重要一环。以下是20种常见的Button样式&#xff0c;这些样式主要基于CSS实现&#xff0c;可以根据具体需求进行调整和组合。 1. 默认样式 CSS 样式&#xff1a;.button { background-co…

自动驾驶---视觉Transformer的应用

1 背景 在过去的几年&#xff0c;随着自动驾驶技术的不断发展&#xff0c;神经网络逐渐进入人们的视野。Transformer的应用也越来越广泛&#xff0c;逐步走向自动驾驶技术的前沿。笔者也在博客《人工智能---什么是Transformer?》中大概介绍了Transformer的一些内容&#xff1a…

setsockopt选项对tcp速度

GPT-4 (OpenAI) 每个setsockopt调用都涉及到一个套接字描述符&#xff0c;一个指定网络层的常数&#xff08;如IPPROTO_IP, IPPROTO_TCP, IPPROTO_IPV6, SOL_SOCKET等&#xff09;&#xff0c;一个指定需配置的选项的常数&#xff0c;一个指向配置值的指针&#xff0c;以及那个…

Oracle(8)什么是Oracle实例(Instance)?

实例&#xff08;Instance&#xff09;是Oracle数据库环境的核心组成部分&#xff0c;它是一组与Oracle数据库相互作用&#xff0c;用于访问和操作数据库对象的后台进程和内存结构。 主要特点 后台进程&#xff1a;这些进程用于支持数据库操作、管理和维护任务&#xff0c;如…

时钟芯片LMK04828调试记录

平台&#xff1a;vivado2018.3 芯片&#xff1a;LMK04828 应用场景&#xff1a;在一些高速ADC和DAC的芯片中&#xff0c;需要时钟芯片对其提供专用的高速时钟&#xff0c;并且往往伴随这jesd204b的时钟产生。所以使用时钟芯片来产生同源时钟。 官方手册下载地址 LMK04828 数…

前端控制器模式

前端控制器模式 介绍 前端控制器模式&#xff08;Front Controller Pattern&#xff09;是一种常用的软件设计模式&#xff0c;尤其是在Web应用程序开发中。它提供了一个集中的入口点&#xff0c;用于处理所有客户端请求&#xff0c;并将它们分发给相应的处理程序。这种模式有…

C++实现排序算法

冒泡算法 将元素进行两两比较&#xff0c;将大的元素往后移动 平均时间复杂度是O(n^2)&#xff0c;最坏时间复杂度是O(n^2)&#xff0c;最好时间复杂度是O(n)&#xff0c;排序结果具有稳定性。 这里所提到的稳定性主要是针对相同元素而言的&#xff0c;比如5,5,3进行冒泡排序…