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

文章目录

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

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的属性

  1. 更新右侧服务器的显示

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

6.8.3 更新登陆逻辑

玩家登陆后,如果没有上次选择服务器,会直接跳转到选择服务器界面,如果选择了就跳转到进入游戏界面

6.8.4 记录上次选择的服务器

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

重写serverPanel的showMe函数

根据玩家上一次选择的服务器ID得到数据

点击按钮时,记录上次选择的服务器ID

保存在XML中

在serverPanel中记录

6.8.5 自动登陆实现

6.8.6 解决代码执行顺序

Execution order

相关推荐
一枚游戏干饭人9 分钟前
【运营攻略】怎样进行游戏产品的定位
人工智能·游戏·语音识别
IOT.FIVE.NO.19 分钟前
Linux实操笔记2 Ubuntu安装Nginx的不同方法
linux·笔记·ubuntu
不染_是非26 分钟前
Django学习实战篇四(适合略有基础的新手小白学习)(从0开发项目)
数据库·后端·学习·django·web
Niu_brave37 分钟前
Python基础知识学习(2)
开发语言·python·学习
akbar&42 分钟前
计算机三级 - 数据库技术 - 第十三章 大规模数据库架构 笔记
数据库·笔记
sixteenyy1 小时前
学习笔记(一)
笔记·学习
程序猿方梓燚1 小时前
C/C++实现植物大战僵尸(PVZ)(打地鼠版)
c语言·开发语言·c++·算法·游戏
zaizai10072 小时前
编辑器拓展(入门与实践)
unity
计算机学姐2 小时前
基于python+django+vue的在线学习资源推送系统
开发语言·vue.js·python·学习·django·pip·web3.py
吃什么芹菜卷2 小时前
2024.9最新:CUDA安装,pytorch库安装
人工智能·pytorch·笔记·python·深度学习