（一）基于Unity 3d UI框架学习记录，以及初识DOTween动画库的使用。

基于UNITY 3d UI框架学习记录，以及初识DOTween动画库的使用。

1.UI框架结构流程图：

在这里插入图片描述注：以上为Siki老师画的图

2.流程图分析：

a).

在上图框架中以UImanager为核心管理类，gameroot为启动器，主要起到运行开始加载主界面作用，basepanel做为各个面板的公共基类，三者组成UI框架，UIpanelType为枚举类型主要保存这个工程中的所有面板，这里利用json信息的办法保存所有的面板以及其路径，（利用将各个面板预制体放在resources文件夹下加载这一方法）。

b).

面板的打开，关闭，当上层面板打开时，底层面板应当禁用不与鼠标交互只让最上层面板能与鼠标交互这一结构采用了“栈”的先入后出，后入先出的特性，在此框架中仅gameroot（启动器）和需要挂载在各个面板预制体上的脚本（其实只要Basepanel脚本继承其他继承自Basepanel也会继承）需要继承自Mono其余脚本主要起到相互之间的信息传递以及配合工作不需要继承自Mono。

c).

这里页面状态定义了4个函数可以让其以虚函数形式包含于Basepanel基类中，根据不同面板实现不同功能，比如之后要介绍的利用DoTween来实现面板加载，关闭时的动画效果。接下来将保姆式开始介绍制作~

3.UI面板的制作：

（1）在这里插入图片描述
先创建一个canvas（画布）右键->UI->canvas
（2）图片资源导入并处理

导入图片并在Texture Type中选择Sprite（2D and UI）,点击右下角Apply完成对图片的修改，否则无法给创建的面板赋上背景。

以下同理

（3）canvas画布的自适应：由于不同设备屏幕尺寸的的差异会导致某些如字体等不会随着屏幕大小改变而改变大小比例,会变得很不合适，因此要做自适应（随屏幕尺寸等比例调节面板中各部分的大小）
在这里插入图片描述
在canvas Scal组件中将UI Scale Mode调节为Scale With Screen Size，并将新出现的Screen Match Mode调节为Mach width or Height(依据长度或者高度匹配)调节下面Match，你可以以高度或者宽度调节自适应0或者1，这里我调到0.5各取一半，相当于依据高度宽度1:1调节= =我感觉这样比较合适舒服，这样主面板画布就能根据屏幕大小缩放，来看效果区别图：
在这里插入图片描述
图1

图2
可以看到字体的大小和位置根据屏幕大小调节了！，图1可能我缩的不是很小，emmm嗯，强行明显 =v=|||接下来开始我们的面板的制作
（4）制作一个面板并将其做成预制体

将canvas下新建的Panel改名为MainMenuPanel并创建一个空物体作为其子物体，（那个小的白框）调节大小位置如图中右下角，并改名为Function（主要设置显示各种功能按键），并创建一个image（右键->UI->image，并将任务图片赋给它，接着搜索为其挂载button组件）我们把Pressed Corlor设置为橙色，运行一下看看效果~
在这里插入图片描述
接着我们为它添加一个点击事件~

下拉找到那个加号点击添加点击事件

之后代码完成开发我们再回来给他赋值~
然后就是点击后弹窗的开发啦~

在这里插入图片描述

隐藏掉MainMenuPanel重复步骤，先设置大小Set native size再按住shift等比调节大小，panel图片透明度调节
image组件->color中第四栏调至100%
关闭按钮制作，在taxt面板下新建一个image，为其赋上初始状态的关闭按钮图片，挂载button组件，在Button组件中的transforme属性设置为Spirit Swapt，接着我们就能为它添加四种状态下的图片了，自上而下分别为初始，鼠标停在上面，按下，放开4种状态，设置对应状态图片后还是点击加号为其添加上一个点击事件。让我们看下效果在这里插入图片描述
完美~接下来将TaskPanel和MainmenuPanel做成预制体后就可以进行代码环节了 =V=/
字数见底了TAT下期继续