Unity Dark UI 学习笔记

最新推荐文章于 2024-08-09 07:16:46 发布
最新推荐文章于 2024-08-09 07:16:46 发布
阅读量724 收藏 2
点赞数 1
分类专栏： Unity
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_17523181/article/details/108777274
版权

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组件实现细节不展开讨论。

朗迹 - 张伟
关注
专栏目录
GitHub热门开源项目-2024版
生活在别处
07-15 737
前台商城系统包含首页门户、商品推荐、商品搜索、商品展示、购物车、订单流程、会员中心、客户服务、帮助中心等模块。中英文敏感词、语言检测、中外手机/电话归属地/运营商查询、名字推断性别、手机号抽取、身份证抽取、邮箱抽取、中日文人名库、中文缩写库、拆字词典、词汇情感值、停用词、反动词表、暴恐词表、繁简体转换、英文模拟中文发音、汪峰歌词生成器、职业名称词库、同义词库、反义词库、否定词库、汽…互联网 Java 工程师进阶知识完全扫盲：涵盖高并发、分布式、高可用、微服务、海量数据处理等领域知识。各取所需，高效学习。
电子邮件链接mailto_“ 3个链接”电子邮件的历史记录以及曾经发送的每个链接的存档...
热门推荐
cumi7754的博客
07-17 3万+
电子邮件链接mailtoby Quincy Larson 昆西·拉尔森(Quincy Larson) “ 3个链接”电子邮件的历史记录以及曾经发送的每个链接的存档 (The history of the “3 links” email and an archive of every link ever sent) It was March 2016. The freeCodeCamp comm...
UnityDarkSkin：Unity编辑器中UI主题的切换器（浅色->深色）（。NET，WPF）
02-06
UnityDarkSkin 关于 如果需要，此工具可在Unity Editor中制作Dark Theme，并将其变回“可怕的” Light Theme。 这对于Unity Personal很有用，因为默认情况下主题设置被禁用。 这不是裂缝！ 它只是在Editor.exe中更改了几位 用法 使用Visual Studio编译两个项目之一（UnityDarkSkin.App或UnityDarkSkin） 1.1。 对于UnityDarkSkin项目：将UnityDarkSkin.exe移动到Unity.exe所在的文件夹1.2。 对于UnityDarkSkin.App项目：在此阶段不执行任何操作（
[unity]深色模式/浅色模式
averagePerson的博客
11-08 1068
选项的路径如下：Edit—Preferences—General—Editor Theme。
DarkUI 开源项目使用教程
最新发布
gitblog_00511的博客
08-09 768
DarkUI 开源项目使用教程 DarkUIDark themed control and docking library for .NET WinForms.项目地址:https://gitcode.com/gh_mirrors/da/DarkUI 1. 项目的目录结构及介绍 DarkUI 是一个用于 .NET WinForms 的暗色主题控件和停靠库。项目的目录结构如下： DarkUI/ ├...
DarkUI：适用于.NET WinForms的深色主题控件和对接库
02-05
黑暗UI .NET WinForms的深色主题控件和对接库。 关于DarkUI DarkUI试图创建一个简单的，可扩展的控件库，以模仿流行的选项卡式文档界面（如Visual Studio，Photoshop，WebStorm和XCode）的外观。 最初只是基于WinForms的一些错误修复和增强功能的集合，现在它已经演变为功能全面的对接和控制库。 查看我们的。 归因 特别感谢的团队将库扩展到包括DarkComboBox ， DarkGroupBox和DarkNumericUpDown 。 如何使用 学习如何使用DarkUI的最好方法是查看源代码中包含的Example项目。 它将向您展示如
Unity关于UGUI的特效包UIEffect
天富儿的博客
06-15 1万+
UGUI的特效插件UIEffect资源介绍有关功能UI效果UI流光UI溶解UI 饱和度修改UI 过场动画效果UI 渐变色UI 翻转使用资源链接参考 资源介绍 UIEffect如其名，t为Unity UI提供了视觉效果组件。Demo 完善所见即所得，大家应该用得上。 让我们用效果装饰UI！您可以从脚本以及检查器中随意控制参数。当然支持AnimationClip！ Unity 2017.1或更高版本 有关功能 可以实现超多效果，包括但不限： UI效果 图片处理：灰度图，做旧图，负片效果，图片像素化 颜色处
关于资源UI特效unityUGUI
SeptemberTan的博客
12-17 839
unity_UGUI特效讲解 如有需要5积分即可下载
Dark Wonder（暗黑奇侠）学习笔记
LN_Polaris的专栏
11-13 3108
经过长时间的磕磕碰碰、写写停停，总算是将这款麻雀虽小，五脏俱全的Dark Wonder做完了，感觉又对Unity有了更进一步的掌握。          这是一款3d类型的很小的一款RPG游戏，剧情也是很简单：主角（精灵）的心爱之人雨狐被邪恶的山神抓走了，主角需要将雨狐就出来。雨狐被关到围着栅栏的房子中，主角需要取得恐龙的帮助去摧毁栅栏，救出雨狐。要想取得恐龙的信任，主角需要修炼技能，杀死巨魔，取
DarkWars
03-19
作为一款以“Dark”为主题的游戏，它很可能包含了一些策略、冒险或者角色扮演的元素，带给玩家深入黑暗世界的体验。由于是用Java语言编写，我们可以深入探讨Java在游戏开发中的应用以及该项目可能涉及的技术栈。 ...
Go 相关的框架，库和软件的精选清单
开发之路
07-03 4908
概述 这是一个Go 相关的框架，库和软件的精选清单，引用自 awesome-go项目，并翻译补充而来这是一个Go 相关的框架，库和软件的精选清单，引用自 awesome-go项目，并翻译补充而来 音频和音乐 用于处理音频的库。 EasyMIDI -EasyMidi是一个简单可靠的库，用于处理标准Midi文件（SMF）。 flac支持FLAC流的Native Go FLAC编码器/...
DarkUI_框架_
10-03
c#框架 可以学习使用，建议参看看看，谢谢大家
模仿photoshop代码
10-28
自己写的模仿photoshop功能的vc源代码。对PS感兴趣的认识可以借鉴。
UIEffect-upm.zip
06-11
Unity3D根据UGUI的各种特殊效果，内有Demo场景，使用简单。Unity2018.3.14f1亲测可用。
Unity毛玻璃模糊效果Shader
08-03
Unity毛玻璃模糊效果Shader，直接赋值到材质球上进行使用即可。
Unity 高斯模糊(Gaussian Blur) 在UGUI中[高效][易用][效果棒]的实用方案
04-19
2019-04-19 新鲜出炉的原创作品 超实用的 Unity 高斯模糊(Gaussian Blur) 在UGUI中[高效][易用][效果棒]的实用方案 原文地址：https://blog.csdn.net/weixin_43452343/article/details/89407650 应该就是你想要
SQL语法整理（五）-视图
veggietaler的专栏
09-15 5996
视图 含义：从数据库一个或多个表中导出的虚拟表 作用： 方便用户操作: 要求所见即所需，无需添加额外的查询条件，直接查看 增加数据的安全性：通过视图，用户只能查看或修改指定的数据 提高表的独立逻辑性：原有数据表结构的变化，不会影响视图，如果修改原有列，则只需修改视图即可。 创建视图 语法： MYSQL create [algorithm = {undefined | merge | temptable}] view 视图名[{属性清单}] as select 语句 [with [cascaded|loc
【Shader特效】—— UI 溶解
xdedzl的博客
04-19 1565
前两天在shadertoy上看到了一个图片溶解的效果，移植到unity中并做了一些改动。 1.效果 2.shader Shader "Custom/UI/Dissolve" { Properties { _Color ("Color", Color) = (1,1,1,1) _MainTex ("MainTex", 2D) = "white" ...
基于Unity的编辑器开发(一): GUI框架技术
逍遥剑客
04-26 1万+
需求背景 技术挑战 GUI框架技术 Unity渲染窗口 GUI Docking Property Editor 小结 需求背景 用Unity开发的游戏, 需要做个关卡编辑器. 如果只是内部用用, 其实直接扩展Unity就够了; 但问题是需要发布给外部的用户使用, 那么总不能把全套资源和Unity发给他们, 所以就诞生了这么个奇葩需求. 技术挑战 既然用了Unit...
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

朗迹 - 张伟

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值