Unity3D学习之UI系统——用NGUI制作游戏登陆界面


1. 需求分析

会省略一些东西,可以看我的NGUI的博客
在这里插入图片描述
在这里插入图片描述

2. 准备工作

在这里插入图片描述

在这里插入图片描述
设置UI分辨率自适应

在这里插入图片描述
设置Root 的层级 和摄像机渲染的层级为UI
主摄像机不渲染UI

3 提示面板

3.1 拼面板

在这里插入图片描述

一般都是美术给一个示意图,然后按示意图上拼面板

3.1.1 制作图集

制作两个新图集
在这里插入图片描述

在这里插入图片描述

3.1.2 拖面板

在这里插入图片描述
检查DrawCall

在这里插入图片描述

3.1.3 面板基类

创建面板基类,
首先设置成单例模式

在这里插入图片描述
在这里插入图片描述

创建虚函数 showMe
在这里插入图片描述
在这里插入图片描述

同时把start函数也改成虚函数
在这里插入图片描述

在这里插入图片描述

3.1.4 提示面板

需要提示文字,按钮点击后隐藏自己
在这里插入图片描述
关联上对象
初始化时监听按钮方法
在这里插入图片描述
提供一个接口供外部改变提示信息

在这里插入图片描述

4 登陆面板

4.1 拼面板

在这里插入图片描述
在这里插入图片描述

给相应的tog和btn添加碰撞器

4.2 脚本编写

在这里插入图片描述
关联控件
在这里插入图片描述
目前实现两个按钮
在这里插入图片描述
在这里插入图片描述

保存初始化面板显示时 tog的选择
写一个数据结构类

在这里插入图片描述
创建管理类管理数据
在这里插入图片描述
声明私有成员变量 LoginData
在这里插入图片描述

使用XML管理器进行数据的读取
在这里插入图片描述
新建一个方法进行登陆数据的存储

在这里插入图片描述
在LoginPanel中更新数据
在这里插入图片描述
在这里插入图片描述
登录成功后就存储数据
测试一下
在这里插入图片描述

5 注册面板

5.1 拼面板

在这里插入图片描述

5.2 代码逻辑

RegisterPanel
在这里插入图片描述
在这里插入图片描述
在登陆面板增加 点击注册的监听事件
在这里插入图片描述

增加注册监听事件判断输入是否合法
在这里插入图片描述
声明注册数据记录注册信息

5.3 注册数据数据结构

在这里插入图片描述
在登陆管理类中声明私有数据存储已经注册的用户信息
在这里插入图片描述
在这里插入图片描述
同时提供一个方法让注册面板保存注册数据
在这里插入图片描述

提供一个用户名和密码,判断用户是否注册成功
在这里插入图片描述
在这里插入图片描述
提供一个检测用户名和密码是否匹配的函数
在这里插入图片描述
在登陆面板进行使用
在这里插入图片描述
更新登陆函数进行测试

5.4 自动填上注册信息

清空登陆面板
在这里插入图片描述
在注册成功后,将刚刚注册的信息填上
在LoginPane新加一个方法 设置登陆面板的账号和密码
在这里插入图片描述
注册成功后调用
在这里插入图片描述

6 服务器面板

6.1 拼面板

在这里插入图片描述

6.2 服务器选择脚本

在这里插入图片描述
在这里插入图片描述

在登陆成功后切换到服务器面板

6.3 选服面板配置文件

不是由玩家产生的 已经由设计者配置好的数据 在游戏中读取到配置文件,再通过配置文件内容改变游戏中的部分内容

6.3.1 创建一个类用于存储和接受配置文件

在这里插入图片描述
在这里插入图片描述

在这里插入图片描述

在StreamingAssets中创建xml文件作为配置文件
在这里插入图片描述

到时候读取就是按这个
在这里插入图片描述

6.4 拼面板

在这里插入图片描述

6.4.1 创建单个服务器的预设体

方便后面代码创建
在这里插入图片描述

6.5 选服面板左侧按钮

根据配置文件,动态创建服务器内容

为预设体创建脚本负责监听事件等

