2024风格多变的游戏UI动效
14282 2
实名

通过了实名认证的内容创造者

发布于 2024-8-15 12:55:21

您需要 登录 才可以下载或查看,没有账号?注册

x
2024新的学习征程即将展开,上一期的学生们经过辛勤的努力,大多已顺利找到了自己合适的岗位。终于每个人可以开始享受毕业后那片刻的宁静。尽管许多新人成功踏入职场,但仍感到恐惧与不确定,担心是否能挺过试用期。相反,我却羡慕他们,幻想着他们下班后能共饮小酒,讨论设计,享受生活的乐趣。我们也即将开始新一轮的忙碌,我还在寻找如何放松的方法,只得继续肩负重担。至于远行的同学们,愿你们全力以赴,迈向更加光明的明天。下面分享往期同学们的作品
[micxp_wxonkey]wxv_3410752985511624708[/micxp_wxonkey]1【胡桃】大家好,我是胡桃,游戏行业的前spine动画。这个岗位虽然也挺有趣,但总觉得并不是我最想做的。这两年我们可能会注意到专职的游戏动效这个岗位在逐渐兴起。我对界面的视觉表现也很感兴趣,于是想学习动效的心情越来越强烈。由于“游戏动效”是新兴岗位,相关教程稀缺,我在B站找到了Leo老师和乐魔官网的课程,试听感觉很棒,便决定报名参加直播课。以下是一些我的练习展示和浅显感悟:练习作品描述:《欧美卡通》界面转场动效设计过程
79c313c38152ff78b6edd20afe56514f.gif
可以从中界面中提炼出的关键词:欧美、卡通、扁平,整体给人感觉比较活泼、跳跃。界面设计本身具有强烈的镜头和运动感,让人能立即想象动态效果。例如,入场界面设计带透视效果,我通过加入镜头旋转增强了3D视觉效果,虽然简单,但未来可以通过为各区域添加小细节进一步改善。
9286c5d573de5845b964b13b01620399.gif
以及两个界面中都出现了的同色背景和形似闪电的小装饰,很自然地就能联想到可以用相同的元素把两个界面串联起来。为了契合这种比较硬朗、色块化的卡通风格,特效方面也相应的使用了边缘清晰、饱和度较高的元素,此时需要避免使用渐变,光晕之类的糊糊的效果。(反面案例!:这个黑条展开的部分,这里是我偷懒了……捂脸.jpg?x-oss-process=e3dpic01)

总之这套案例整体完成度不算高,重点在于开拓思维,还有非常多可以优化的部分。拥有美术基础的我在课程中理解视觉表现不难,但对于引擎和编程较陌生,尤其是在使用Unity时经常遇到难以理解的bug。我明白了练习和作业的重要性,所以我下决心跟完所有课程并完成每节的作业,这几个月的坚持也值得自豪。
练习作品2描述:《欧美魔幻》界面动效设计过程



拿到界面后,首先可以很容易分析出关键词:欧美、魔幻、写实分析了其特征并参考市面上相似作品想到了诸如虚无缥缈的魔法气息、波动的能量、若有若无的幻影、闪烁的粒子……等特效元素,在制作时,关键是使用边缘柔和、过渡自然的贴图。


观察背景中的火焰元素,我特意在入场特效中加入了红色光晕和火星,以平衡冷色调并丰富色彩。
练习作品3描述:《复古手绘》界面动效设计过程



可以从中提炼出的关键词:复古、手绘质感、纪实风



界面设计中融入了真实的拟物元素如文件和邮票,因此动效设计遵循自然运动规律。我利用AE和Spine制作带透视的动画,如纸张翻动,以达到伪3D效果,既简化了制作过程,效果也满意。



颜色设计来源于界面本身,以符合题材的历史感,使用提亮色时注意不过度饱和或明亮,确保与界面和谐。






