游戏蛮牛学习群(纯技术交流,不闲聊):539178957
游戏蛮牛 手机端
开启辅助访问
 找回密码
 注册帐号

扫一扫,访问微社区

开发者专栏

关注:2257

当前位置:游戏蛮牛 技术专区 开发者专栏

__________________________________________________________________________________
开发者干货区版块规则:

  1、文章必须是图文形式。(至少2幅图)
      2、文章字数必须保持在1500字节以上。(编辑器右下角有字数检查)
      3、本版块只支持在游戏蛮牛原创首发,不支持转载。
      4、本版块回复不得无意义,如:顶、呵呵、不错......【真的会扣分的哦】
      5、......
__________________________________________________________________________________
查看: 2383|回复: 37

[士郎] 如何为2D游戏做出空间感和3D感?

[复制链接]  [移动端链接]
排名
3
昨日变化

6569

主题

7087

帖子

2万

积分

Rank: 16

UID
1231
好友
185
蛮牛币
8329
威望
30
注册时间
2013-7-29
在线时间
3365 小时
最后登录
2018-7-16

社区QQ达人活力之星原创精华达人突出贡献奖财富之证游戏蛮牛QQ群会员蛮牛妹VIP

发表于 2018-4-16 12:28:55 | 显示全部楼层 |阅读模式

马上注册,结交更多好友,享用更多功能,让你轻松玩转社区。

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

x
针对静态素材:
  • 透视准确。
  • 不同层级的对象位置得当。
  • 适当的光线和阴影。

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


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

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


