UI框架学习

一、设计主菜单面板

1、在场景中创建一个Canvas,Canvas Scaler下UI Scale Mode设为Scale With Screen Size,Screen Match Mode设为Math Width Or Height,最后调整Match让UI像素大小随着屏幕高或宽像素大小变化。

一般我们做UI适配时使用Anchor(锚点)和Canvas Scaler这两个地方。

2、在Canvas下创建一个Panel,将Source Image设为背景图片;再在Panel下创建一个Empty GameObject用来盛放菜单按钮。在这个空物体下创建Image作为Button图片,在Image下添加Button脚本,并且创建Text作为Button的名字,Panel和Text不需要点击,将Raycast Target取消勾选。最后复制创建全部菜单按钮。

3、创建Image制作头像个人信息。


二、设计任务面板

在Canvas下创建一个Panel,将Source Image设为任务背景图片,添加Text标题和关闭按钮,TPanel和ext不需要点击,将Raycast Target取消勾选,设置各自Anchor。


三、设计背包和弹框信息面板


四、设计完其他UI面板

五、通过Json和枚举保存所有面板信息

1、创建一个枚举类型保存面板的类型


2、创建一个Json文本保存面板类型和路径

六、创建UIManager类来解析Json文件

1、创建将Json文件处理成对象(将Json文件处理成对象来操作)的类

     JsonUtility的扩展自定义


2、解析Json文件


七、UIManager的单例和JsonUtility调试

1、将UIManager做成单列模式


2、JsonUtility调试


创建GameRoot脚本用来作为UI框架启动器的功能(这里用来JsonUtility调试


八、开发BasePanel基类

每个Panel都有一些共有的功能,也有自己的功能,所以我们给所有的Panel做一个共有的基类BasePanel,让所有的Panel都继承自BasePanel。

把这些Panel公共的属性字段提取出来放在BasePanel,这样BasePanel就隶属于框架里的东西,而其他的Panel就看项目需求,不同的项目需要不同的Panel。

九、开发Dictionary的扩展类


十、控制UI面板Prefab的实例化创建和管理


在设置面板的Parent时,panelGameObject.transform.SetParent(CanvasTransform, false);设为false不要保存在世界坐标的位置,否则面板的位置和Scale会受到影响。

十一、创建栈存储显示的面板


启动时加载主菜单:


十二、控制面板之间的跳转

给MainMenuPanel上的按钮注册点击事件,由于都是加载面板,所以使用同一个方法加载。


十三、关于每个面板的状态函数

                                    

OnEnter和OnPause方法的调用(新的面板入栈时):


重写主菜单面板的OnPause方法:先给MainMenuPanel添加CanvasGroup组件,通过CanvasGroup组件上的Blocks Raycasts属性控制面板是否能交互。


OnResume和OnExit方法的调用(面板出栈时):


OnEnter和OnExit方法的重写:先给Task面板添加CanvasGroup组件,通过该组件的alpha值控制是否显示,Blocks Raycasts属性控制面板是否能交互。      OnResume方法的重写在MainMenuPanel上。


其他面板跳转方式、重写状态函数基本相同。

十四、使用DOTween给面板添加动画

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值