开启辅助访问
 找回密码
 注册帐号

扫一扫,访问微社区

开发者专栏

关注:2180

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

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

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

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

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

6265

主题

6779

帖子

2万

积分

Rank: 16

UID
1231
好友
185
蛮牛币
2048
威望
30
注册时间
2013-7-29
在线时间
3204 小时
最后登录
2018-4-26

社区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日久生情
2444/5000
排名
3419
昨日变化
14

0

主题

1749

帖子

2444

积分

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

UID
219676
好友
0
蛮牛币
2309
威望
0
注册时间
2017-7-12
在线时间
319 小时
最后登录
2018-4-26

活力之星

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

回复

使用道具 举报

3偶尔光临
286/300
排名
8554
昨日变化
92

2

主题

58

帖子

286

积分

Rank: 3Rank: 3Rank: 3

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

回复 支持 反对

使用道具 举报

排名
31
昨日变化

56

主题

910

帖子

7960

积分

Rank: 9Rank: 9Rank: 9

UID
287
好友
45
蛮牛币
432
威望
30
注册时间
2013-6-9
在线时间
2090 小时
最后登录
2018-4-26

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

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

回复 支持 反对

使用道具 举报

3偶尔光临
272/300
排名
10757
昨日变化
5

0

主题

138

帖子

272

积分

Rank: 3Rank: 3Rank: 3

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

回复

使用道具 举报

7日久生情
2705/5000
排名
367
昨日变化

1

主题

634

帖子

2705

积分

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

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

回复

使用道具 举报

7日久生情
1676/5000
排名
3700
昨日变化
18

0

主题

1138

帖子

1676

积分

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

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

回复

使用道具 举报

4四处流浪
352/500
排名
6941
昨日变化
43

0

主题

81

帖子

352

积分

Rank: 4

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

回复

使用道具 举报

7日久生情
1660/5000
排名
3043
昨日变化
15

1

主题

859

帖子

1660

积分

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

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

回复

使用道具 举报

4四处流浪
345/500
排名
5488
昨日变化
41

1

主题

30

帖子

345

积分

Rank: 4

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

回复

使用道具 举报

4四处流浪
314/500
排名
7255
昨日变化
4

0

主题

106

帖子

314

积分

Rank: 4

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

回复 支持 反对

使用道具 举报

3偶尔光临
161/300
排名
10617
昨日变化
135

0

主题

48

帖子

161

积分

Rank: 3Rank: 3Rank: 3

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

回复

使用道具 举报

5熟悉之中
526/1000
排名
7337
昨日变化
5

8

主题

87

帖子

526

积分

Rank: 5Rank: 5

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

回复

使用道具 举报

2初来乍到
112/150
排名
20729
昨日变化
6

0

主题

31

帖子

112

积分

Rank: 2Rank: 2

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

回复 支持 反对

使用道具 举报

0

主题

50

帖子

61

积分

Rank: 2Rank: 2

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

谢谢分享

回复

使用道具 举报

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

本版积分规则

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