在这里插入图片描述
创建函数 记录点击的是哪个服务器到哪个服务器
在这里插入图片描述
在这里插入图片描述

6.6 选服面板右侧按钮功能

创建单个服务器的脚本
在这里插入图片描述
在这里插入图片描述
增加事件监听
在这里插入图片描述
创建初始化时调用的函数,用于读取单个服务器的数据
在这里插入图片描述

6.7 选服面板 动态创建按钮

6.7.1 通过数据管理器管理数据

在这里插入图片描述
在初始化时获取服务器数据
在这里插入图片描述

6.7.2 Panel脚本

在这里插入图片描述
因为服务器数据 进行游戏的时候不会改变,所以初始化一次就行
在这里插入图片描述
动态创建了物体,接着获得其脚本
在这里插入图片描述

更新 点击左侧按钮后的事件监听,点击后更新右侧面板更新
在chooseServerPanel提供方法,更新右侧按钮显示内容

在这里插入图片描述
更新监听事件
在这里插入图片描述
记录之前显示的单个服务器按钮们,方便切换页面后删除
在这里插入图片描述
在创建新的之前,删除老的
在这里插入图片描述

创建新的
在这里插入图片描述
在这里插入图片描述
创建成功后,给list里增加刚创建的Gameobject
改一下类型
在这里插入图片描述
更新显示内容
在这里插入图片描述

6.8 串联各组件

6.8.1 初始化选服面板

重写ChooseServerPanel中的ShowMe();
1.初始上一次选择服务器相关
在这里插入图片描述
在LoginData中有一个上次登陆的ID的属性
在这里插入图片描述
在这里插入图片描述
2. 更新右侧服务器的显示
在这里插入图片描述

6.8.2 串联打开服务器选择按钮

在这里插入图片描述

6.8.3 更新登陆逻辑

玩家登陆后,如果没有上次选择服务器,会直接跳转到选择服务器界面,如果选择了就跳转到进入游戏界面
在这里插入图片描述

6.8.4 记录上次选择的服务器

初始化时更新服务器面板和隐藏选服面板

在这里插入图片描述
重写serverPanel的showMe函数

根据玩家上一次选择的服务器ID得到数据
在这里插入图片描述
点击按钮时,记录上次选择的服务器ID
在这里插入图片描述
保存在XML中
在serverPanel中记录
在这里插入图片描述

6.8.5 自动登陆实现

在这里插入图片描述

6.8.6 解决代码执行顺序

Execution order

在这里插入图片描述

在这里插入图片描述

最近更新

  1. docker php8.1+nginx base 镜像 dockerfile 配置

    2024-01-31 23:14:02       94 阅读
  2. Could not load dynamic library ‘cudart64_100.dll‘

    2024-01-31 23:14:02       100 阅读
  3. 在Django里面运行非项目文件

    2024-01-31 23:14:02       82 阅读
  4. Python语言-面向对象

    2024-01-31 23:14:02       91 阅读

热门阅读

  1. 学习MySQL中的“IS NULL”优化

    2024-01-31 23:14:02       50 阅读
  2. MySQL语句 | MD5()的使用

    2024-01-31 23:14:02       50 阅读
  3. 面试 CSS 框架八股文十问十答第三期

    2024-01-31 23:14:02       50 阅读
  4. 标签自动滚动到底部(实时滚动)

    2024-01-31 23:14:02       57 阅读
  5. Springboot 校验工具类

    2024-01-31 23:14:02       52 阅读
  6. 网络安全产品之认识防病毒软件

    2024-01-31 23:14:02       63 阅读
  7. 【C语言】(12)指针

    2024-01-31 23:14:02       53 阅读
  8. 242. 有效的字母异位词(力扣LeetCode)

    2024-01-31 23:14:02       56 阅读
  9. Vue之在iframe标签里刷新外部页面

    2024-01-31 23:14:02       60 阅读
  10. docker程序镜像的安装

    2024-01-31 23:14:02       53 阅读
  11. MySQL-约束

    2024-01-31 23:14:02       51 阅读