《崩坏：星穹铁道》动效浅析：大厂设计逻辑背后，“太空歌剧”里的固定旋律。

东方大婶

福州/UI设计师/3年前/421浏览

版权

东方大婶

《崩坏：星穹铁道》动效浅析，探寻大厂的设计逻辑，分析研究逻辑背后的技术。

“ 《崩坏：星穹铁道》动效浅析，探寻大厂的设计逻辑，分析研究逻辑背后的技术。”

公众号原文
https://mp.weixin.qq.com/s?__biz=Mzg4MzUzMjcxOQ==&mid=2247483880&idx=1&sn=95496f43a00fa7ffa2c21c984080e4c7&chksm=cf44b728f8333e3e05574c34fba2fff7012647cdeda22c74681559cefe597d8100e18874ff47#rd

- 第一部分 -

前言

《崩坏：星穹铁道》是由米哈游开发的银河冒险角色扮演游戏，对应Android、iOS、Windows平台，并于前几日国服版号终于有了声音。官网也陆续开启了「跃迁测试」的招募活动！感兴趣的朋友快去预约吧。

版号| 崩坏：星穹铁道

这是崩坏系列的第四部，米哈游作为全球收入TOP的二次元大厂，依然秉持着很高的美术水准。抱着学习的态度，大婶在这里跟大家分享"第一手动效资料"跟一些个人的理解。

- 第二部分 -

交互体验动效

交互体验动效游玩游戏过程中，对玩家的行为做出反馈、引导、升华的动效，我把它统称为交互体验动效。

反馈

该类动效在UI上尤为的重要，意在对玩家的用户输入（点击、拖动、双击...）做出及时的响应。不至于在操作中由于网络等问题导致的无响应，以为是游戏或者其他问题。再者就是提升一个风格的整体性。

引导

在玩家不知所措的时候，给予玩家一个正确的指引，帮助玩家对游戏系统建立一个基础的认识，甚至起到提升游戏流畅度的作用。

升华

一般常见于较为有表现力的动效，例如升级、升星、获得道具等,关键时候提升成就感，还可以用来跟付费系统进行关联，对一个付费点进行包装跟强化。

👇升华、引导 | 等级提升、按钮处提示升级

👇升华、引导| 抽卡、按钮处提示抽卡

👇反馈 | 获得物品

👇反馈 | 新功能开启

- 第三部分 -

高级转场动效

用于衔接前一个游戏场景跟后一个游戏场景的作用，主要用途就是贯穿剧情，以及减少多个画面切换导致的违和感，还能强化整体世界观，给玩家营造一个整体的包装感。从而提升品质。这类手法在影视中、Vlog中也常有类似的应用场景，比如黑白转场、相似物转场、特效转场、动势转场等等。这块内容后续打算单独开一篇文章重点跟大家分享，感兴趣的小伙伴可以关注下超自然动效。这次先带大家大致感受下高级转场在游戏中是如何呈现的。

👇相似物转场 | 画面中心的两个角色作为核心放大转换到主画面

👇特效转场、黑白转场 | 采用一个全屏的碎屏效果在快结束的时候增加一个黑白转场

👇特效转场、黑白转场| 穿梭隧道的特效转场结束后衔接一个黑白转场

👇特效转场、黑白转场 | 击中怪物的瞬间空间扭曲到星穹空间然后衔接一段特效转场

不难发现这次崩坏系列的第四曲，在整体的美术感受上主要会更接近在星空中穿越的感觉。跟他以银河冒险为题材的主题也很符合。一些小反馈上也更多的采用点状、线、方块、星星这类的元素比较多，在整体风格统一的情况下，增加这类小元素极大的丰富了细节。

- 第四部分 -

案例Demo

还是老样子，这次我们拿文章中最后一个转场动效做一个简单的拆解分析。本次DEMO跟游戏一样采用UNITY进行制作，相关的模型、贴图、材质、源文件都会完整的一一分享给喜欢研究动效的朋友。

👇2K | 高清完整视频效果看这里

本次可以分为三个部分来拆解。

👇gif低清录制-前段部分（开头致敬下神作）

超自然动效Logo基础动效、扫光配合画面从正常时间->子弹时间，同时用了一个后处理材质的空间扭曲效果(在源文件中有提供)把画面往视觉的中心拉扯，加强这种穿梭感。

紧接中段循环星空效果的进入表现，进一步强化空间感。在前后场景变化较大的情况下，使用了一个特效转场进行衔接，形状大概如下图所示。

星空氛围循环动效(粒子、色散的光柱)。

👇gif低清录制-中段部分

中段持续星空氛围循环动效，时间上并不短，我大概的猜测一是节奏上需要一定的循环时间来平衡整段表现，不至于过于紧凑。二是给后面的战斗场景一些加载的时间，这一点在实际的开发过程中还是很重要的。

👇gif低清录制-后段部分

后段相对而言就比较简单了，一个光柱扫过(类似星空中流星扫过)，配合一个遮罩特效转场，整个表现就完成了，需要细心调整的难点在于空间扭曲到循环时候到一个节奏感，也是整个效果的核心体验。你会发现特效转场在游戏中还蛮常用，更多的思考是如何结合游戏风格找到一个合适的切入点。例如这次《崩坏：星穹铁道》结合星战背景想营造一种在银河中的感觉，UI风格又偏科技感一些，所以在游戏游玩过程中整体穿梭的动势会运用比较多，上面的例子都有展示到。而一些用于辅助的小元素会采取科技游戏中点线结合的形式，以及银河中常见的点、星星、光斑等等。