Unity 3-6 UI框架 (基于UGUI)
任务1&2&3&4:介绍 && 创建工程
UI框架:
管理场景中所有UI面板
控制面板之间的跳转
如果没有UI框架,会通过面板之间的交叉访问来实现这些功能,管理混乱
创建工程UIFrameWork:
创建工程目录
导入素材,将素材放入Images文件夹下
将所有素材的Texture Type修改为Sprite(2D and UI)
任务5:主菜单面板
创建 UI->Panel,命名MainMenuPanel,
Image->SourceImage: BG
将Canvas的Canvas Scaler.UI Scale Mode = Scale with Screen Size
将Match设置为Height
-- 即自适应:
如果UI Scale Mode为默认的 Constant Pixel Size时,文字等的大小不会基于屏幕大小而改变
设置为Scale With Screen Size, 控件的大小会基于Height或Width(只有一个)的变化而变化
新建空物体,命名IconPanel,位于屏幕右下角,并设置Anchor
新建Image: SourceImage 任务 TastButton
添加Button组件
新建Text:颜色黄白色,大小,字体,对齐等
给Text添加Shadow组件
取消Raycast Target的勾选
在Project的Images文件夹下新建UI Prefab文件夹,将上述按钮制作成prefab
通过上述prefab制作其他按钮,依次为背包、战斗、技能、商店、系统
在MainMenuPanel中创建Image,命名PersonalInfoPanel,SourceImage: pic_个人信息
取左上角为Anchor,位置也移到左上角
新建Image,命名portrait,SourceImage: 头像底板女性
将整个MainMenuPanel制作成Prefab,放入Resources->UIPanel文件夹
任务6:任务面板
新建Image,命名TaskPanel,SourceImage: bg-任务
位置居中,anchor居中
新建Text,内容"任务",位于标题栏处,修改字体、颜色等
新建Button,命名CloseButton,SourceImage: btn_关闭1
删除自带的Text
Button.Transition选择Sprite Swap (默认ColorTint)
分别选择:
Hightlighted Sprite: btn_关闭2
Pressed Sprite: btn_关闭3
Disabled Sprite: btn_关闭4
制作成Prefab,放入Resources.UIPanel文件夹
任务7:背包和物品弹框信息面板
背包面板:
新建Image,命名KnapsackPanel,SourceImage: bg_背包,居中
新建关闭按钮,使用上一节中的即可
新建Image,命名ItemSlot,SourceImage: bg_道具
新建Image,命名Item,SourceImage: 大体力丹
因为KnapsackPanel和ItemSlot不需要点击,因此将Image的Raycast Target取消勾选
在Item中添加Button组件
物品弹框信息面板:
新建Image,命名ItemInfoPanel,SourceImage: bg_弹框,取消RaycastTarget的勾选
新建关闭按钮
任务8:其他的UI面板
点击战斗按钮,会直接跳转到战斗场景,因此不需要面板
技能、商城、系统的面板,都和TaskPanel差不多,赋值TaskPanel,修改即可
技能面板:SkillPanel
商城面板:ShopPanel
系统面板:SettingPanel
修改完名字,制作成Prefab,进行更改
将Text的内容分别修改为技能、商城、系统设置即可
系统面板的宽度修改小一些
任务9:通过Json和枚举保存所有面板的信息
在进行面板切换之前,需要知道当前项目有哪些面板、各个面板的加载路径
将这些信息传递给UI框架后,再由UI框架进行UI面板的加载操作
-- 使用Json信息来保存所有的面板和路径
每一个面板都定义一个枚举类型
新建脚本UIPanelType.cs
枚举类型不需要继承自MonoBehaviour
一个Panel对应一个UIType类型
public enum UIPanelType { TaskPanel, KnapsackPanel, ItemInfoPanel, SkillPanel, ShopPanel, SettingPanel }
新建Json文件(在电脑中UIFramework文件夹下创建文本文档)
UIPanelType.json -- 用来保存所有面板对应的存储路径
-- bug!!! 任务11中发现不能这么写,不能被JsonUtility解析
[ { "panelType": "MainMenuPanel", "path": "UIPanel/MainMenuPanel" }, { "panelType": "TaskPanel", "path": "UIPanel/TaskPanel" }, { "panelType": "KnapsackPanel", "path": "UIPanel/KnapsackPanel" }, { "panelType": "ItemInfoPanel", "path": "UIPanel/ItemInfoPanel" }, { "panelType": "SkillPanel", "path": "UIPanel/SkillPanel" }, { "panelType": "ShopPanel", "path": "UIPanel/ShopPanel" }, { "panelType": "SettingPanel", "path": "UIPanel/SettingPanel" } ]
通过百度,进行Json文件的校验
使用Unity自带工具 JsonUtility进行Json数据的解析
任务10&11&12:开发UIManager解析Json信息 && UIManager单例模式
将Json中的信息读取并存储到Dictionary中,key为type,value为path
在UIFramework文件夹下创建UIManager.cs类
UIManager是一个管理器,不是组件,因此不需要继承自MonoBehaviour
UIManager是单例模式
private Dictionary<UIPanelType, string> panelPathDict; // 来存储所有面板prefab的路径
解析Json信息的方法:
在UIFramework文件夹下创建Resources文件夹,将.json文件放入(因为需要使用Resources.Load()加载数据
TextAsset ta = Resources.Load<TextAsset>("path");
// 这里的path是UIPanelType,见Unity的project中,是没有json后缀的,所以不用写
JsonUtility API:
FromJson() -- Create an Object from its Json representation
ToJson() -- Generate a Json representation of the public fields of object
首先需要定义一个类,用于存储Json文件中的数据,类中成员变量需要和Json数据完全对应
注意点:
JsonUtility支持的数据格式是对象的格式,必须符合:{ "key": ["", "", "", ... ] }
如果是 json 数组会提示错误 JSON must represent an object type
被转换的对象必须是可被序列化的,需要标记 [System.Serializable] 属性
新建脚本UIPanelData.cs
相同的,UIPanelData用于存储信息,不需要继承自MonoBehaviour
[Serializable] -- 可序列化的 -- using System;
序列化:将内存的数据存储到硬盘上
反序列化:从文本信息到对象的过程
这里需要把文本文件的内容读取到内存中,而这个类就是用于传递数据的。
所以这个类需要用 [Serializable] 标识
变量名完全相同:
public UIPanelType panelType;
public string path;
[System.Serializable] public class UIPanelInfo { public UIPanelType panelType; public string path; }
-- 注意,这里的两个Serializable都是必须的,UIPanelInfo和UIPanelInfoList
通过JsonUtility将数据读取并存储到UIPanelInfo的对象中
-- (这里是有bug的,下面详述)
JsonUtility.FromJson< List<UIPanelInfo> >(textAsset.text);
// 返回值即List<UIPanelInfo>,新建变量存储
List<UIPanelInfo> panelInfoList = ...;
将List中的信息传递到Dictionary中
foreach( var element in panelInfoList) {
panelPathDict.Add(element.panelType, element.path);
}
将UIManager写成单例模式
-- 构造方法私有化,防止在外界实例化/ 调用构造方法
内部进行实例化
在构造方法中调用上述获取数据的方法
private UIManager() {
ParsePanelTypeJson();
}
public class UIManager { private Dictionary<UIPanelType, string> panelPathDict; // 单例模式 -- 构造函数为private private UIManager () { ParsePanelTypeJson(); } private void ParsePanelTypeJson() { // 用Resources.Load()从Json文件中读取text数据 TextAsset textAsset = Resources.Load<TextAsset>("UIPanelType"); // 将Json格式的text数据转换成List<>数据 List<UIPanelInfo> panelInfoList = JsonUtility.FromJson<List<UIPanelInfo>>(textAsset.text); // 把List的存储到Dictionary中 foreach(var element in panelInfoList) { panelPathDict.Add(element.panelType, element.path); }}}
定义一个静态私有变量
private static UIManager _instance;
提供这个静态私有变量的构造方法
public static UIManager Instance { // get方法公有,因为需要在外界访问该实例 get{ if(_instance == null) { // 第一次访问Get时,就会创建一个UIManager,且只有在这里能够创建 _instance = new UIManager(); // UIManager构造函数为私有,因此只能在内部调用 // 构造的时候,对Json数据进行解析读取 } // 之后访问时,就会直接得到之前创建的UIManager,保证了单例 return _instance; } }
新建GameRoot.cs脚本,用于控制游戏启动,相当于开始脚本
把GameRoot挂载在Canvas上,因为他是UI的启动器
UIManager.Instance.Test();
报错:ArgumentException: JSON must represent an object type.
https://answers.unity.com/questions/1148632/jsonutility-and-arrays-error-json-must-represent-a.html
https://blog.csdn.net/kenight/article/details/78787259
原因:JSON需要转为一个Object,而不能是一个List的Object
在UIManager中创建类UIPanelInfoList,用来存储List<UIPanelInfo>
[System.Serializable]
class UIPanelInfoList {
public List<UIPanelInfo> panelInfoList;
}
将UIPanelType.json中的数据改为 -- 一个对象,对象里只有一个属性
{
"panelTypeList" : [
{...}, {...}, {...}, ...
]
}
此时,从JsonUtility.FromJson<UIPanelInfoList>(textAsset.text)返回的为UIPanelInfoList类型的对象
进行foreach (UIPanelInfo panelInfo in panelInfoList.panelInfoList) { }
若是Debug.Log出每一个panelInfo.panelType,会发现输出了7个MainMenuPanel
-- 为什么呢???
原因:JsonUtility解析时发生了错误:返回的都是枚举类型UIPanelType的默认值MainMenuPanel
详细说明:Json解析对于UIPanelInfo中的成员变量UIPanelType无法解析
解决方案:
在public UIPanelType panelType;上加上 [NonSerialized],表示不需要解析
添加成员变量 public sting panelTypeString;
相对应的,将json文件中的key从"panelType"改为"panelTypeString"
现在,Json数据就能被正常解析了
但是:UIPanelInfo.panelType并未赋值
让UIPanelInfo继承自ISerializationCallbackReceiver接口
需要实现两个方法
public void OnAfterDeserialize() {
// 在反序列化之后自动调用 -- 即从Json文本数据解析至对象之后,进行调用
panelType = (UIPanelType) System.Enum.Parse(typeof(UIPanelType, panelTypeString);
}
public void OnBeforeSerialize() {
// 在序列化之前自动调用 -- 这里没有牵涉到序列化
// 将对象的数据写成Json文本文件
}
// System.Enum.Parse(System.Type enumType, string value);
// 返回类型为object,将object强制转换为UIPanelType,赋值给panelType
// 即完成了赋值操作 -- 将string的值赋给了相应的枚举类型
[System.Serializable] public class UIPanelInfo : ISerializationCallbackReceiver { [System.NonSerialized] public UIPanelType panelType; public string panelTypeString; // Json解析赋值给string,不能给Enum public string path; public void OnAfterDeserialize() { // 反序列化之后调用,即从Json文本数据解析至对象之后,会进行调用 // Debug.Log(panelTypeString); panelType = (UIPanelType)System.Enum.Parse(typeof(UIPanelType), panelTypeString); } public void OnBeforeSerialize() { } }
成功输出每个UIPanelType,和最后一个从Dictionary中取得的path值
任务13:面板基类BasePanel
得到了panel的路径以后,就可以通过路径来加载panel的prefab
加载出来的panel就是一个游戏物体,每个panel都需要一个对应的脚本来实现它的功能
BasePanel.cs -- 实现所有面板共有的功能
其他所有面板的脚本都需要继承自BasePanel,如 ItemInfoPanel : BasePanel
因为其他面板是可变的,不属于UI框架的,因此将这些脚本放入Scripts->Panel,而BasePanel.cs放入UIFramework->Base
任务14&15:创建和管理UI面板的Prefab的实例化 && Dictionary的扩展方法
UIManager.cs中管理所有UI面板
创建字典 panelDict -- 保存所有的实例化后的面板上所挂载的BasePanel脚本组件
private Dictionary<UIPanelType, BasePanel> panelDict;
方法GetPanel -- 根据panelType来得到实例化面板上所挂载的BasePanel脚本组件
private BasePanel GetBasePanel(UIPanelType panelType) {
// 判断字典是否实例化
if(panelDict == null) {
// 创建字典
panelDict = new Dictionary<UIPanelType, BasePanel>();
}
BasePanel panel;
panelDict.TryGetValue(panelType, out panel);
// 如果panel为空,则该类型panel未实例化 -- 需要实例化该panel
if(panel == null) {
string path;
panelPathDict.TryGetValue(panelType, out path);
GameObject instantPanel = GameObject.Instantiate(Resource.Load(path)) as GameObject;
// 需要将panel放在Canvas下作为子物体
-- private Transform canvasTrans;
-- private Transform CanvasTrans {
get {
if(canvasTrans == null) {
canvasTrans = GameObject.Find("Canvas").transform;
}
return canvasTrans;
}}
instantPanel.transform.SetParent(CanvasTrans);
// 之后运行的时候会发现,如果就这么写,因为canvas的scale不是1,所以panel的位置信息会错乱,
// 需要修改成instantPanel.transform.SetParent(CanvasTrans, false);
// -- 重载方法SetParent(Transform, bool worldPositionStays): 是否保持物体在世界坐标中的位置
如果为true,则物体的局部坐标会为了使物体在世界中的位置不变而改变
如果为false,则物体的局部坐标就是原本的世界坐标
// 将刚实例化的panel存入panelDict
panelDict.Add(panelType, instantPanel.GetComponent<BasePanel>());
return instantPanel.GetComponent<BasePanel>();
} else { // panel已经存在
return panel;
}
-- 因为Dictionray.TryGetValue(key, out value),因此每次都需要定义一个BasePanel panel,显得很麻烦
定义一个Dictionary的扩展方法,简化操作(放在UIFramework->Extension文件夹)
-- 如何给系统内之类扩展方法
扩展方法的用处:当一个类的源码无法修改,但是又想后期添加方法的时候,就可以使用扩展方法
思路:
1. 类应该为static
2. 扩展的方法为static
3. 返回值类型为泛型,由Dictionary的value类型而定
4. 需要传入Dictionary和key -- 在使用的时候不需要传递Dictionary,详见下
这里的Dictionary需要加修饰符this,表示这个方法是Dictionary类的扩展方法,通过这个类的对象进行调用
因为this就表示了当前对象
DictionaryExtension.cs
public static class DictionaryExtension { public static TValue TryGetValueExtension<TKey,TValue>( this Dictionary<TKey,TValue> dict, TKey key) { TValue value; dict.TryGetValue(key, out value); return value; } }
使用:
在UIManager中,有两个地方替换
BasePanel basePanel处:
BasePanel basePanel = panelDict.TryGetValueExtension(panelType);
string path处:
string path = panelPathDict.TryGetValueExtension(panelType);
任务16&:用栈Stack存储在场景中显示的Panel
17&18&19:面板之间的跳转
Panel的三种状态:
prefab -- 完成 -- panelPathDict
在场景中被实例化 -- 完成 -- panelDict
在场景中显示 -- 未完成 -- 通过栈来管理
为什么适合用栈来实现呢?
面板是一个一个出现,一个一个关闭的
先打开的最后关闭 -- 先入后出
代码实现:UIManager.cs中
private Stack<BasePanel> panelDisplayedStack;
什么时候入栈?
显示页面的时候
public void PushPanel(UIPanelType panelType) {
// 得到该类型的panel
BasePanel panel = GetBasePanel(panelType);
// 入栈
if(panelDisplayedStack == null) {
panelDisplayedStack = new Stack<BasePanel>();
}
panelDisplayedStack.Push(panel);
}
MainMenuPanel是需要存在的
在GameRoot.cs中
Start() {
UIManager.Instance.PushPanel(UIPanelType.MainMenuPanel);
}
Panel之间的切换 -- 通过点击MainMenuPanel上的按钮进行切换
切换Panel的代码在每一个继承自BasePanel的子类 (这里是MainMenuPanel.cs)中实现
public void OnPushPanel(UIPanelType panelType) {
}
在Inspector中,将这个方法注册到所有按钮上,这时,发现找不到这个方法
原因可能是识别不了UIPanelType类型的参数,将其换成string类型,就可以成功注册了
在OnPushPanel中:
// 将string转换成枚举类型UIPanelType
UIPanelType panelType = (UIPanelType)System.Enum.Parse(typeof(UIPanelType), panelTypeString);
// 入栈
UIManager.Instance.PushPanel(panelType);
现在,当我们点击按钮时,就会进行入栈
(出栈在任务22中讲解)
运行,发现点击按钮,相应的panel就会显示出来
1. battle按钮没有对应的panel,了解一下
2. 若重复点击一个按钮,会报错:
ArgumentException: An element with the same key already exists in the dictionary.
1. 删除battle按钮的OnPushPanel()注册
2. 发现是因为在GetBasePanel()实例化一个panel后,出现判断错误
如:
前三句:在GameRoot中执行PushPanel(MainMenuPanel);
中间三局:点击TaskButton
最后一句:再次点击TaskButton,报错
原因很明显:在进行panelDict.Add()的时候没有判断是否panel已在dict中存在
但是这个原因并不能成为原因,因为panelDict.Add()的调用前提就是没有找到panel,才进行实例化的
因此报错的原因在与basePanel == null的判断上
发现第3句和第6句的区别:
第一次push时,将MainMenuPanel push进去了,但是第二次push时,push的为空物体
解决方案:
在PushPanel中,将panel输出,结果为空
而在上面实例化的instantPanel是没问题的,但是instantPanel.GetComponent<BasePanel>()为空
找了半天,妈蛋,是因为没有将TaskPanel等的TaskPanel类声明为BasePanel的子类
就像大司马说的一样:哇,好烦
3. 为什么会直接显示呢,而且
因为入栈会GetBasePanel()
-- 第一次调用,在panelDict中找不到对应panel,会进行Instantiate(prefab)
因此,第一次调用的时候,会按照点击按钮的顺序直接在Game视图中显示出panel
但是,之后再点击,就没有反应了。
而且,再次点击虽然不会Instantiate新的Prefab,但是会对该prefab进行push stack操作
解决方法:是要进行在Stack中是否存在的判断吗?
不,直接将后台禁用。
正常的游戏设计是,只有在Stack栈顶的panel才能进行操作
比如,打开TaskPanel后,MainMenuPanel的功能就不能实现了
代码实现:
给每个panel添加自身的生命周期,通过生命周期来控制panel当前的状态
生命周期状态:
进入显示 -- 点击相关按钮打开该panel,push入栈
暂停 -- 在该panel中点击按钮,打开其他panel,不在栈顶
继续 -- 关闭了其他panel,回到栈顶
移出显示 -- 关闭了自身,从栈中pop出去
因为每个页面都有这个生命周期,因此将这些定义在BasePanel中
在UIManager中进行调用
在BasePanel中
public virtual void OnEnter() {}
public virtual void OnPause() {}
public virtual void OnResume() {}
public virtual void OnExit() {}
任务20&21&22:实现上述出栈入栈和对应生命周期功能
上一节中在基类BasePanel中定义了虚函数
这些函数的触发在UIManager中实现
UIManager.cs中:
入栈 --
在Push入栈之前,调用新入栈panel的OnEnter()
同时判断,若之前栈不为空,需要调用之前的栈顶panel的OnPause()
在PushPanel()中
panel.OnEnter();
if(stack.Count > 0) {
stack.Peek().OnPause();
}
MainMenuPanel中的override:
public override void OnPause() {
// 让MainMenuPanel不再跟鼠标进行交互
// -- 在MainMenuPanel物体中添加组件Canvas Group
// -- 若将CanvasGroup.BlocksRaycasts设为false时,就不会进行鼠标射线检测了
// -- private CanvasGroup canvasGroup = GetComponent<CanvasGroup>();
canvasGroup.blocksRaycasts = false;
}
出栈 --
当点击关闭按钮时,需要注册给关闭按钮一个方法:
以TaskPanel为例,因为MainMenuPanel没有关闭按钮
TaskPanel.OnClosePanel();
{
UIManager.Instance.PopPanel(panelType);
}
在UIManager.PopPanel()中
{
if(panelDisplayedStack == null) { ... = new ...; }
if(panelDisplayedStack.Count > 0) {
// 个人认为一般情况下不会出现为空,因为点击关闭按钮就表示当前有panel显示
// 得到栈顶panel,即即将被关闭的panel
BasePanel panel = panelDisplayedStack.Pop();
// 关闭
panel.OnExit();
// 激活下一层的panel -- 如果有的话(没有的话就不操作)
if(panelDisplayedStack.Count > 0) {
panelDisplayedStack.Peek().OnResume();
} } }
在TaskPanel中,需要override OnExit:
public override void OnExit() {
// CanvasGroup.alpha = 0 表示不显示
// 注意,这里只是不显示,因此还需暂停鼠标交互
canvasGroup.alpha = 1;
canvasGroup.blocksRaycasts = false;
}
在MainMenuPanel中,需要override OnResume:
public override void OnResume() {
canvasGroup.blocksRaycasts = true;
}
运行:
显示主菜单,点击任务,显示任务菜单,关闭,任务菜单消失,再点击任务菜单,没有反应
原因:因为任务面板的canvasGroup.alpha = 0;不显示(当然,也同样不能交互)
解决方法:
因为再次点击任务,会触发MainMenuPanel.OnPushPanel()
-> UIManager.PushPanel() -> TaskPanel.OnEnter()
在OnEnter()中加上
canvasGroup.alpha = 1;
canvasGroup.blocksRaycasts = true;
解决了吗?
运行:报错 --
NullReferenceException: Object reference not set to an instance of an object
TaskPanel.OnEnter () (at Assets/Scripts/Panel/TaskPanel.cs:18)
在canvasGroup.alpha = 1;处报错
原因:
当第一次实例化TaskPanel时
即点击任务按钮->MainMenuPanel.OnPushPanel()->UIManager.PushPanel()->GetBasePanel()时
实例化完TaskPanel,返回taskPanel给PushPanel(),就立即调用了taskPanel.OnEnter()
此时,taskPanel.Start()还未被调用???为什么???
解决方法:
在OnEnter()中进行判断
if(canvasGroup == null) {
canvasGroup = GetComponent<CanvasGroup>();
}
...
在Start()中也进行相同判断
// UIManager.cs中 public void PushPanel(UIPanelType panelType) { BasePanel panel = GetBasePanel(panelType); // Debug.Log(panel); if(panelDisplayedStack == null) { panelDisplayedStack = new Stack<BasePanel>(); } // 进行生命周期的调用 // 因为新Push入栈,所以需要调用OnEnter() panel.OnEnter(); // 如果之前的栈不为空,则之前的栈顶panel需要调用OnPause() if(panelDisplayedStack.Count > 0) { // Debug.Log("peek on pause: " + panelDisplayedStack.Peek()); panelDisplayedStack.Peek().OnPause(); } panelDisplayedStack.Push(panel); // Debug.Log("Push " + panel + " 进入Stack"); } public void PopPanel() { if(panelDisplayedStack == null) { // 不会吧? panelDisplayedStack = new Stack<BasePanel>(); } if(panelDisplayedStack.Count > 0) { // 一般情况不会为空,但还是做一下安全校验 BasePanel panel = panelDisplayedStack.Pop(); panel.OnExit(); // Resume新的栈顶panel if (panelDisplayedStack.Count > 0) { panelDisplayedStack.Peek().OnResume(); }}}
public class MainMenuPanel : BasePanel { private CanvasGroup canvasGroup; private void Start() { canvasGroup = GetComponent<CanvasGroup>(); } public void OnPushPanel(string panelTypeString) { // 将string转换成UIPanelType UIPanelType panelType = (UIPanelType) System.Enum.Parse(typeof(UIPanelType), panelTypeString); UIManager.Instance.PushPanel(panelType); } public override void OnPause() { // 该面板不再和鼠标进行交互 canvasGroup.blocksRaycasts = false; } public override void OnResume() { canvasGroup.blocksRaycasts = true; canvasGroup.alpha = 1; }}
public class TaskPanel : BasePanel { private CanvasGroup canvasGroup; private void Start() { if (canvasGroup == null) { canvasGroup = GetComponent<CanvasGroup>(); }} public void OnClosePanel() { UIManager.Instance.PopPanel(); } public override void OnEnter() { if (canvasGroup == null) { canvasGroup = GetComponent<CanvasGroup>(); } canvasGroup.alpha = 1; canvasGroup.blocksRaycasts = true; } public override void OnExit() { canvasGroup.alpha = 0; canvasGroup.blocksRaycasts = false; }}
总结:UI框架的优点:
后期,当UI框架开发完,只需要对新面板进行override上述生命周期的四个事件方法即可。
任务23:其他剩下的面板之间的跳转
Panel之间的跳转:
MainMenu -> Knapsack; Knapsack close
Knapsack -> ItemInfo; ItemInfo close
MainMenu -> Skill; Skill close
MainMenu -> Shop; Shop close
MainMenu -> Setting; Setting close
代码实现:
在Knapsack/ ItemInfo/ Skill/ Shop/ Setting 中实现
Start() // 判断并赋值canvasGroup
OnClosePanel() // 调用UIManager的PopPanel()即可
OnEnter() // 判断canvasGroup是否为空,为空就赋值,之后设置alpha和blocksRaycasts
OnExit() // 设置canvasGroup的alpha和blocksRaycasts
注册关闭按钮
Knapsack <-> ItemInfo
实现Knapsack子物体ItemSlot->Item的按钮点击注册
OnItemButtonClick() {
UIManager.Instance.PushPanel(UIPanelType.ItemInfoPanel);
}
现在,可以实现物品信息面板的开启和关闭了
但是,开启物品信息面板时,与Knapsack还是可以交互的,点击knapsack的关闭按钮,会关闭物品信息面板
因为Stack的存储机制
实现Knapsack的OnPause() -- 暂停交互 // canvasGroup.blocksRaycasts = false;
实现Knapsack的OnResume() -- 重新开始交互 // canvasGroup.blocksRaycasts = true;
任务24:给面板切换添加动画DoTween
在OnEnter()和OnExit()时做一些动画处理
导入插件DoTween
素材中有Pro版,AssetStore中可以下载到普通版
使用DoTween制作动画
http://dotween.demigiant.com/getstarted.php
以KnapsackPanel为例 -- 平移动画
引入命名空间 using DG.Tweening;
在OnEnter()的最后,实现DoTween动画
// Tweener Transform.DOLocalMove(float endValue, float duration, [bool snapping = false])
Vector3 temp = transform.localPosition;
temp.x = -Screen.width *3/4; // 屏幕外面 (本身宽度大概在屏幕的一半)
transform.localPosition = temp;
// 目标x位置为0,用时0.5f
transform.DOLocalMoveX(0, 0.5f);
相同的,在OnExit()最开始
transform.DOLocalMoveX(Screen.width *3/4, 0.5f);
这时,就不需要改变alpha了
但,如果想要改变alpha呢?
直接放在下面,会导致刚开始进行DOLocalMoveX的时候就已经设置好了Alpha
-- OnComplete()
transform.DOLocalMoveX(..., ...).OnComplete(()=>canvasGroup.alpha = 0);
这样,在进行完动画时,就会回调设置alpha值
以TaskPanel为例 -- 透明度动画
canvasGroup.DoFade(float endvalue, float duration);
在OnEnter()最后
先把alpha设置为0,然后执行动画
canvasGroup.DoFade(1, 0.5f);
在OnExit()最后
canvasGroup.DoFade(0, 0.5f);
以ItemInfoPanel为例 -- 缩放动画
transform.DOScale(float endValue, float duration);
在OnEnter()最后
先把scale设置为0
transform.localScale = Vector3.zero;
实现缩放
transform.DOScale(1, 0.5f);
在OnExit()最后
transform.DOScale(0, 0.5f).OnComplete(() => canvasGroup.alpha = 0);
总结: