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

文章目录

  • 1. 需求分析
  • 2. 准备工作
  • 3 提示面板
    • 3.1 拼面板
      • 3.1.1 制作图集
      • 3.1.2 拖面板
      • 3.1.3 面板基类
      • 3.1.4 提示面板
  • 4 登陆面板
    • 4.1 拼面板
    • 4.2 脚本编写
  • 5 注册面板
    • 5.1 拼面板
    • 5.2 代码逻辑
    • 5.3 注册数据数据结构
    • 5.4 自动填上注册信息
  • 6 服务器面板
    • 6.1 拼面板
    • 6.2 服务器选择脚本
    • 6.3 选服面板配置文件
      • 6.3.1 创建一个类用于存储和接受配置文件
    • 6.4 拼面板
      • 6.4.1 创建单个服务器的预设体
    • 6.5 选服面板左侧按钮
    • 6.6 选服面板右侧按钮功能
    • 6.7 选服面板 动态创建按钮
      • 6.7.1 通过数据管理器管理数据
      • 6.7.2 Panel脚本
    • 6.8 串联各组件
      • 6.8.1 初始化选服面板
      • 6.8.2 串联打开服务器选择按钮
      • 6.8.3 更新登陆逻辑
      • 6.8.4 记录上次选择的服务器
      • 6.8.5 自动登陆实现
      • 6.8.6 解决代码执行顺序


1. 需求分析

会省略一些东西,可以看我的NGUI的博客

Unity3D学习之UI系统——用NGUI制作游戏登陆界面_第1张图片

2. 准备工作

Unity3D学习之UI系统——用NGUI制作游戏登陆界面_第2张图片

Unity3D学习之UI系统——用NGUI制作游戏登陆界面_第3张图片
设置UI分辨率自适应

Unity3D学习之UI系统——用NGUI制作游戏登陆界面_第4张图片
设置Root 的层级 和摄像机渲染的层级为UI
主摄像机不渲染UI

3 提示面板

3.1 拼面板

Unity3D学习之UI系统——用NGUI制作游戏登陆界面_第5张图片

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

3.1.1 制作图集

制作两个新图集
Unity3D学习之UI系统——用NGUI制作游戏登陆界面_第6张图片

Unity3D学习之UI系统——用NGUI制作游戏登陆界面_第7张图片

3.1.2 拖面板

Unity3D学习之UI系统——用NGUI制作游戏登陆界面_第8张图片
检查DrawCall

Unity3D学习之UI系统——用NGUI制作游戏登陆界面_第9张图片

3.1.3 面板基类

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

Unity3D学习之UI系统——用NGUI制作游戏登陆界面_第10张图片
在这里插入图片描述

创建虚函数 showMe
Unity3D学习之UI系统——用NGUI制作游戏登陆界面_第11张图片
Unity3D学习之UI系统——用NGUI制作游戏登陆界面_第12张图片

同时把start函数也改成虚函数
Unity3D学习之UI系统——用NGUI制作游戏登陆界面_第13张图片

Unity3D学习之UI系统——用NGUI制作游戏登陆界面_第14张图片

3.1.4 提示面板

需要提示文字,按钮点击后隐藏自己
Unity3D学习之UI系统——用NGUI制作游戏登陆界面_第15张图片
关联上对象
初始化时监听按钮方法
Unity3D学习之UI系统——用NGUI制作游戏登陆界面_第16张图片
提供一个接口供外部改变提示信息

Unity3D学习之UI系统——用NGUI制作游戏登陆界面_第17张图片

4 登陆面板

4.1 拼面板

Unity3D学习之UI系统——用NGUI制作游戏登陆界面_第18张图片
Unity3D学习之UI系统——用NGUI制作游戏登陆界面_第19张图片

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

4.2 脚本编写

Unity3D学习之UI系统——用NGUI制作游戏登陆界面_第20张图片
关联控件
Unity3D学习之UI系统——用NGUI制作游戏登陆界面_第21张图片
目前实现两个按钮
Unity3D学习之UI系统——用NGUI制作游戏登陆界面_第22张图片
Unity3D学习之UI系统——用NGUI制作游戏登陆界面_第23张图片

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

