游戏动效与UI配合的秘密

1446天前
转载文章 / UI / GUI(游戏) (本文章为转载文章,如果若您的权利被侵害,请联系管理员删除的)
15054
1
17
 | 
原创 咚咚咚


如今的游戏动效设计算是一个独立的职能,一般是以2D动画+特效为主要产出的一项技能,常规的情况下与UI同学的配合是最多。


一、动效的起源及发展


起源:最早期的动效应该是手机App的动效,早期手机出来由最开始的偏功能性为主转变到现在的交互应用也是走了一个漫长的过程。


1668153648959768_2.gif


早期的游戏动效大多数由策划或者UI来完成。  早期游戏动效的需求和重视程度不高,一般只有一些按钮特效之类的效果表达,所以也没有设立动效这个职位,随着设备性能和游戏品质的提高,游戏动效的需求和重视程度也会被提高。


1668153649299498_3.gif

页游时代的按钮特效表达


1668154106574050_0.gif

英雄联盟数据可视化界面的动效表达


16681536502344_5.gif

拳皇界面动效表达



二、游戏UI动效设计师必备技能点


1. 游戏动效设计除了需要掌握:位移,旋转,缩放…这些技能以外,你可能还需要掌握一定的逻辑能力(偏交互or心理学)和镜头表现力以及转场衔接设计(偏动特结合)。


1668153650600955_7.gif


1668153651135576_8.gif


《重装上阵》这个效果很好的利用了场景ui镜头拉近的特点,让玩家有一种进入某个场景的代入感,这种镜头转场让人在逻辑和感受上都能更好的接受。制作分析:①是利用多张ui图进行前后排序,制作一个假空间层次,然后进行一个镜头的拉近,这种比较省资源,②是利用真正的场景化方式用场景全部制作,比较废资源。个人比较倾向于它利用第一种方法去制作。


1668153652837339_9.gif


《英雄联盟》的这个转场效果是我个人比较喜欢的,从设计上很是整体,它完美的考虑到了ui与场景和动特效之间的配合,让整个画面很生动并赋有立体感,利用镜头进行场景衔接很好的弥补了UI空间感不足的问题;另外还有一个优点:可以很好的展示玩家在场景中的位置,满足moba游戏玩家对位置重要度的提示需求。


2. 除了以上能力外还需要掌握一些特效技能,例如:形式,节奏,色彩,材质,元素(UI控件)... 另外还需要有不同风格的适应能力,掌握风格化制作技巧。


1668153653438627_10.gif


1668153653663930_11.gif


166815455144642_0.gif


1668153658996497_13.gif


1668153659608974_14.gif

UI、动效、特效这三者配合才能达成最佳效果



三、游戏动效与UI和程序的配合


为了增加UI的表现力,我们会想办法让ui本身去做变化即用欺骗眼睛的方法来达到我们想要的预期,这时候也就延伸出来了游戏动效与UI的配合。


以下是我个人总结的游戏动效与UI和程序配合技巧:


1、前期概念设计沟通


动效设计师需要在概念设计前期和UI设计师一起交流和了解UI设计需求,对UI的需求进行大概的画面想象,然后给出相应的效果图和ui进行交流。



2、根据UI的概念设计图进行动效设计


首先:设计特效部分,因为特效需要程序的配合比较少,相对容易实现(也可能因为我之前就是特效)这部分可以根据情况来。


其次:我会做几个动效方案(实现较复杂的动效方案可能需要程序大哥的配合)。在制作的过程中我一般是根据相关的背景去做头脑风暴,根据头脑风暴及之前准备的相关gif图进行初期设计。


关键思路:方案制作前我通常会进行主次层级、用户心理和视觉可接受范围的分析。动效表达与交互主次区分密切相关,需要根据策划的需求去做,比如希望玩家更加注意哪些地方,梳理信息的层级排序。如果项目只有一个动效,你还需要把控整体动效与UI及美术的每一个效果和每个阶段要到达的目标,千万不要没有目标的一直埋头苦干,另外要清楚哪些是当下可用不需要着急迭代的哪些是缺失的紧急需求,做到对自己的东西心里有数。适当的项目复盘和整理对你和项目非常有益。


最后:会在具体的制作过程中进行一些调整,动效设计需要考虑项目的风格及规范配合各职能实现与美术和玩法的融合,切记不能埋头苦干逞个人英雄。



3、和程序的配合


动效的大部分效果都需要程序配合(逻辑上的一些顺序需要代码支持…),有可能你出的一个方案程序大哥会告诉你这个没办法实现让你再想别的方案,所以我通常会拿几个方案和程序商量,把我最想实现的效果gif图给他看或者把我想要的通过简单易理解的图讲述给他,看他可不可以帮我实现,或者需要用什么方式去做更便于实现,理论上你的效果有多酷炫都是由程序决定的,所以你懂的…



4、与UI的第二次交流


做完效果后,可能一些细节需要UI同学配合调整或修改,进行动效细节的完善。



5、把动特效的设计进行最终落地


这一步是最重要也是比较容易忽视的。大部分同学忙起来的时候很少在游戏里跑看实际效果,切记要对最后手机落地效果进行验证,毕竟前面你做了99%的努力,如果最终不能在游戏内完美还原,不管对项目我们都是一个巨大的损失,看似不受重视的环节可能是最重要的部分!


总结:一般我会对制作完成的效果进行一个小的归纳整理,以后做类似效果的时候就可以举一反三地去提前思考。


1668153659503308_16.gif


1668153660131683_17.gif


最后放俩个之前做特效师的特效作品镇帖哈


还是小萌新不对之处欢迎吐槽,让我们一起进步,喜欢的同学,点个在看呗~

声明:乐魔UI(Lemooui)内网友所发表的所有内容及言论仅代表其本人,并不反映任何UI(Lemooui)之意见及观点。
举报
收藏
文章-GUI(游戏)
15054
1
17
标签
没有标签
全部评论
发表评论
设置密码
注册会员
我已阅读并接受《乐魔UI协议》
微信登录
二维加载中...

使用微信扫一扫登录

“乐魔UI”

建议反馈
提交取消
举报
提交取消