如何为2D游戏做出空间感、3D感?

0 条评论


  • 151

    灰机锅外卖呼叫工程师,兴趣使然的开发者

    饕餮越狗玫瑰之听 等 151人赞同

    有的奶牛提到了光影、视差场景、还有一些动画技术。我也分享一些自己的经验。 


    针对静态素材:

    1. 透视准确。 
    2. 不同层级的对象位置得当。 
    3. 适当的光线和阴影。 

     素材其实是基础,如果2D的素材绘制的问题一堆,将很难做出好的效果。 


    动画实现上的一些技巧: 

    1. 动画对象的部件充分拆解。 
    2. Free Form Deformation。(近几年非常流行的2D动画技术,不太清楚官称是什么。我们使用Spine作为动画解决方案,官网上这么叫的。上面有奶牛提到了。我也听过一些其他名字:Live2D、网格形变动画、Mes***、XX变形等等等等无所谓叫什么,总之是指通过变形2d纹理来实现动画的技术。) 
    3. 适当设计“遮蔽物”(障眼法)。 
    4. 混合位移和部件关键帧,制造整体的立体效果。 
    5. 必要时使用一些3D技术进行辅助。 

    场景方面已经有奶牛提到了视差滚动场景、动态光源、阴影等内容,我知道就这么多也就不献丑了。单位的动画我结合自己的游戏举些例子吧。 


    我们的游戏(AngerForce-Reloaded)是一个2D的顶视角纵版卷轴射击游戏,九十年代调调的STG(简单说就是打飞机(´・ω・`) ),一些方案希望可以对其他开发者有参考作用。

    动画对象充分拆解

    2D的骨骼动画要出效果,需要把单位拆解成足够细分的单元,这样制作动画时分开操作不同关节可以表现出良好的前后层关系,制造3D的错觉。 

    ee4f46af654e1f3d32f590071cd6aaf9.gif

    上图是近些年比较流行的动态角色立绘;
    d56ff4d16c08d830033d28c39c393bc4.png

    这是动画所用的Atlas。这个动画有用到Free Form Deformation,用于模拟3D状态下的关节透视变化时的形态,比如,乳摇……


    自由网格形变Free Form Deformation

    这项功能目前主流的动画编辑工具基本都有支持,技术上没有什么难点,@问呆我‍  的答案中的例子说明的非常透彻。

    我们为游戏中的每个Boss设计了一个这样的出场动画,类似九十年代电影的角色介绍。

    c08b851a8151b3a6322a6908a1fd8cc8.gif

    这部分我们采用Free Form Deformation模拟制造了一个近似3D的转身的动画。这个角色设定上有很多规整的几何图形,在进行形变时产生了非常好的效果,甚至有同学以为我们的游戏是3D实现的,实际上只用一张纹理。

    da6159f78e7e0b8fc96b4b642e0a8122.png

    a39d808c3b821f6bff729520d49e2305.jpeg

    这是纹理的网格方案和所用Atlas。

    4cd731d0c487ae4ba372fb4ab82e5a23.gif

    这个动画单独播放是这样的效果,如果仔细看还是有很多瑕疵的,能够发现并不是由3D实现的,但在游戏实际应用中,由于动画播放时间很短,足够以假乱真。

    Free Form Deformation的原理很简单,但具体实现所展现出的效果取决于上面提到过的因素:透视准确、适当的阴影、前后层部件适当的缩放和位移、运动规律以及充分的拆解。


    遮蔽物

    有时“鸡贼”点,适当设计一些遮蔽物是比较理想的做法,无论是优化纹理,还是为了减少工作量。

    我们有一个车造型的Boss,想给他设计一个在镜头前漂移着呼啸而过的出场动画。

    基本过程设想是下图这样(图草,原谅我(・ェ・o) )。车尾在镜头前漂移驶过,而后再加速向前方驶去,在最后时再来一个慢镜头特写,配合Boss名字砸在屏幕上,欧耶,完美!(这特么画到什么时候(╯-_-)╯╧╧ )84f2ed1ac7b5a226f4c607b3ea88603e.jpeg

    用2D帧动画的话,从①到③的过程需要很多帧,得画尿血,3转2最后也会是一张超大Atlas。后来我们讨论了一下,决定做的“偷”一点,使用了如下方案——加入遮蔽烟雾。

    2ea85d20a77fb67b9f98d3b336814cf2.gif

    车尾在屏幕右侧进场,在镜头前滑过,这整个过程车子只有位移和缩放,没有任何透视的变化。但由于大部分画面车子都有烟雾的帧动画进行遮挡,配合上位移和镜头的晃动,车子最后的”慢镜效果“是使用Free Form Deformation,整体看上去是不是有了3D的景深和立体感?

    换了没有烟雾的效果再看下:

    8645b0d9d12dcfef4fcdab7410e5fafb.gif

    遮蔽物的使用原则是——用小的素材进行动画去遮蔽大的素材,或是用简单的动画去遮蔽一个复杂的动画。此处烟雾的应用减少了关键帧,营造了“漂过的似乎车子真的有透视变化”的效果,并且烟雾还有一个关键作用,就是作为“遮眼法”,过渡了“漂移的大车”这一帧替换“向前驶去的小车”帧的镜头,观众会根据前摇和后摇的运动轨迹去脑补被遮蔽的中间的过程。(看到车子先向左划过的前摇,和冲出去的后摇,把没看到的过程自动脑补成S弯,其实就是平移和缩放)


    混合使用位移和部件关键帧

    仅关键部件使用不同透视的纹理而其余部件仅采用位移,有时能产生“似乎整体都有透视变化”的错觉。0e055479c63e0b1c3b00b8ea30f9926f.gif

    图中机甲的移动只有大腿和膝盖两个关键部件拥有不同透视的帧动画,其余部件仅仅使用位移,让观众觉得似乎小腿、脚、胸部和头似乎都有一些透视上的变化。用这种要注意动作符合运动规律,被遮挡的部件可以大幅移动(脚和小腿),较大的和暴露在最顶的层部件不适合做过大幅度动作(胸口和头),毕竟它们没有透视变化,大位移容易穿帮。

    这部分内容,日系的2D游戏提供了很多范例,就不献丑了。


    使用3D技术辅助

    想要3D的感觉最简单的方式就是直接用3D(特么废话…(⊙_⊙;)… )。这部分无需多言,一些透视要画准的话即使是2D,必要时也需要一些3D的工具的辅助,比如草图大师,甚至是建模。

    a91c3070f5b45b19a0b1f4d724b48b44.jpeg

    2D做出3D感其实就是用2D的素材来模拟3D世界的运动规律,但2D游戏毕竟是2D的纹理,想要百分百的3D效果那说明使用3D来制作游戏是最经济的。2D只是用技巧制造一些视觉表现力,达到欺骗眼睛的效果就够了。


    最后,容我再丢个GIF装个逼……(´・ω・`) 

    85ad72631f10c03aff1bf855b8732212.gif

    以上是分享的一些自己和小伙伴们的经验。

    更新于 2017-05-12 13:50:17 24 条评论 禁止转载


  • 22

    问呆我凑流氓

    雷姆XTMMNwoodsjan 等 22人赞同

    一般来讲 在2D游戏里展现空间感的方式是利用多层卷轴,因为在真实生活中的平移运动中,理人眼比较远的物体运动看上去会比较慢,所以很多2D游戏中利用背景各层卷轴的运动速度不同来造成运动慢的图层是在远处的感觉。这是一种很普遍的技术了,实现起来也很简单,就不赘述。

    而所谓的3D感,抛开作画上的素描关系不谈,单说在运动过程中给人以3D的感觉,其实绝大多数也是利用人眼看3D物体的规律。今年来越来越多的2D游戏采用了一种拉伸和移动图片位置关系来造成3D效果的技术。这种可以叫网格拉伸也好live2D也罢,总而言之使用的都是相近的技术。我可以简单来说说这种实现方式的原理:

    比如,我画了一个方块,尽管通过阴影的表现让它看上去是一个立体的方块了,但是这只是2D的,我想要它实现在3D环境中移动的感觉。

    7dd79e6732bd32d5b7977d3dbf4d3536.jpeg

    那么要如何实现呢,首先你需要一款能够支持网格编辑的主流动作编辑器,我们就简称动编了。说是主流 其实市面上一共就几种而已,spine、 dragonbones 还有Live2D Cubism Editor等等,最后一种是制作live2D用的软件。要说明普通骨骼动编和live2D的区别是要一番长篇大论的,在这里就不表了。为了方便【其实是穷】我们这里使用dragonbones,也就是龙骨编辑器来进行讲解。

    首先我们把这个方块导入编辑器,用网格将其关键结构进行绑定。

    3fea1cf1ddf3f46d759b9c86a334aba3.png

    这里的点就是之后用来控制拉伸图片用的控制点了,控制这些点来扭曲方块的图片就能让这个方块的结构发生变化,接下来我们要做的就是让他在扭曲网格的时候符合一个立方体运动的规律。比如我们让他向右转一点。

    fda8bfbf197069c9865ee9721fcb64c6.png

    可以看到,图片依然是那个图片,但是我们通过拉伸他的素描结构来达到了让它转动的效果。

    然后把它做成一个可以播放的动作,最终的结果如下:

    6fd83ce88b5d89b5b3b915a57fd7ad2d.gif

    简单来说就是这样的一个过程,当然实际游戏中需要考虑的东西会很多,这里只是讲解一下基础的原理罢了。

    以上

    发布于 2017-05-05 15:21:10 0 条评论


  • 11

    阿撒托斯要吃糖2d美术,独立游戏开发中.

    金正黄Yoge大城小胖 等 11人赞同

    视差 parallax:在画面/动画中用视差来造成立体感空间感(不同物体不同层的运动速度不同的错差感,常见于背景)     


    3d效果的话补充下 法线贴图

    法线贴图(normal map)的话,steam上有个Sprite Lamp能做法线贴图

    这东西具体咋实现的可以看Sprite Lamp的商店页面

    想进一步了解的话,百度法线贴图有些文,基本是3d圈对模型各种贴图的知识,增加视觉上细节纹理,2d美术里也能用各种贴图增加细节

    如果有其它更好也算实惠的2d做法线贴图的东西请安利我一下。


    下图抱猫小幽灵的展示效果感觉并不理想。法线贴图在光影环境里展现一定微量体积(浮雕)时有很棒的效果,比如举着提灯的角色进入一个充满石头元素的瓦片地图里,法线贴图能给所有光源范围内的背景增加体积感(石头上的光影方向会随着光源移动),营造很强的洞穴气氛。图片来自于sprite lamp的steam社区

    图片来自于sprite lamp的steam社区

    这个图美术一般,其实动起来后演出不错的

    这个图美术一般,其实动起来后演出不错的

    https://www.youtube.com/embed/oxseq4u_KAE?rel=0&autoplay=1&wmode=transparent

    ↑洞**的来源视频(某个引擎的法线shader效果演示)

    只要看开头和结尾的演出效果就行,中间是教用这引擎的人如何实现的不用看

    http://store.steampowered.com/app/524490/Shadron/

    更新于 2019-01-11 22:13:21 4 条评论


  • 4

    xp觉得自己很牛逼的游戏开发人员

    瓦伦斯梦魇IceyCola 等 4人赞同

    这就得看你要什么样的效果了。

    我见得比较多的会用视差,即用多层来组成背景,然后角色移动的时候,根据背景前后利用不同的速度来移动背景,借此形成层次的感觉。

    还有一种可以利用透视相机加面片的做法,不过这种做法有点偏移所谓的2D游戏就是了,不过这里我还是说一下我的做法。将面片放置在3D的游戏场景中并且使用透视相机来达到远近感,说到底就是用3D的方式来做2D游戏。

    其它的楼上都答了,但有一点得说的是,无论是光阴远近大小什么的,都是要美术和程序配合,并且是一个不断调整的过程。如果想要好的效果,还是得花不少时间的

    发布于 2017-05-02 19:39:06 0 条评论


  • 4

    平子一个爱画画的游戏策划大叔

    雷姆bettersnaker残烛明灭 等 4人赞同

    1. 近大远小 (透视关系)

    2. 近清晰,远模糊 (空气感)

    3. 近鲜艳,远环境光更浓 (空气反射)

    发布于 2016-12-12 18:45:05 0 条评论


  • 3

    张一般这里是一个做游戏商业化的骗钱的【

    1.动态要素

    动态光源&阴影的变化

    场景动态要素

    角色(纸片人)贴图动态要素


    2.非动态要素

    楼上有奶牛提过的透视画法

    【别的写一半忘了....

    更新于 2016-12-09 17:51:56 1 条评论


  • 2

    Meta42levelpp.com

    陈奕迅所长涅槃 赞同

    Live2D

    发布于 2017-05-11 11:41:27 0 条评论


  • 2

    Saaya嘴臭狂犬,夜露死苦

    雷姆GASS 赞同

    我觉得这里有个问题

    你所说的2D,是指的什么?


    A、2D马里奥、2D雷曼、2D索尼克那种平面卷轴只有XY轴移动的?

    B、三国战记、西游释厄传、DNF这种有XYZ轴但是地面在XZ二轴的?

    C、BALDRSKY、仙剑奇侠传DOS、索尼克3D(MD还是SS来着)这种XYZ轴但Z轴基本重叠/独立与Y轴的?(这种也就是常见的2.5D了,如果战神用2D素材做,大概会做成这样)


    如果是A、很简单,背景图层的运用营造出的视差,也就是利用视觉错觉,以及对轴中物件的“塑造”


    如果说B、这种类型我不是很清楚,同时我也很反感这种类型,这种类型的判定会让玩家很难抓准那个点,从而影响到战斗流畅性与手感(我自己就在玩三国战记的时候有时候抓不准打空),不过就另一种层面来说,做出这种纵深感,基本就能得到题主需要的空间感了。


    如果是C、基本按照锁视角的3D游戏那种模式去做,便可以不费工夫的凸显出你所需要的空间感了,再配合角色的动作,比如BALDR系列的空连,一个完完全全没有任何3D成分的纯2D游戏,硬是做出了3D的感觉。


    发布于 2017-05-03 14:04:14 0 条评论


  • 1

    BCCBlink Studio;DOTS汉化组

    明火暗雷 赞同

    脑袋里蹦出的第一反应是打破“第四面墙”

    发布于 2016-12-07 15:20:02 0 条评论


  • 0

    ArmeMedepth-BK201

    2Dlive ··· 原来这个要切那么多块·········

    发布于 2017-08-29 19:31:53 0 条评论


  • 0

    6L清风玄学。

    这个游戏的介绍里有提到一些伪3D黑科技,可以看看 =-=

    https://zhongchou.modian.com/item/3191.html?_mdsf=home_czpro_web&_mpos=h_czpro_web

    bb1a0ecec1133ea68e9e7274b4d530f6.png

    发布于 2017-08-28 16:47:55 0 条评论


  • 0

    link0079来自异世界的问题儿童

    还记得美术老师说的近大远小。

    发布于 2017-05-11 14:21:52 0 条评论


  • 0

    LouisYYC任饭,indie lover

    大家都非常懂。。。我提一个这方面做得不错的正面例子吧,题主可以去看一下titan soul里boss战的表现方式,我觉得是我见过的在2D画面里表现空间感最好的游戏之一了,而且演出效果非常有魄力

    发布于 2017-05-04 04:16:03 0 条评论


  • 0

    Owl_Myron夜猫子..常混迹于失眠界

    不太清楚怎么实现。不过日本的动漫在这一块儿有较高的造诣。

    《龙之皇冠》的地图界面,法师塔的楼梯部分。早在街机的《龙与地下城》里面也有类似的设计。在2D游戏中看到后惊为天人。

    国产网页游戏分别都有抄到这两个2D里表现3D的黑科技,只是我还是没能悟出秘诀=。=

    发布于 2017-05-04 00:42:06 0 条评论


  • 0

    Luciffer爱好涉猎广,没点专精全也半吊

    场景空间感:在玩家视角移动过程中,多层远景的不同速度位移能够营造场景的立体感

    物件空间感:绘制时考虑光源方向和阴影之类的要素(或者能写出即时渲染?),大小上也要注意与玩家视角或者角色的远景关系

    人物立体感:还是绘制的问题,素描看上去很立体就是因为着重刻画了阴影

    发布于 2017-05-03 15:18:34 0 条评论


  • 0

    千影steam受害群众,RPG爱好者,杂食!

    提供一个游戏可以做参考:《奥日与黑暗森林》。

    我玩过的最精美的2D游戏,以至于我现在还觉得这游戏是用了一些3D技术的。

    发布于 2017-05-03 11:35:45 1 条评论


  • 0

    助理游戏策划

     假定为横版卷轴

    1.场景

    透视的选择,一点透视,多点透视等

    远景、中景、近景的层次、遮挡、相对速度

    光线 、阴影

    物件的近大远小

    2.角色

    角色的光影、透视和立体感,并与场景相协调

    八向移动时向屏幕内移动的Z轴速度更慢

    3. 镜头

    依据角色位置变化的镜头移动速度

    发布于 2017-05-03 01:09:09 0 条评论


  • 0

    老潘的猫神经变质

    建议题主注明是横版的还是俯视角的,类型不同使用的手法也不一样……

    发布于 2016-12-07 16:36:05 0 条评论


  • 0

    Tim默默玩着游戏,沉溺在自己的世界。

            这种的话,没记错刀塔传奇的多图层动态背景就有展现过这种效果.当然不是很了解,不知道说法是否正确.不过大致效果确实是挺不错. 

    发布于 2016-12-07 16:23:29 0 条评论


  • 0

    面纸女装码农_面纸

    ...美术课上老师不是讲过透视画法么。。。至于3D感,数学考试的时候不是经常给一个图让画三视图么。。。

    更新于 2016-12-07 14:01:36 0 条评论

  • 登录奶牛关账号即可参与讨论

{{question['follower_count']}} 个玩家关注

...

相关元素

相关问题

如何实现《Human: Full Flat》和《Gang Beasts》中喝醉了一般的小人模型?

10人关注 3个回答

SRPG 的 AI 設計有沒有什麼規則或範例可以參考?

8人关注 3个回答

各种点击/放置类游戏的大数字处理有甚特别技巧吗?

10人关注 5个回答

问题被以下收藏夹收录