Unity3D学习之UI系统——用NGUI制作游戏登陆界面_第24张图片
创建管理类管理数据
Unity3D学习之UI系统——用NGUI制作游戏登陆界面_第25张图片
声明私有成员变量 LoginData
Unity3D学习之UI系统——用NGUI制作游戏登陆界面_第26张图片

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

Unity3D学习之UI系统——用NGUI制作游戏登陆界面_第27张图片
在LoginPanel中更新数据
Unity3D学习之UI系统——用NGUI制作游戏登陆界面_第28张图片
Unity3D学习之UI系统——用NGUI制作游戏登陆界面_第29张图片
登录成功后就存储数据
测试一下
Unity3D学习之UI系统——用NGUI制作游戏登陆界面_第30张图片

5 注册面板

5.1 拼面板

Unity3D学习之UI系统——用NGUI制作游戏登陆界面_第31张图片

5.2 代码逻辑

RegisterPanel
Unity3D学习之UI系统——用NGUI制作游戏登陆界面_第32张图片
Unity3D学习之UI系统——用NGUI制作游戏登陆界面_第33张图片
在登陆面板增加 点击注册的监听事件
Unity3D学习之UI系统——用NGUI制作游戏登陆界面_第34张图片

增加注册监听事件判断输入是否合法
Unity3D学习之UI系统——用NGUI制作游戏登陆界面_第35张图片
声明注册数据记录注册信息

5.3 注册数据数据结构

在这里插入图片描述
在登陆管理类中声明私有数据存储已经注册的用户信息
Unity3D学习之UI系统——用NGUI制作游戏登陆界面_第36张图片
Unity3D学习之UI系统——用NGUI制作游戏登陆界面_第37张图片
同时提供一个方法让注册面板保存注册数据
Unity3D学习之UI系统——用NGUI制作游戏登陆界面_第38张图片

提供一个用户名和密码,判断用户是否注册成功
Unity3D学习之UI系统——用NGUI制作游戏登陆界面_第39张图片
Unity3D学习之UI系统——用NGUI制作游戏登陆界面_第40张图片
提供一个检测用户名和密码是否匹配的函数
Unity3D学习之UI系统——用NGUI制作游戏登陆界面_第41张图片
在登陆面板进行使用
Unity3D学习之UI系统——用NGUI制作游戏登陆界面_第42张图片
更新登陆函数进行测试

5.4 自动填上注册信息

清空登陆面板
Unity3D学习之UI系统——用NGUI制作游戏登陆界面_第43张图片
在注册成功后,将刚刚注册的信息填上
在LoginPane新加一个方法 设置登陆面板的账号和密码
Unity3D学习之UI系统——用NGUI制作游戏登陆界面_第44张图片
注册成功后调用
Unity3D学习之UI系统——用NGUI制作游戏登陆界面_第45张图片

6 服务器面板

6.1 拼面板

Unity3D学习之UI系统——用NGUI制作游戏登陆界面_第46张图片

6.2 服务器选择脚本

Unity3D学习之UI系统——用NGUI制作游戏登陆界面_第47张图片
Unity3D学习之UI系统——用NGUI制作游戏登陆界面_第48张图片

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

6.3 选服面板配置文件

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

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

Unity3D学习之UI系统——用NGUI制作游戏登陆界面_第49张图片
Unity3D学习之UI系统——用NGUI制作游戏登陆界面_第50张图片

Unity3D学习之UI系统——用NGUI制作游戏登陆界面_第51张图片

在StreamingAssets中创建xml文件作为配置文件
Unity3D学习之UI系统——用NGUI制作游戏登陆界面_第52张图片

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

6.4 拼面板

Unity3D学习之UI系统——用NGUI制作游戏登陆界面_第53张图片

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

方便后面代码创建
Unity3D学习之UI系统——用NGUI制作游戏登陆界面_第54张图片

6.5 选服面板左侧按钮

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

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

Unity3D学习之UI系统——用NGUI制作游戏登陆界面_第55张图片
创建函数 记录点击的是哪个服务器到哪个服务器
Unity3D学习之UI系统——用NGUI制作游戏登陆界面_第56张图片
Unity3D学习之UI系统——用NGUI制作游戏登陆界面_第57张图片

