西山居美宣的设计干货丨好的设计不仅要有美感,更需要满足项目需求...
图形图像技术CGGraph渲染图形学 22470 338
实名

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

发布于 2017-7-20 13:30:23

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

x
今天分享两个教程,关于 3D 自由视角和俯视角的场景设计规则。
作者是西山居宣传画设计师龚珮

作品
640_看图王.web.jpg
1_看图王.web.jpg

以下是正文

我在练习设计的时候,一般会假定一个项目类型和题材。因为我觉得设计不仅仅是要有美感,更多时候也要符合一个项目的设计规则,才能被称作好的设计。

Part 1,设计规则&需求

就游戏开发来说,玩家视角,摄像机视距,引擎机制,贴图的画法,目标平台屏幕大小(PC端和移动端),等等,都影响着不同场景的设计规则。

《守望先锋》原画&截图  自由视角  中等视距

《风暴英雄》原画&截图  俯瞰视角  中等视距

《Shardbound》原画&截图  俯瞰视角  偏远视距

为了保证玩家的视角下,能看到设计的比例、大小和细节密度,游戏的概念图一般会根据最终目标的截图所定的视角和视距来画。

俯视角游戏设计规则

3D 自由视角(守望先锋类型)和 3D 俯视角(暗黑破坏神类型)除了设计规则的不同,玩家大部分时间看到的空间方向也不同。

大部分的设计思路基本都是围绕着玩家的画面体验展开的。正如前面说的 3D 俯视角大部分时间都锁定在地面。那么在设计墙体的时候,大部分结构也应该集中在地板交界附近。
同样的,在路面中间如果设计太高的物体,势必会阻碍玩家的视野(除非有设置引擎让阻挡部分透明),这是一个俯视角游戏中很大的一个忌讳。

但是沿着这个思路,是否想过可以让物体垂下来而不阻挡玩家视野。
俯视角游戏设计思路

场景就是在设计一个可信的,合理的,有趣的空间。既然是三维空间的话,那么基本上,就可以分为 XYZ 三个轴。Z 轴有了一定的限制之后,那么我们完全可以在 XY 轴上面去做文章。

同样的,既然在 Z 轴上无法往上做设计,那么俯视角游戏,完全可以往下去做一些设计。

1,很多概念图完全不一样,大部分的概念图是为了保证最后游戏截图的效果。

2,大部分的设计思路,都是围绕着玩家视角展开的。
  • 俯视角的主要设计区域是地面,自由视角的重点区域是正前方。
  • 俯视角的墙壁重点设计区域在与地面交界的地方。
  • 可行走区域的物件设计的要点主要是不影响玩家视野。


下面,结合这两个设计思路,讲一下我在画图构建空间时候的思路,希望这个心得分享对你有帮助。

Part 2, 3D 视角设计

当项目是一个 3D 视角的游戏时,在空间的设计上相对没有那么多限制。只需要注意,将主要的视觉集中区域放在正前方。

3D 自由视角(守望先锋类型)

上图大部分时间画面都锁定正前方,所以空间纵深是重点设计区域。
自由视角的空气墙,设计空间比较大,也比较自由。
如果没有需求限制的话,尽量以体现空间纵深为佳。

创作过程

首先,定大概的空间和光影关系。我画概念图经常用黑白起稿的原因就在于这种方法很好保证最后的大效果。

起稿的时候不用画太多细节,一些小细节也只是帮助你确定空间大小。

调整一些东西。我觉得在草稿阶段一定要大量的去进行尝试,因为这个阶段的修改是最低成本的。
加上了前面的一段空间的原因是:这是一种很常用的让观众联系起远近空间大小的手法,并且有很好的视觉引导作用。

叠加颜色。简单的刻画一些细节,这个阶段刻画细节正如之前一样,更多是像一个标记,因为细节大小也暗示远近的空间关系。

继续刻画,这里主要把近景的石头给去掉了一些。

这个阶段之前,大部分的精力都放在调整画面的空间关系和光影关系。有的朋友有这种经验,当只画线稿的时候,比例容易抓的准,但是直接素描起稿,比例很容易失调。

其实,每种过程和技法都代表不同的思考模式,我会先把大部分大脑 CPU 放在设计空间和画面,确保这块没有太大问题后,再将大部分精力放在调整色彩关系和材质变化。


下面我将大部分精力放在调整色彩关系上。因为大部分的点都处理的差不多了,所以这部分相对比较轻松,然后刻画了一下远景,差不多就收工了。

总结

1,自由视角的概念图,主要细节应该放在正前方。

2,构图的一个技巧是,有一个冲出画面的东西,这样可以暗示空间大小以及视觉引导。

3,画图的时候,可以先尝试把某个点(造型,光影,设计,空间)给处理好,再解决色彩。

Part 3, 俯视角 3D 设计

如果项目是一个俯视角3D视角的游戏,那么,空间设计上限制会多一点,主要来自可行走区域与不可行走区域摄像机是否能看的到,以及不同于的往常空间设计思路不同。

3D 俯视角(暗黑破坏神类型)

大部分时间画面都锁定地面,所以地面是重点设计区域。
空气墙不仅可以设计为墙体,也可以设计为其他空间。
俯视角设计空间的高度的思路,应该是空间往下延生。
墙体的大部分细节应该都集中在与地面交界的部分。