我们的游戏(AngerForce-Reloaded)是一个2D的顶视角纵版卷轴射击游戏,九十年代调调的STG(简单说就是打飞机(´・ω・`) ),一些方案希望可以对其他开发者有参考作用。
动画对象充分拆解2D的骨骼动画要出效果,需要把单位拆解成足够细分的单元,这样制作动画时分开操作不同关节可以表现出良好的前后层关系,制造3D的错觉。
1.2.gif
上图是近些年比较流行的动态角色立绘;
1.jpg
这是动画所用的Atlas。这个动画有用到Free Form Deformation,用于模拟3D状态下的关节透视变化时的形态,比如,乳摇……


自由网格形变Free Form Deformation这项功能目前主流的动画编辑工具基本都有支持,技术上没有什么难点。




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


1.3.gif




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

2.jpg 3.jpg



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

1.4.gif



这个动画单独播放是这样的效果,如果仔细看还是有很多瑕疵的,能够发现并不是由3D实现的,但在游戏实际应用中,由于动画播放时间很短,足够以假乱真。
Free Form Deformation的原理很简单,但具体实现所展现出的效果取决于上面提到过的因素:透视准确、适当的阴影、前后层部件适当的缩放和位移、运动规律以及充分的拆解。

遮蔽物
有时“鸡贼”点,适当设计一些遮蔽物是比较理想的做法,无论是优化纹理,还是为了减少工作量。
我们有一个车造型的Boss,想给他设计一个在镜头前漂移着呼啸而过的出场动画。
基本过程设想是下图这样:
4.jpg
车尾在镜头前漂移驶过,而后再加速向前方驶去,在最后时再来一个慢镜头特写,配合Boss名字砸在屏幕上,欧耶,完美!(这得画到什么时候(╯-_-)╯╧╧ )

用2D帧动画的话,从①到③的过程需要很多帧,得画尿血,3转2最后也会是一张超大Atlas。后来我们讨论了一下,决定做的“偷”一点,使用了如下方案——加入遮蔽烟雾。
1.5.gif
车尾在屏幕右侧进场,在镜头前滑过,这整个过程车子只有位移和缩放,没有任何透视的变化。但由于大部分画面车子都有烟雾的帧动画进行遮挡,配合上位移和镜头的晃动,车子最后的”慢镜效果“是使用Free Form Deformation,整体看上去是不是有了3D的景深和立体感?
换了没有烟雾的效果再看下:
1.6.gif
遮蔽物的使用原则是——用小的素材进行动画去遮蔽大的素材,或是用简单的动画去遮蔽一个复杂的动画。此处烟雾的应用减少了关键帧,营造了“漂过的似乎车子真的有透视变化”的效果,并且烟雾还有一个关键作用,就是作为“遮眼法”,过渡了“漂移的大车”这一帧替换“向前驶去的小车”帧的镜头,观众会根据前摇和后摇的运动轨迹去脑补被遮蔽的中间的过程。(看到车子先向左划过的前摇,和冲出去的后摇,把没看到的过程自动脑补成S弯,其实就是平移和缩放。)

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




1.7.gif

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

使用3D技术辅助
想要3D的感觉最简单的方式就是直接用3D(废话…(⊙_⊙;)… )。这部分无需多言,一些透视要画准的话是2D,必要时也需要一些3D的工具的辅助,比如草图大师,甚至是建模。
5.jpg
2D做出3D感其实就是用2D的素材来模拟3D世界的运动规律,但2D游戏毕竟是2D的纹理,想要百分百的3D效果那说明使用3D来制作游戏是最经济的。2D只是用技巧制造一些视觉表现力,达到欺骗眼睛的效果就够了。

最后,丢个过场动画的GIF,使用2D素材和Free Form Deformation实现。
1.8.gif




知乎@
灰机郭




[发帖际遇]: 一个袋子砸在了 清风 头上,清风 赚了 1 蛮牛币. 幸运榜 / 衰神榜

跟我念“站长妹纸萌萌哒!”我说站长,你说YO!爱你们么么哒~
回复

使用道具 举报

7日久生情
3048/5000
排名
2427
昨日变化
9

0

主题

2080

帖子

3048

积分

Rank: 7Rank: 7Rank: 7Rank: 7

UID
219676
好友
1
蛮牛币
2479
威望
0
注册时间
2017-7-12
在线时间
436 小时
最后登录
2018-7-16

活力之星

发表于 2018-4-16 13:32:06 | 显示全部楼层
谢谢分享

回复

使用道具 举报

5熟悉之中
543/1000
排名
4807
昨日变化
30

2

主题

70

帖子

543

积分

Rank: 5Rank: 5

UID
9302
好友
1
蛮牛币
1011
威望
0
注册时间
2013-12-1
在线时间
206 小时
最后登录
2018-7-16
发表于 2018-4-16 14:20:02 | 显示全部楼层
谢谢分享,非常实用

回复 支持 反对

使用道具 举报

排名
35
昨日变化

3692

主题

4558

帖子

1万

积分

Rank: 9Rank: 9Rank: 9

UID
287
好友
45
蛮牛币
3355
威望
30
注册时间
2013-6-9
在线时间
2135 小时
最后登录
2018-7-12

七夕浪漫情人社区QQ达人活力之星原创先锋认证开发者

QQ
发表于 2018-4-16 14:21:39 | 显示全部楼层
刚好最近项目可能要用到,棒棒滴。

回复 支持 反对

使用道具 举报

3偶尔光临
291/300
排名
10561
昨日变化
6

2

主题

142

帖子

291

积分

Rank: 3Rank: 3Rank: 3

UID
237689
好友
1
蛮牛币
23
威望
0
注册时间
2017-8-15
在线时间
60 小时
最后登录
2018-7-11
发表于 2018-4-16 16:33:49 | 显示全部楼层
吃瓜哇哇哇哇哇。

回复

使用道具 举报

7日久生情
2864/5000
排名
349
昨日变化

1

主题

666

帖子

2864

积分

Rank: 7Rank: 7Rank: 7Rank: 7

UID
27356
好友
1
蛮牛币
4156
威望
0
注册时间
2014-5-30
在线时间
575 小时
最后登录
2018-7-16
发表于 2018-4-17 09:00:10 | 显示全部楼层
相当帅气啊

回复

使用道具 举报

7日久生情
2354/5000
排名
2932
昨日变化
14

0

主题

1657

帖子

2354

积分

Rank: 7Rank: 7Rank: 7Rank: 7

UID
185339
好友
0
蛮牛币
3444
威望
0
注册时间
2016-11-20
在线时间
249 小时
最后登录
2018-7-16
发表于 2018-4-17 09:09:14 | 显示全部楼层
{:90:}

回复

使用道具 举报

4四处流浪
416/500
排名
6273
昨日变化
3

0

主题

89

帖子

416

积分

Rank: 4

UID
192868
好友
0
蛮牛币
345
威望
0
注册时间
2016-12-16
在线时间
135 小时
最后登录
2018-7-13
发表于 2018-4-17 09:16:59 | 显示全部楼层
厉害厉害

回复

使用道具 举报

7日久生情
1836/5000
排名
2556
昨日变化
1

1

主题

898

帖子

1836

积分

Rank: 7Rank: 7Rank: 7Rank: 7

UID
216583
好友
2
蛮牛币
3110
威望
0
注册时间
2017-4-7
在线时间
431 小时
最后登录
2018-7-5
发表于 2018-4-17 09:25:56 | 显示全部楼层
多谢分享

回复

使用道具 举报

5熟悉之中
541/1000
排名
4099
昨日变化
24

1

主题

49

帖子

541

积分

Rank: 5Rank: 5

UID
245487
好友
0
蛮牛币
1093
威望
0
注册时间
2017-9-22
在线时间
171 小时
最后登录
2018-7-16
发表于 2018-4-17 10:14:38 | 显示全部楼层
学习了,厉害!
[发帖际遇]: 恁神奇 发帖时在路边捡到 1 蛮牛币,偷偷放进了口袋. 幸运榜 / 衰神榜

回复

使用道具 举报

4四处流浪
318/500
排名
7372
昨日变化
4

0

主题

107

帖子

318

积分

Rank: 4

UID
248343
好友
0
蛮牛币
597
威望
0
注册时间
2017-10-12
在线时间
59 小时
最后登录
2018-5-10
发表于 2018-4-17 10:28:53 | 显示全部楼层
v5v5v5v5v5v5v5v5v5v5

回复 支持 反对

使用道具 举报

3偶尔光临
256/300
排名
7444
昨日变化
6

0

主题

57

帖子

256

积分

Rank: 3Rank: 3Rank: 3

UID
270137
好友
2
蛮牛币
585
威望
0
注册时间
2018-3-1
在线时间
49 小时
最后登录
2018-6-25
发表于 2018-4-17 10:43:17 | 显示全部楼层
[发帖际遇]: 是夢、終會醒 发帖时在路边捡到 2 蛮牛币,偷偷放进了口袋. 幸运榜 / 衰神榜

回复

使用道具 举报

5熟悉之中
557/1000
排名
7230
昨日变化
2

9

主题

90

帖子

557

积分

Rank: 5Rank: 5

UID
91796
好友
0
蛮牛币
1889
威望
0
注册时间
2015-4-13
在线时间
298 小时
最后登录
2018-6-24
QQ
发表于 2018-4-17 10:44:55 | 显示全部楼层
有用,感谢分享
[发帖际遇]: wuyouhome 捡了钱没交公 蛮牛币 降了 2 . 幸运榜 / 衰神榜

回复

使用道具 举报

3偶尔光临
156/300
排名
16957
昨日变化
8

0

主题

32

帖子

156

积分

Rank: 3Rank: 3Rank: 3

UID
172616
好友
0
蛮牛币
63
威望
0
注册时间
2016-9-28
在线时间
90 小时
最后登录
2018-7-16
发表于 2018-4-17 10:46:47 | 显示全部楼层
感谢分享,这是受用

回复 支持 反对

使用道具 举报

3偶尔光临
229/300

0

主题

199

帖子

229

积分

Rank: 3Rank: 3Rank: 3

UID
42245
好友
0
蛮牛币
229
威望
0
注册时间
2014-8-27
在线时间
30 小时
最后登录
2018-7-11
发表于 2018-4-17 11:58:30 | 显示全部楼层

谢谢分享

回复

使用道具 举报

您需要登录后才可以回帖 登录 | 注册帐号

本版积分规则

关闭

站长推荐 上一条 /1 下一条

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