整体而言,这套界面的动效更注重动画节奏控制,调整动画快慢和曲线对视觉影响较大,仍有提升空间。
练习作品描述:《赛博科幻》界面动效设计过程
界面素材来源于外网的大佬,这个技能升级解锁界面采用了平面图形、故障艺术和线路元素,因此动效设计紧密结合界面风格。




入场部分:重点在于技能信息栏的分割贴图shader效果,模拟故障艺术的破碎感,左侧技能面板有简单扫光增强氛围。




技能升级部分:以界面图形元素、色彩变化和粒子效果反映赛博科技风格。升级按钮以切割效果消失,与入场动效呼应。技能点数字加了小特效提升细节。



升级效果设计:拖尾粒子吸引视线,技能框内线路板纹样流动预示升级,中心拳头特效配合模型闪烁,最后是辉光、折射、装饰性箭头和闪光粒子综合展现升级完成。值得一提的是这个技能升级时的效果,个人还是比较满意的~当然也不是凭空想来的,找参考是非常有必要的,自己的思考是更有必要的。主要是从一位大佬的作品里吸取了灵感,再结合了一些自己的想法。






有趣之处:在不影响操作的前提下,技能信息栏会像呼吸般轻微位移,营造出科技感和生动性,如果技能切换时人物还能有配合说话的动画将更佳。
练习作品描述:《魔幻卡牌》抽卡流程设计过程
[micxp_wxonkey]wxv_3411244593340350467[/micxp_wxonkey]
此抽卡练习极度考验创意与执行能力,除了卡面、卡背、背景的美术素材来源于网络,从运动方式、镜头、动画节奏到特效总之几乎所有的表现都是从0到1的实现,需要不断构思和完善。抽卡流程的阶段拆解:1:幻影的卡牌飞入场,金卡有特别的标识。2:金卡从牌堆中飞出,绕圈到前方,此处有一个从下往上镀金的感觉,变成实体卡牌,并显示卡牌的元素类别。3:顺着画圈的轨迹回到屏幕正中开始蓄力。4:爆发,展示卡牌。



初期也参考了“元梦之星”的抽卡流程,特别是卡牌运动和镜头运用,但最终根据自己的想法进行创作。动画中的火焰提示光效经过尝试后得以确定。



这个地方其实我思考了很久到底该用怎样的提示发光效果给这个火焰会比较好,找来找去贴图的效果都不尽人意,无意间试到了这个,因为配合着卡牌的移动还真有点像是镜头光晕的感觉,意外地收效不错。所以没事就大胆尝试,多试多玩,可能会有意外收获哈哈~!
背景设计受技术限制、蓄力节奏和爆发效果需要增强,以及结算界面金卡辉光精细度不足。虽然时间有限未能进一步完善,但此次练习显著提升了个人能力。



总的来说,这个练习算是我给自己的考验了,课程本身并没有强制要求抽卡相关的作业,但我想挑战一下现在的综合能力,于是有了这个作品。



【关于奖学金】
能获得一等奖学金非常开心,本期课程我是学费全免,而且还小赚一笔,这是对我努力的正反馈,也感谢乐魔平台和老师~!
不过说到底课程本身的收获才是最重要的,授人以渔的道理大家肯定都懂,即便是原价报名这套课程也完全值得,对于准备入行动效的新人真的能学到非常多,堪称保姆级教学了。期待更多优质课程推出。



很感谢Leo老师和小黄蜂老师的悉心教授,老师们都很认真负责,课程不要太良心,甚至刚毕业几天还帮我介绍大厂正编的工作岗位,祝愿乐魔网站和课程越来越好,做大做强~!



2【豆沙包】

