【Unity小技巧】手戳一个简单易用的游戏UI框架(附源码)

文章目录

  • 前言
  • 整套框架分为三大部分
  • 素材
  • 效果
  • 框架代码
  • 调用
  • 源码
  • 参考
  • 完结

前言

开发一款游戏美术成本是极其高昂的,以我们常见的宣传片CG为例,动辄就要成百上千万的价格,因此这种美术物料一般只会放在核心剧情节点,引爆舆论,做高潮展示!

而另外一种表意方武:则是通过玩法设计,层层引导玩家深入探索游戏世界,这里则需要策划的精心设计和程序的秃头爆肝,因此对于绝大多数游戏而言,选择UI来进行剧情展示、玩法交互和核心表达才是最物美价廉的选择。

unity在4.6版本之后,引入了自己的界面显示系统,全称unity graphic user interface,即我们所熟知的ugui。
在这里插入图片描述
毕竟是unity的亲儿子,这个系统一经推出,就与其灵活快速可视化,迅速抢占用户市场,逐渐成为unity ui的主流系统,但是它也并不是完美的,对于开发人员来说,使用这套系统往往需要面对如下困境,比如缺乏跨场景的u管理器,界面的上下层关系紊乱三,界面之间的通信手段贫乏等等,上述几个问题大大影响到我们的开发效率。
在这里插入图片描述
上述几个问题大大影响到我们的开发效率,因此针对上述问题,我在此分享一套简单易用的框架,这套框架是b站up小棋参考了网上的大量资料,并结合个人工作经验,一个代码一个代码敲出来的,绝对是良心干货,所以废话少说,让我们开始吧!

整套框架分为三大部分

在这里插入图片描述
在游戏运行时,我们会把界面配置关系配置在UIManager中,当我们创建好了一个界面,比如用户列表界面,那么我们就给这个界面取一个名,并且把它放在prefab下的一个文件夹,并且配置在这个配置关系表中,后面我们在新创建一些界面,比如菜单界面,也可以把它配置在这个界面关系配置表中

我总共使用了三个界面来举例,最后一个界面是创建新用户的一个界面,总共配了三个配置关系,包含名称、路径和预制体,比如下图
在这里插入图片描述

素材

请添加图片描述

效果

配置完成后,我们给UIManager提供两个最重要的方法,一个是OpenPanelClosePanel,用于打开界面和关闭界面,介绍完框架的设计
我们就可以开始书写代码了

打开游戏编辑器,我们首先在一个空场景中创建canvas画布,并且将其参数设置为合适的范围和类型,这个主要根据自己项目来设置

接着我们使用工程中的ui素材拼接界面,我这里分了如下几个界面,主菜单界面,用户列表界面和新用户界面等等,最后把这些界面拖拽到resources下的某个目录,将其制作成预制件执行
在这里插入图片描述
加入代码后,最终的运行效果就是这样的,默认只有一个Canvas组件
在这里插入图片描述

框架代码

UIConst.cs

// 用户界面路径
public class UIConst
{public const string MainPanel = "主界面";public const string UserListPanel = "用户列表";public const string UserAddPanel = "添加用户弹窗";
}

UIManager.cs

using System.Collections.Generic;
using UnityEngine;// 用户界面管理器
public class UIManager
{// 单例模式的实例private static UIManager _instance;// 用户界面的根节点private Transform _uiRoot;// 预制件缓存字典private Dictionary<string, GameObject> prefabDict;// 已打开界面的缓存字典public Dictionary<string, BasePanel> panelDict;// 获取单例模式的实例public static UIManager Instance{get{if (_instance == null){_instance = new UIManager();}return _instance;}}// 获取用户界面的根节点public Transform UIRoot{get{if (_uiRoot == null){if (GameObject.Find("Canvas")){_uiRoot = GameObject.Find("Canvas").transform;}else{_uiRoot = new GameObject("Canvas").transform;}};return _uiRoot;}}// 用户界面管理器的构造函数private UIManager(){InitDicts();}// 初始化字典private void InitDicts(){prefabDict = new Dictionary<string, GameObject>();panelDict = new Dictionary<string, BasePanel>();}// 打开面板public BasePanel OpenPanel(string name){BasePanel panel = null;// 检查是否已打开if (panelDict.TryGetValue(name, out panel)){Debug.Log("界面已打开: " + name);return null;}// 检查路径是否配置string path = name;// 使用缓存预制件GameObject panelPrefab = null;if (!prefabDict.TryGetValue(name, out panelPrefab)){string realPath = "Prefabs/Panel/" + path;Debug.Log(realPath);panelPrefab = Resources.Load<GameObject>(realPath) as GameObject;prefabDict.Add(name, panelPrefab);}// 打开界面GameObject panelObject = GameObject.Instantiate(panelPrefab, UIRoot, false);panel = panelObject.GetComponent<BasePanel>();panelDict.Add(name, panel);panel.OpenPanel(name);return panel;}// 关闭面板public bool ClosePanel(string name){BasePanel panel = null;if (!panelDict.TryGetValue(name, out panel)){Debug.Log("界面未打开: " + name);return false;}panel.ClosePanel();// panelDict.Remove(name);return true;}
}

