读前提示
:GIF有丢帧现象,本文部分效果在GIF图后附有视频可观看完整效果。
本系列的上篇文章《
【半周谈】030 动效如何表达情感-1
》中,我们提到,游戏界面表达情感的三种技术手段:视觉设计、曲线设计与节奏设计。其中后两者是动效设计表达情感的主要手段。
通过几个动效模型的演变,来为大家简单的说明了曲线设计如何影响动效的情感表达。
本篇我们来看看节奏设计如何影响动效的情感表达。
在此之前,我们需要先明确下节奏设计是什么。我将在《
游戏界面动效理论基础 2/3 动效的节奏感
》中对此进行详细说明。
简单的理解的话,动效的节奏设计是由特定的时间规划和组成动效的各个部件之间进行特定组合之后,整体传达给人的感受。
我们通过设计特定的节奏感,可以传达出不同的情绪。而这种情绪就是表达特定情感的基础。
动效的节奏感中,有很大一部分都是为了强调某种特定的情绪的,也就是我们所说的动效情感的表达。
比如我们之前提到的很大一部分“奖励型”界面,就是通过特定的曲线设计,然后将组成界面的不同部分进行特定节奏安排后组合成一个特定的动画,从而表现出特定的张力,或者爆发力,来表达界面本身要表达的“获得”感受的。
比如下图所示的一个示例模型:
假如现在想让紫色的星星通过一个“吸收能量”的过程来充能变成黄色的星星,最后再冷却成为原来的样子。该怎么安排这个动作的动画节奏呢?
首先,我们应该设计出整个过程中星星的主轴动画。包括充能过程的逐渐抖动过程和变色过程,其效果如下:
这个效果很好的表现了充能时星星逐渐因为能量的蓄积而逐渐开始抖动的过程,以及它颜色的一个变化过程。
这一效果的设计应该遵循“聚能”,“爆发”两个阶段的动画节奏:逐渐开始聚能时,星星应该从静止到抖动得越来越剧烈,同时开始变色。到能量到达极点时,星星变黄,同时抖动最为剧烈。然后瞬间爆发,抖动程度逐渐减弱,直到再次静止。从抖动最剧烈到静止的过程,也正是它从黄色变回紫色的过程。
但是充能过程的效果还不够激烈。这时候就需要增加一些额外的元素。这些元素应该在什么时间节点加入,就需要考虑整个动作节奏的逻辑。
其中一个方法应该是,在星星“充能”抖动的过程中,以及爆发的时间点上增加聚集的粒子效果,简单的制作后,效果如下:
需要注意的是,聚能的粒子应该加在前述星星从静止到抖动最剧烈的过程段中,还要注意聚能粒子的数量趋势,应该为从聚能开始逐渐增多,到聚能结束前逐渐变少并消失。爆炸瞬间的粒子效果,应该尽量快,爆开后分散得足够广,以便充分体现爆发过程的巨大能量。这里也增加了一点点重力,让粒子有爆开并逐渐下落的动作细节。
此时,整个效果还是缺乏一些“聚集”能量的效果。仅靠粒子这种实体的物体的聚集效果显然还不够。可以尝试增加“漫画式”的表现,即一些速度线、旋涡线等元素。这也是特效中常用的手段,我们可以借来用以表现更强的效果。
增加了旋涡效果后,如下图所示:
这里为了增加聚能效果,总共增加了两种“速度线”,一个是旋涡状,一个放射状速度线。两者都出现在前期“聚能”的过程中,本质上都属于第一个动画中星星聚能动画的修饰,是对这一阶段动作节奏的修饰。
这里为了增加聚集效果,让旋涡进行了根据自身形状的旋转动画。选装的过程逐渐缩小,进一步增强聚集的感受。放射状的速度线也是类似的动作,但存在时间很短,其实起到了环状物体汇聚的效果。
这两个效果的添加,让整个动画的冲击力变得非常强。最后,我们对动作节奏细节的进一步优化。进一步叠加了几个放射状的速度线,让“聚能环”的效果更加强烈,(
当一个动作没有足够效果时,可以多增加几个以增强效果,通常是三个为一组,这是一种特定的动作节奏
)此时就得到了最终效果如下:
游戏界面中,可用特定节奏安排表现出的界面中不同的情绪。
下图所示的模型就是通过特定的动作节奏表现出速度感:
上图用的节奏正是以前我们提到的三段式动画节奏:先用几个箭头状型体作为前奏,而后框体主体入画,之后则是拖尾的剩余图形入场。这里的所有图形都遵守了同一运动趋势,并且前后时间间隔和时间错层应该犬牙交错,否则整体节奏极易变得拖沓。
而下图所示的示例模型则用特定节奏表现特定的节日氛围:
这是一种典型的节日活动拍脸图弹窗设计。元素众多,需要安排好主体与修饰元素的入场顺序。一般情况下不设计为三段式动画,而通常设计为两段式动画,即入场加拖尾动作。入场顺序应该尊重原有的静态设计元素的图形结构。如本例中的地面与背板就应该为最先入场,搭载其上的其他物件后续错层入场。
而烘托氛围的其他元素,如彩灯、雪花和人物的循环动作都应按照它们自己的逻辑,在特定时间点开始播放:彩灯和人物是无限循环,都应该以本体做循环动画,在此基础上施行入场动画;雪花为入场+循环的模式,应该在弹窗主要物品都入场后再入场并循环;弹窗弹出的瞬间还有个配合弹出的炸开式雪花粒子,应该配合弹窗主体的弹动动作点开始爆发。
这个示例属于简化的版本。实际工作中的类似界面只会更加复杂,但是按照该例设计逻辑进行类推,是可以设计出不错的动态效果的。
在游戏《使命召唤手游》中,则喜欢通过设计特定的演绎来构成戏剧化的画面。通过这种节奏形式来强调特定售卖物品的高价值属性:
类似的设计手法在游戏界面中比比皆是。
它们的平面设计,即界面的静态设计各不相同。
但是动效设计师可以通过类似的设计手法,表现出各自要表达的情感氛围。针对不同的结构,动画的结构也各自不同,这就要求动效设计师需要因地制宜的针对不同的结构、图形含义去针对性的对动态细节进行设计。
现实情况是复杂的,但设计逻辑是相通的,诸位大可举一反三,设计出令人惊讶的,情理之中又意料之外的好设计。
关于动效如何表达情感,你有什么想说的或者想问的,欢迎评论指出。或者扫描下方二维码,加入交流群进行深度交流。更多的相关内容,我们本系列文章的下一篇再见!
以上。
欢迎点击下方名片关注本号
往期推荐:
本文来自微信公众号“COTA五号”作者:欧型兔(ID:cotadesign)。大作社经授权转载,该文观点仅代表作者本人,大作社平台仅提供信息存储空间服务。