Unity Dark UI 学习笔记

Dark UI

在这里插入图片描述
建议先看完官方提供的Documentation


1. 项目结构

在这里插入图片描述

  • 1.1 Menu Manager : 配置各个Panels和启动画面等
  • 1.2 Backgrounds : 背景层
  • 1.3 Main Panels : 内容层
  • 1.3.1 Home : 首页
  • 1.3.1.1 Content : 菜单内容
  • 1.3.1.1.1 Play Story : 第一个菜单
  • 1.3.1.1.2 Multiplayer : 第二个菜单 …
  • 1.3.1.2 Key Shortcut List : 左下角ESE按钮
  • 1.3.1.3 Key Helpers : 快捷键
  • 1.3.2 Play Story : 第一个版块
  • 1.3.3 Multiplayer : 第二个版块 …
  • 1.4 Modal Windows : 弹出框
  • 1.5 Splash Screen : 启动画面

2. 开场

在这里插入图片描述

2.1 Timed Event (Script)

参数设置:

  • 2.1.1 设置Timer,延迟运行时间
  • 2.1.2 Enable At Start,是否用Start启动
  • 2.1.3 TIMER EVENT,时间到了回调
  • 2.1.4 StartIEnumerator 开始运行
  • 2.1.5 StopIEnumerator 停止运行

2.2 Animator

设置Animator动画,通过Animator.Play(“State名称”)来调用

2.3 UI Dissolve Effect (Script)

消失效果代码,使用UI Dissolve材质,可以换噪点图片
通过Location来设置显示或隐藏

2.4 总结

这里主要是2个文字的移动,并结合“黑色云彩”图片遮罩,然后整体背景设置为消失透明。
准备好这些效果和页面,使用Timed Event或用Animator来运行出效果。


3. Menu Manager

3.1 Splash Screen Manager(Script)

disableSplashScreen设置,是否跳过启动界面。
直接跳过执行:

  • splashScreenAnimator.Play(“Splash Out”) 启动界面消失
  • mainPanelsAnimator.Play(“Splash Disabled”) 把Main Panels的Canvas Group设置为1
  • homePanelAnimator.Play(“Panel In”) 显示菜单,把Canvas Group设置为1

背景里使用Blur Grunge Masked材质,产生毛玻璃效果

3.2 Main Panel Manager (Script)

参数说明:
  • Panels 加入各页
  • Home Blur Manager 用于把背景显示成毛玻璃效果
  • Current Panel Index 当前页面id
  • Enable Brush Animation 会启动黑色渐变动画
  • Enable Home Blur 毛玻璃效果动画
    函数说明:
函数说明
  • Start 初始化第一个页
  • OpenFirstTab() 启动默认页,与Start一致
  • PanelAnim(int newPanel) 启动新页,主要播放新旧2页的进场与出场动画
  • NextPage() 启动下一页
  • PrevPage() 启动上一页

3.3 总结

  • 作者如使用用SETTINGS作为可设置的容内标题,脚本参数分类比较清晰
  • 为启动程序做一个脚本,为其他内容控制做一个脚本,2个脚本功能非常清晰

4. Backgrounds 背景板

在这里插入图片描述

  • Filter : 通过各类颜色遮罩,实现简单的色彩变化
  • Vignette : 4深色渐变
  • Blank : 用于背景消失时,把此层透明度变成1
  • 背景动画主要就是调整Blank的透明度

5. Home 首页

在这里插入图片描述

5.1 Main Panels 与 Home

  • Main Panels 的 Animator 主要处理他自己的Canvas Group的透明度
  • Home 的 Animator 使用 Main Panel Fading动画状态机:
  • Pandel In : 把背景的多个图层显示出来,其中有2个毛玻璃的层在底部,不随透明变化,但产生一种特别的遮罩效果;
  • Pandel Out : 把背景透明度调整为0

5.2 Background

  • 图片加入Blur Grunge Masked,产生毛玻璃效果在这里插入图片描述
  • 加入毛玻璃材质
    在这里插入图片描述
  • Blur Manager (Script)
    在这里插入图片描述
    针对Blur Grunge Masked材质,可以这个脚本进行管理,提供2个方法:
    BlurInAnim:显示成毛玻璃效果
    BlurOutAnim:毛玻璃效果消失

5.3 Content

在这里插入图片描述

5.3.1 Layout Group Position Fix (Script)

修复unity的一个bug?具体不知道unity本身修复了没有。