BasePanel.cs

using UnityEngine;public class BasePanel : MonoBehaviour  // 基础面板类,继承自MonoBehaviour
{protected bool isRemove = false;  // 是否移除,默认为否protected new string name;  // 面板名称public virtual void SetActive(bool active)  // 设置面板活动状态{gameObject.SetActive(active);  // 设置游戏对象活动状态}public virtual void OpenPanel(string name)  // 打开面板方法{this.name = name;  // 设置面板名称SetActive(true);  // 设置面板为活动状态}public virtual void ClosePanel()  // 关闭面板方法{isRemove = true;  // 设置移除状态为是SetActive(false);  // 设置面板为非活动状态Destroy(gameObject);  // 销毁游戏对象if (UIManager.Instance.panelDict.ContainsKey(name))  // 如果UI管理器的面板字典包含该面板{UIManager.Instance.panelDict.Remove(name);  // 从字典中移除该面板}}
}

调用

以我视频中所示的这些界面为例,每一个界面我都会给他们挂接上一个脚本,这些脚本继承自BasePanel,比如在主菜单界面,当我点击修改用户时,则会弹出用户列表的这个界面,这时候我只需要调用UIManager.Instance.OpenPanel,然后打开这个界面即可

public void OnBtnChangeUser()
{print("OnBtnChangeUser");UIManager.Instance.OpenPanel(UIConst.UserPanel);
}

关闭界面,也是类似的道理,只要调用close panel即可

public void OnBtnCancel(){print("OnBtnRename");ClosePanel();
}

源码

https://gitcode.net/unity1/unity-ui-frame
在这里插入图片描述

参考

【视频】https://www.bilibili.com/video/BV1zT411b7L3/

完结

赠人玫瑰,手有余香!如果文章内容对你有所帮助,请不要吝啬你的点赞评论和关注,以便我第一时间收到反馈,你的每一次支持都是我不断创作的最大动力。当然如果你发现了文章中存在错误或者有更好的解决方法,也欢迎评论私信告诉我哦!

好了,我是向宇,https://xiangyu.blog.csdn.net

一位在小公司默默奋斗的开发者,出于兴趣爱好,于是最近才开始自习unity。如果你遇到任何问题,也欢迎你评论私信找我, 虽然有些问题我可能也不一定会,但是我会查阅各方资料,争取给出最好的建议,希望可以帮助更多想学编程的人,共勉~
在这里插入图片描述

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

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

相关文章

通过 ChatGPT 学习 Python

先决条件 您需要一个 OpenAI 帐户才能开始与 ChatGPT 交互。如果您还没有这样做,请在 OpenAI 网站上注册一个帐户。 什么是 ChatGPT? GPT(Generative Pre-training Transformer)是 OpenAI 开发的一种语言模型,它使用深度学习技术生成类似人类的文本。ChatGPT 是 GPT 模…

生产环境部署与协同开发 Git

目录 一、前言——Git概述 1.1 Git是什么 1.2 为什么要使用Git 什么是版本控制系统 1.3 Git和SVN对比 SVN集中式 Git分布式 1.4 Git工作流程 四个工作区域 工作流程 1.5 Git下载安装 1.6 环境配置 设置用户信息 查看配置信息 二、git基础 2.1 本地初始化仓库 ​编辑…

[python]问题:pandas处理excel,选中特定的sheet

要使用pandas处理Excel文件并选中特定的sheet,首先需要安装pandas和openpyxl库。可以使用以下命令进行安装: pip install pandas openpyxl然后,可以使用以下代码读取Excel文件中的特定sheet: import pandas as pd# 读取Excel文件 file_path = your_excel_file.xlsx sheet…

Java 中数据结构LinkedList的用法

LinkList 链表&#xff08;Linked list&#xff09;是一种常见的基础数据结构&#xff0c;是一种线性表&#xff0c;但是并不会按线性的顺序存储数据&#xff0c;而是在每一个节点里存到下一个节点的地址。 链表可分为单向链表和双向链表。 一个单向链表包含两个值: 当前节点…

创新指南|CEO如何应对生成式AI带来的4大颠覆创新机遇

生成式AI是一种快速发展的颠覆式创新&#xff0c;可以帮助企业创新商业模式、提高效率和解锁商业价值。本研究介绍如何应对生成式AI技术带来的挑战和机遇&#xff0c;以及如何先发利用这种技术来超越竞争和组织创造力和效率。如果您想了解更多关于生成式AI的企业创新战略&#…

【C++深入浅出】初识C++下篇(auto关键字、范围for、nullptr指针)

目录 一. 前言 二. auto关键字 2.1 auto的引入 2.2 auto简介 2.3 auto的使用细则 2.4 auto不能推导的场景 三. 基于范围的for循环(C11) 3.1 范围for的语法 3.2 范围for的原理 3.3 范围for的使用条件 四. 指针空值nullptr(C11) 一. 前言 上期我们介绍了c新增的两个重…

网络基础知识socket编程

