




版权说明:本文档由用户提供并上传,收益归属内容提供方,若内容存在侵权,请进行举报或认领
文档简介
第4章可视化编程工具Bolt
4.5操作实例2:技能冷却UI动画制作
.目录.1UI构建解析.2使用Bolt实现冷却动画
技能冷却UI动画是游戏中常见的一种效果,如图所示,当某种条件达成后,就以一定的速度在UI图标上展现一个顺时针或者逆时针的图片阴影旋转消失动画。本节通过实现该功能来演示Bolt关于UI的操作方法。(1)
UI的具体功能决定了它的层次结构。本例中技能冷却UI的表现形式是:鼠标指针划入图标时,图标四周出现一个提示框;鼠标指针划出图标时,提示框消失;鼠标单击图标,出现技能冷却UI动画。技能冷却图标的各种状态,如图所示。1.
UI构建解析
鼠标指针划出状态
鼠标指针划入状态
技能冷却状态(2)因为有这样的状态变化,所以这个UI需要3张图,一张是正常的图标,一张是边框图,还有一张是覆盖在图标上的黑色图。其中边框图和黑色图都是具有Alpha通道的带透明度的图片。技能冷却图标的层级结构如图所示。在默认的正常状态下,将“BorderImage”和“BufferImage”2张图片都先隐藏起来。1.
UI构建解析
(1)在正常状态的物体上,也就是在上页图中的“IconImage”物体上,添加FlowMachine组件,单击“New”按钮,新建一个Macro。单击“EditGraph”按钮打开FlowMachine的编辑窗口。2.
使用Bolt实现冷却动画(2)添加Events类里的OnPointerEnter和OnPointerExit功能模块,以获取鼠标指针划入事件和鼠标指针划出事件。与它们对接的都是SetActive模块,利用“Value”属性的不同赋值,实现对“BorderImage”物体,也就是边框图片的隐藏或显示。提示框的功能实现如图所示。2.
使用Bolt实现冷却动画(3)要实现UI图片阴影旋转消失的技能冷却效果,需要先修改UI的Image组件属性。单击层级结构中的“BufferImage”物体,按图所示,对Image组件进行修改。其中,“ImageType”属性改为“Filled”,“FillMethod”属性选择“Radial360”,这样图片就是以图片中心为原点,采用360°旋转的形式进行填充。配合设置“FillAmount”属性的数值,就能决定填充的范围。1代表360°,全部填充;0代表0°,全部无填充。下面主要介绍通过Bolt来修改“FillAmount”属性。2.
使用Bolt实现冷却动画(4)根据前面说明的操作过程,先总结出技能冷却操作的流程。实现技能冷却效果的流程图如图所示。2.
使用Bolt实现冷却动画(5)仔细观察上页的流程图,会发现鼠标单击事件的发生是瞬间的,而图片填充属性“FillAmount”的减少是一个会持续一段时间的过程,每一帧都将“FillAmount”减去上一帧的时间间隔“Time.DeltaTime”,而一帧的时间间隔是一个很小的数字。2.
使用Bolt实现冷却动画(6)在逻辑上,一个瞬间发生的事件只能触发一个过程的开始,但不能维持一个过程的持续。要维持一个持续过程,需要另外定义一个布尔类型的变量来作为中间沟通的桥梁。假设这个变量名称为“isStart”,则修改后的流程变为两个部分,修改后的实现技能冷却效果的流程图,如下页图所示。鼠标单击事件只影响布尔类型变量isStart的值,而isStart变量决定了图片填充属性“FillAmount”是否开始变化,并维持变化的过程,直到“FillAmount”属性小于等于0,这个过程才结束。2.
使用Bolt实现冷却动画2.
使用Bolt实现冷却动画(7)依照修改后的流程图,首先需要添加一个自定义变量isStart,如图所示,“Value”复选框没有勾选,说明其初始值设定为False。这个变量可以是全局的,也可以是局部的。本例将其放在层级结构中的“IconImage”物体上,作为局部变量使用。2.
使用Bolt实现冷却动画(8)鼠标单击改变isStart变量,并将“BufferImage”物体显示出,鼠标单击事件驱动改变变量和物体显示状态如图所示。OnPointerDown模块获取鼠标单击事件,调用SetVariable模块将isStart变量赋值为由Boolean模块提供的True值,并将isStart赋值给SetActive模块的“Value”属性,从而将“BufferImage”物体设置为显示状态。2.
使用Bolt实现冷却动画(9)最后实现“BufferImage”的冷却动画。为了方便处理且减少逻辑模块的使用,这一步骤中不使用前面创建的FlowGraph,而是在“BufferImage”物体上新建一个FlowGraph。完成后的冷却动画逻辑结构如下页图所示。1号框里采用Update和GetVariable模块,每一帧都判断isStart变量是否为True,如果为True,就执行3号框里的SetFillAmount模块来设定“BufferImage”的“FillAmount”属性,设定的值由2号框里的GetFillA
温馨提示
- 1. 本站所有资源如无特殊说明,都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
- 2. 本站的文档不包含任何第三方提供的附件图纸等,如果需要附件,请联系上传者。文件的所有权益归上传用户所有。
- 3. 本站RAR压缩包中若带图纸,网页内容里面会有图纸预览,若没有图纸预览就没有图纸。
- 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
- 5. 人人文库网仅提供信息存储空间,仅对用户上传内容的表现方式做保护处理,对用户上传分享的文档内容本身不做任何修改或编辑,并不能对任何下载内容负责。
- 6. 下载文件中如有侵权或不适当内容,请与我们联系,我们立即纠正。
- 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。
最新文档
- 【正版授权】 ISO 9612:2025 EN Acoustics - Determination of occupational noise exposure - Methodology
- 2025年税务师之涉税服务实务模考预测题库(夺冠系列)
- 多宝乐园教学课件图片
- 参与式教学课件
- 心理学基础(第2版) 课件 第10章 动机
- 少儿英语培训教学课件
- 偷影子的人教学课件
- Brand KPIs for milk alternatives:So Good in India-英文培训课件2025
- 《荷塘月色》教学课件
- 2025年工业互联网平台IPv6技术升级下的工业互联网平台市场拓展策略研究报告
- 江苏省扬州市江都区2024-2025学年七年级上学期第一次月考数学试卷
- 木材原木采购合同范本
- EPC光伏项目投标方案(技术方案)
- 家庭医生签约服务手册
- 膝关节骨节炎康复诊疗规范
- 立式压力蒸汽灭菌锅确认方案
- 2024活动委托承办服务合同协议书范本
- 2024年全国高考Ⅰ卷英语试题及答案
- (1000题)焊工(初级)理论考试题及参考答案
- SL-T+62-2020水工建筑物水泥灌浆施工技术规范
- 人民军队优良传统附有答案
评论
0/150
提交评论