5.3.2 Play Story
  • 关于Button的动画:
    在这里插入图片描述
    在这里插入图片描述
    正常情况,Normal播放到最后帧
    鼠标经过,播放Highlighted到最后帧,离开后,播放Normal
    按下,播放Pressed,离开后,播放Normal
    Disabled为控件禁用时要使用的触发器
    这个项目里主要就是Normal与Highlighted,其他都是选中状态。
    通过按钮对象下的Normal和Highighted对象,来提供显示的内容。

  • 关于Button的声音:
    UI Element Sound (Script)
    用于控制按钮进入和按钮点击的声音播放

  • 关于Button的动作:
    MainPanelManager.PanelAnim : 切换内容层级
    另外2个动作,是把页面上面的类别和页面下面的快捷栏隐藏显示了下
    目的是让这个2个部分可以还原为最初状态;

这2个动作感觉可以优化下,比如给每一个Panel设置一个初始状态的设置脚本什么,不要这么零碎去解决

5.3.3 Exit Game
  • 其他按钮非常类似,最后一个按钮有些不同
  • 按钮动作:
    BlurManager.BlurInAnim : 对于弹出框,这里重新建立一个Blur Modal的材质来控制毛玻璃效果
    第2个动作,显示一个弹出框,弹出框的逻辑,在下一节里讲。

5.3 Key Shortcut List

  • 底部的快捷按钮栏目
  • 按钮点击,出现弹出框

5.4 Key Helpers

  • 通过 Press Key Event (Script) 实现按钮控制

6. Modal Windows 弹出框模块

以Exit举例,其他相同
在这里插入图片描述

6.1 Exit 动画 Modal Window

  • Modal Window Start : 开始,对Exit和Exit下的Content的CanvasGroup的透明设置为0
  • Modal Window In : 显示整体
  • Modal Window Out : 隐藏整体

6.2 背景

Exit弹出框有2个背景,Blur(毛玻璃)和Backgroud(黑色背景)

6.3 Brush Transition In

Modal Transition动画:主要是控制 UI DissovleEffect来显示黑色遮罩的
这里有PT Delay,PT In Out,PT Loop三组动画,然后结合出动画流程

6.4 关闭按钮

关闭按钮执行了ModalWindowManager.ModalWindowOut

6.5 ModalWindowManager (Script)

这个脚本用作控制弹出框的进出动画:

  • ModalWindowIn() : 启动了Modal Window In和Transition Out 2个动画 (Transition Out动画的Speed为-2,倒播)
  • ModalWindowOut() : 启动了Modal Window Out和Transition In 2个动画

当在一个动画下,有子动画的时候;子动画能接管父动画没有控制的项目,而父动画已经控制了的项目(比如x轴),则子动画就不能再控制


7. Play Story

在这里插入图片描述

7.1 整体结构

  • Background 背景
  • Brush Transition 背景前面的黑色框,以UI Dissolve效果呈现出来
  • Content 内容
    包括Title(标题文字),Close(关闭按钮),Category Button List(Tab选择框),Chapters和Load Save两个内容版块
  • Key Shortcut List 底部快捷按钮
  • Key Helpers 快捷键
  • Panel Tab Manager (Script)
    在这里插入图片描述
    参数这里拉入2个Panel和2个对应的按钮,按钮点击,执行此脚本下函数:
    PanelAnim(int newPanel) : 这里主要做了Panel的动画和按钮切换的动画

7.2 Chapters

  • 滑动框 : 使用Scroll Rect,List用Horizontal Layout Group和Content Size Fitter;左右加了Left Corner Brush和Right Corner Brush来做左右遮罩
  • 内容框:使用Button的Animation动画模式,解决鼠标放上去的效果
  • Scrollbar :在滚动条上,加入ScrollForMore.CheckValue 分为左右2个动作,控制当滚动条到底部或开始的时候,箭头不显示的问题。

7.3 Load Save

  • 这个部分如果增加内容,滚动条并没有做好,比较简单的一个样式

8. Play Story

在这里插入图片描述

  • 整体结构与上述相同
  • 一个普普通通的内容滚动框,就是看起来很漂亮而已。

9. Help

在这里插入图片描述
在这里插入图片描述

  • 作者把整个键盘都分类做出来了,值得收藏。

10. Settings

在这里插入图片描述
这里提供2种下拉框,Radio框,Slider框共4种样式,其中下拉框是通过勾选icon来开启图标下拉框。
具体各Form组件实现细节不展开讨论。

©️2020 CSDN 皮肤主题: 编程工作室 设计师:CSDN官方博客 返回首页