创作过程

这次是比较罕见的构图和比较刁钻的视角,所以我一开始画透视线会更加严谨。

这张图光影不会有太多发挥空间,所以我选择线稿起稿,以造型空间结构为卖点。

大概设想一下可行走区域与不可行走区域。

大体的空间设计敲定后,接下来就把透视的比例抓的更严谨一些。将一些设计给细化,这个时候你可以看出,墙体大部分的结构我都尽量安排在接近地面的部分。


现阶段集中精力在光影和造型的调整上面。原本光影我有模拟 HDR 效果,HDR 会让暗部的细节显得特别真实,但是相应的会损失自然光的真实与对比。

CM 大师一直强调尽量在画中去尝试一些不同的事情,所以建议画个自然光的版本,具体的画面取舍见之后。

作为一张画来说,关于画面设计的取舍,CM 老师给的建议和我自己的感受非常接近,最早的布光设计,让画面大部分物体处于阴影当中,我预想用 HDR 的光影效果让阴影部分比较多细节都看的比较清楚,但是为了保证近景与远景层次清晰,我不得不让远景变的更灰。

反之,最后采取了自然光的方案,虽然画面最可看的设计损失了很多细节,但是整个画面的调子可以更加浓郁了。综合来看,最后还是选择了自然光的方案。

调整了下自然光的效果,远景也随之跟着变化一下。那么也差不多收工了。

进行画面设计的时候,往往都是牵一发而动全身,但是我觉得不断的尝试,这会给你带来很多新的感受和经验,这是我一些关于这张图的经验,希望对于你们有帮助。

总结

1,不同于自由视角,俯瞰视角的空间应该以往下方的方向为主要的设计方向,以这个思路出发经常能画出一些意想不到的设计。

2,这次换了一种起稿方式,线稿的起稿方式更多是以处理设计方向为主的一种技法。

3,一些方向上的选择可能会有牵一发动全身的修改的,我之前画图都会根据经验预判方向,之后也会在以后的图收尾阶段进行更多大胆的尝试。




25_看图王.web.jpg

评分

参与人数 7元素币 +168 活跃度 +48 展开 理由
幺九 + 12 + 15 【喜欢】看到这么好的帖如同回到初恋的年代!
双子hefan... + 1 + 1 看到这么好的帖如同回到初恋的年代!
黑白乌鸦... + 1 + 2 【点赞】这很有大网气质!
★咫尺天涯... + 35 + 15 谢谢分享
那肯 + 15 阅贴无数,楼主最强!
狼之独步... + 20 赞~~
元素界王神... + 99 阅贴无数,楼主最强!

查看全部评分

本帖被以下画板推荐:

还没有设置签名!您可以在此展示你的链接,或者个人主页!
使用道具 <
hjscyl  发表于 2017-7-20 13:49:06  
2#
果断收藏了 谢谢
回复 收起回复
使用道具
tp999xc  发表于 2017-7-20 14:30:39  
3#
好东西 都是在说干货
回复 收起回复
使用道具
狼之独步  发表于 2017-7-20 16:14:22  
4#
好贴必顶~
回复 收起回复
使用道具
wyman618  发表于 2017-7-21 00:55:21  
5#
好的设计不仅要有美感,更需要满足项目需求
回复 收起回复
使用道具
vliscool  发表于 2017-7-21 00:59:06  
6#
好的设计不仅要有美感,更需要满足项目需求
回复 收起回复
使用道具
LEEDDD  发表于 2017-7-28 17:47:06  
7#
画的不错啊-----
回复 收起回复
使用道具
dddbbbnnn  发表于 2017-8-17 20:14:31  
8#
守望先锋的场景地图我还真的很喜欢。
回复 收起回复
使用道具
啊呜的那个夹克  发表于 2017-9-7 16:24:15  
9#
西山的美术确实很lihai
回复 收起回复
使用道具
君鱼  发表于 2017-12-14 17:03:34  
10#
66666666666666666666
回复 收起回复
使用道具
滞留的浮云2  发表于 2017-12-14 22:02:46  
11#
画的不错啊-----
回复 收起回复
使用道具
qq_西西_mh2  发表于 2018-4-7 10:50:35  
12#
很强的教程,全是干货!
回复 收起回复
使用道具
岛田源氏  发表于 2018-4-7 11:56:48  
13#
真的干货
回复 收起回复
使用道具
众志标识设计  发表于 2018-4-19 08:09:04  
14#
回复 收起回复
使用道具
失落  发表于 2018-4-21 20:57:07  
15#
加油!加油!
回复 收起回复
使用道具
失落  发表于 2018-4-24 12:42:44  
16#

谢谢分享
回复 收起回复
使用道具
省過  发表于 2018-5-13 06:17:58  
17#
这效果,杠杠的!
回复 收起回复
使用道具
huoyu  发表于 2018-8-14 09:42:01  
18#
666666666666666
回复 收起回复
使用道具
云水  发表于 2018-8-18 00:54:35  
19#

很强的教程,全是干货!
回复 收起回复
使用道具
云水  发表于 2018-8-21 23:43:11  
20#
















  



画的不错啊-----
回复 收起回复
使用道具
您需要登录后才可以回帖 登录 | 注册

本版积分规则

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