6.6 选服面板右侧按钮功能

创建单个服务器的脚本
Unity3D学习之UI系统——用NGUI制作游戏登陆界面_第58张图片
Unity3D学习之UI系统——用NGUI制作游戏登陆界面_第59张图片
增加事件监听
Unity3D学习之UI系统——用NGUI制作游戏登陆界面_第60张图片
创建初始化时调用的函数,用于读取单个服务器的数据
Unity3D学习之UI系统——用NGUI制作游戏登陆界面_第61张图片

6.7 选服面板 动态创建按钮

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

Unity3D学习之UI系统——用NGUI制作游戏登陆界面_第62张图片
在初始化时获取服务器数据
Unity3D学习之UI系统——用NGUI制作游戏登陆界面_第63张图片

6.7.2 Panel脚本

Unity3D学习之UI系统——用NGUI制作游戏登陆界面_第64张图片
因为服务器数据 进行游戏的时候不会改变,所以初始化一次就行
Unity3D学习之UI系统——用NGUI制作游戏登陆界面_第65张图片
动态创建了物体,接着获得其脚本
Unity3D学习之UI系统——用NGUI制作游戏登陆界面_第66张图片

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

Unity3D学习之UI系统——用NGUI制作游戏登陆界面_第67张图片
更新监听事件
Unity3D学习之UI系统——用NGUI制作游戏登陆界面_第68张图片
记录之前显示的单个服务器按钮们,方便切换页面后删除
Unity3D学习之UI系统——用NGUI制作游戏登陆界面_第69张图片
在创建新的之前,删除老的
Unity3D学习之UI系统——用NGUI制作游戏登陆界面_第70张图片

创建新的
Unity3D学习之UI系统——用NGUI制作游戏登陆界面_第71张图片
Unity3D学习之UI系统——用NGUI制作游戏登陆界面_第72张图片
创建成功后,给list里增加刚创建的Gameobject
改一下类型
在这里插入图片描述
更新显示内容
Unity3D学习之UI系统——用NGUI制作游戏登陆界面_第73张图片

6.8 串联各组件

6.8.1 初始化选服面板

重写ChooseServerPanel中的ShowMe();
1.初始上一次选择服务器相关
Unity3D学习之UI系统——用NGUI制作游戏登陆界面_第74张图片
在LoginData中有一个上次登陆的ID的属性
Unity3D学习之UI系统——用NGUI制作游戏登陆界面_第75张图片
Unity3D学习之UI系统——用NGUI制作游戏登陆界面_第76张图片
2. 更新右侧服务器的显示
在这里插入图片描述

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

Unity3D学习之UI系统——用NGUI制作游戏登陆界面_第77张图片

6.8.3 更新登陆逻辑

玩家登陆后,如果没有上次选择服务器,会直接跳转到选择服务器界面,如果选择了就跳转到进入游戏界面
Unity3D学习之UI系统——用NGUI制作游戏登陆界面_第78张图片

6.8.4 记录上次选择的服务器

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

Unity3D学习之UI系统——用NGUI制作游戏登陆界面_第79张图片
重写serverPanel的showMe函数

根据玩家上一次选择的服务器ID得到数据
Unity3D学习之UI系统——用NGUI制作游戏登陆界面_第80张图片
点击按钮时,记录上次选择的服务器ID
Unity3D学习之UI系统——用NGUI制作游戏登陆界面_第81张图片
保存在XML中
在serverPanel中记录
Unity3D学习之UI系统——用NGUI制作游戏登陆界面_第82张图片

6.8.5 自动登陆实现

Unity3D学习之UI系统——用NGUI制作游戏登陆界面_第83张图片

6.8.6 解决代码执行顺序

Execution order

Unity3D学习之UI系统——用NGUI制作游戏登陆界面_第84张图片

Unity3D学习之UI系统——用NGUI制作游戏登陆界面_第85张图片

你可能感兴趣的:(学习,ui,游戏,unity,NGUI,笔记)