目录 网络通信概述网络互连模型&#xff1a;OSI 七层模型TCP/IP 四层/五层模型数据的封装与拆封 IP 地址IP 地址的编址方式IP 地址的分类特殊的IP 地址如何判断2 个IP 地址是否在同一个网段内 TCP/IP 协议TCP 协议TCP 协议的特性TCP 报文格式建立TCP 连接&#xff1a;三次握手关…

服务器端使用django websocket,客户端使用uniapp 请问服务端和客户端群组互发消息的代码怎么写的参考笔记

2023/8/29 19:21:11 服务器端使用django websocket,客户端使用uniapp 请问服务端和客户端群组互发消息的代码怎么写 2023/8/29 19:22:25 在服务器端使用Django WebSocket和客户端使用Uniapp的情况下&#xff0c;以下是代码示例来实现服务器端和客户端之间的群组互发消息。 …

每日一题:leetcode 1109 航班预订统计

这里有 n 个航班&#xff0c;它们分别从 1 到 n 进行编号。 有一份航班预订表 bookings &#xff0c;表中第 i 条预订记录 bookings[i] [firsti, lasti, seatsi] 意味着在从 firsti 到 lasti &#xff08;包含 firsti 和 lasti &#xff09;的 每个航班 上预订了 seatsi 个座…

前端加springboot实现Web Socket连接通讯以及测试流程(包括后端实现心跳检测)

【2023】前端加springboot实现Web Socket连接通讯&#xff08;包括后端实现心跳检测&#xff09; 前言一、Web Socket 简绍1 为什么用 websocket&#xff1f; 二、代码实现1、前端&#xff08;html&#xff09;1.1、无前端向后端发送消息1.2、有前端向后端发送消息 2、后端具体…

springboot整合jquery实现前后端数据交互

一 实施逻辑 1.1 前端 <!doctype html> <html lang"en"><head><meta charset"UTF-8"><meta name"Generator" content"EditPlus"><meta name"Author" content""><meta n…

C# 生成唯一ID

1.首先通过nuget安装yitter.idgenerator 下面的三行代码搞定

win11 docker-desktop安装记录

win11安装Docker踩坑实录 马上开始正式工作了&#xff0c;需要用到docker&#xff0c;以前在win10上安装过&#xff0c;新电脑是win11&#xff0c;心想肯定会遇到坑&#xff0c;就浅浅记录一下 首先看一下安装要求 需要wsl2 那么就先进行 wsl的更新 wsl --update注意这里网络…

【STM32】串口初步使用

本文只作为学习笔记&#xff0c;对串口进行一个简单的介绍&#xff0c;正确的使用方式还需要进行实际的调试 通信的类型&#xff1a; 同步 异步 单工 双工 串行 并行 STM32的串口通信&#xff1a; 配置片上外设的控制寄存器&#xff0c;通信双方进行相同的配置&#xff0c;…

VScode代码自动补全提示

VScode代码自动补全提示 打开设置 搜索 Suggest:Snippets Prevent Quick Suggestions &#xff0c;去掉勾选 CtrlShiftP打开setting.json文件&#xff0c;添加以下代码 "editor.suggest.snippetsPreventQuickSuggestions": false,"editor.quickSuggestions…

dockerfile部署前端vue打包的dist文件实战

背景&#xff1a;一般前端开发后会将打包后的dist文件交由我们部署&#xff0c;部署的方式有很多&#xff0c;这里提供一种思路 在服务器的路径下新建一个目录&#xff0c;在目录中新建Dockerfile&#xff0c;编辑这个文件 FROM nginxCOPY ./dist /home/front COPY nginx.con…

C++标准库STL容器详解

目录 C标准模板库STL容器容器分类容器通用接口 顺序容器vectorlistdeque 容器适配器queuestackpriority_queue 关联容器&#xff1a;红黑树setmultisetmapmultimap 关联容器&#xff1a;哈希表unordered_set和unordered_multisetunordered_map和unordered_multimap 附1&#xf…

数据库集群的简单了解

Update 关于操作的日志 1.0 redo log 读一次写一次 一共2次, 不安全 注意redo log是顺写 而file是随机 所以Mysql做出类似HDFS的操作 行为日志和数据分离&#xff0c;但是不同的是&#xff0c;Mysql在内存中操作修改&#xff0c;如果不出事故&#xff0c;由内存中的行为来直接…

双分区OTA升级

双分区&#xff08;双区&#xff09;OTA&#xff08;Over-the-Air&#xff09;升级是嵌入式系统中常用的一种固件升级方式。此种方式下&#xff0c;设备的存储空间被分为两个分区&#xff1a;一个活动&#xff08;active&#xff09;分区和一个备用&#xff08;standby&#xf…

ES 7.6 - JAVA应用基础操作篇

ES 7.6 - JAVA应用基础操作篇 环境准备依赖配置 实体类准备使用说明索引/映射操作创建索引和映射索引和映射相关查询删除索引 文档操作插入数据更新数据删除数据批量操作 文档查询根据ID查询根据字段精准查询根据字段分词查询控制返回字段范围查询组合查询排序分页高亮搜索聚合…