课程重点
项目资源的整理
制作账号系统的所有页面
完成页面的切换及数据传递
串接组件实现功能
账号系统页面及简单交互
课程知识点
资源整理
目录建立
资源目录
字体目录
预制体目录
场景预制体目录
UI预制体目录
UI图片切片目录
场景目录
脚本目录
第三方库目录
导入插件
把所有第三方库,移入ThirdParty中
搭建场景
建立Canvas
建立UICamera,去掉音频监听器
修改Canvas的渲染模式为相机模式,将UICamera拖给Canvas
UI相机清除填充改为深度优先,渲染层改为唯一UI,相机层改为UI
将Canvas到相机的距离,改为10米,将UI相机可视最远距离,调整为20米
将主相机不显示UI层的内容
注意保持UI相机的深度比主相机的深度高
Canvas子元素拉伸,设置参考分辨率,屏幕匹配方式修改为高度或宽度自适应
单元测试:UI元素和3D物体叠加正常显示
导入资源
将UI切片,放入Resources/UI目录下
将字体,放入Resources/Fonts目录下
注意不需要打包到用户手机的资源,不要放在Resources目录下,这样会导致
包体大小上升
资源的分类
根据系统,建立目录
UI切片转换为Sprite格式后再移动(首页移动后的效果)
建立图集(一般一个系统一个图集)
开启项目精灵图集生成功能
拖入精灵,调整质量(注意半透明渐变),并预览
资源命名及图集移动
按钮:btn_名称
背景:bg_名称
图标:icon_名称
单选按钮:tg_名称
头像:av_名称
进度条:pg_名称
页面制作
在场景中建立Panel并生成预制体
在UI最后方,放页面参考图
页面制作
功能需求
显示登录页
- 输入用户名和密码(选服信息页)
- 点击注册按钮(注册页)
注册页
- 输入用户名,密码,重复密码(登录页)
- 点击返回按钮(登录页)
选服信息页
- 点击选服按钮(选服页)
- 进入按钮(主页)
开发部分
DOTween的按钮动画
页面跳转
创建引导脚本(单入口的思想,场景中只有一个脚本,所以引导脚本中Start
会在程序一开始执行时运行,类似Main函数)
Login页面加载
- 通过Resources.Load()加载预制体
- 实例化预制体对象(Object.Instantiate())
- 让页面在场景中出现(将Object类型转化为GameObject类型)
- 将页面放置在Canvas物体下(transform.SetParent())
第一个页面的加载
由于Bootstrap是第一个运行的脚本,所以Login页面的加载写在Bootstrap
中
UI系统的脚本管理(1个Panel界面,1个控制脚本)
登录页面的脚本
- 需要交互的组件,公开成员变量或回调函数
- 编辑器配置成员变量,或回调函数
- 处理,注册按钮的事件响应
登录页面中注册按钮,实现的是注册页面的加载
其他页面切换逻辑以此类推
分析注册页面需要编写的代码逻辑
- 点击注册时需要编写逻辑代码
用户名,密码,重复密码,不为空
两次密码是否一致
用户名规则校验
密码规则校验
注册成功后,需要修改登录页的用户名及密码(跨页面传递数据)
因为所有页面都在Canvas下,所以获取登录页,只需要获取父物体,
在获取Login页面下的UILogin控制脚本即可获得UILogin
- 获取父物体
- 查找父物体下的Login对象
- 获取Login对象下UILogin控制脚本
- 对成员变量操作(输入框),修改输入框的值
按钮事件中添加数据
编写回调函数脚本,编写带有参数的回调函数
编辑器中选中按钮,添加事件,事件回调中,可以配置数值(因为回调函数有参数)
原文地址:https://www.cnblogs.com/DGJS/p/11052034.html