大家好,我是豆沙包,来自河北。在加入乐魔UI之前,我对自己的职业方向很迷茫。我本身是一名原画师,但经过深思熟虑,我决定学习游戏UI动效设计。
我通过网上搜索并在B站找到了LEO老师,决定利用业余时间学习动效。这五个月里,我学到了很多,从一开始的迷茫到现在可以独立进行界面动效设计。我得到了老师们的许多指导,这对我的成长非常有益。
零基础转行真是一件痛苦的事情,但幸好这条艰难的道路上还有老师和家人的支持。从了解unity软件开始,到自己设计ui动效。从简单了解3dmax,到建成可以用在界面上的模型。从了解动画规律,到熟知界面动画节奏。从了解动效各种风格差异,到应用正确的风格到合适的场景。都是和老师同学们一起学习努力的过程,接下来请看我这几月成长后的作品吧。
练习作品描述:《欧美卡通》设计过程界面作者:Green首先进行风格分析。在设计过程中,我从游戏《诡野西部》的场景中获得灵感,并选择了手绘风格来匹配界面设计。我选用了黄色和亮灰色作为画面特效的主色调,并根据界面上破碎残缺的文本风格设计粒子特效。
考虑到界面中大量纸张元素,我计划使用其他软件来辅助特效制作。同时,我还创作了一个新的界面以实现想要的动效效果。
早期的设计效果


早期动效设计版本


早期动效设计版本
早期第一个版本节奏感不强,动画表现拖拉,最主要是设计的思路很单一,这点上也是被Leo老师明确指出,严格要求重新设计,并且指导我新的设计思路和方向,这才有了新版的设计效果





新版的设计风格关键词有:欧美卡通,残破,通缉令,平面。
根据画面原有的颜色选取特效所需要的颜色,需要标注强调的地方用较为亮的黄色系,根据出现时背景的氛围来确定。吹过的风用中性或偏暗的半透颜色来表现,标注了风的出现又不会特别扎眼,重要的与背景氛围的融合。


本次使用3dmax制作骨骼动画和模型,为实现纸张被风吹动的动画,在面片上附加了骨骼,并在3dmax中制作了动画。在制作时为了使效果更自然,尝试四根和三根骨骼的区别。最后采用三根骨骼的模型。风的动画一开始整体将模型打包到unity里,但发现动画并不理想,就将风分成一根一根的,分别导入unity,单独制作每部分动画。人物的动画是我第一次尝试,为了增加画面的表现力,制作成品还很生涩,个人认为还有较大的提升空间。



使用AE制作部分纸张翻页动画。Ae实现起来相对3dmax方便,但需要把控好动画节奏再进行导入,所以进行了多次调整。



粒子制作时根据界面整体风格进行单独绘制,页面的部分文字有些比较残破风格,所以动效中的灰尘都会用有些手绘感的笔刷进行制作,其中叶子进行过多次调整,因为整体风格色块平整,颜色简单,所以叶子也减少了笔触。同时为了做出树叶快速落下的感觉,叠加了一层模糊的效果。



转场设计就地取材,参考了海贼王通缉令进行转场设计,通过3dmax制作建模绑定骨骼并制作动画。转场过程中通过纸张对镜头的遮挡进行下个界面的切换,整体过程比较快速。








五个月的学习飞速,在LEO老师和小黄蜂老师教导下进步显著。作品尚有提升空间,但我已尽力而为并且有了很大的进步,是从0到1的跨度。这期间,同学们的陪伴和LEO老师的指导让我突破设计思维,学会更好的设计。期待重修LEO老师网课,希望他的课程不断培养游戏UI动效人才。
毕业后,LEO老师也帮我投递简历联系大公司HR,并得到面试机会,对此深表感谢。学习中,两位导师的帮助下我技能提高并获得大量奖学金,这是对我的认可和鼓励。对LEO老师和小黄蜂老师的感激之情和未来的努力并存。
3【其他同学作品】





























这是试听课同学的作品,同学本身应该也是有一定的基础,两节课的改变,也让作品有了独特的设计风格



















































关注最流行,最专业的游戏界面动效知识,学习最新的职场技能,生动有趣的动效技术分享。
使用道具 <
非法昵称12138  发表于 2024-10-22 10:57:56  
2#
回复 收起回复
使用道具
您需要登录后才可以回帖 登录 | 注册

本版积分规则

快速回复 返回顶部 返回列表