米游社 · 崩坏学园2

像素画学习手册——《图形篇》-4

来自版块: ACG
0
8
3
文章发表:2025-03-17
来自合集: 《像素画学习手册》

Isometrics的数学

Isometric 视角是基于从高处俯视下水平面的网格产生扭曲而产生的视角。如图所示,正方格在这个视角下变成菱形。

它产生一种“伪”3D感,是一种没有灭点的特殊透视(事实上没有灭点就不是透视了,但还是用这个词比较容易说明问题。),在工程模型上经常使用。

当然这些关于26.565的数学运算在像素 作画时完全没用。

你需要关心的只是一个原则:Isometric的线条的构成是横行2像素上提1像素,继续横行2像素,继续上提1像素,如此重复下去。

如果你只是将图片转变为Isometric视角(经过扭曲变形)而不是全部像素化时,这个原则则变得更加重要。

两种创建方法

如图所示, 有两种构建Isometric图形的方法。

类型A(红)在转角处用了3个像素,而类型B(绿)则用的是2个。

如果你仅仅是画单个物体,两个方法都适用,而且我倾向与类型A,因为它的高光看起来更清楚和整洁,也使每个面都保持一样的尺寸和形状。

但是如果你是要制作tiles或者准备将他们放置在网格里,那么就一定要选用类型B,如果不是,你就会得到如图所示一条齿轮化很严重的外边线。

3个箭头所指的地方就是造成毛病的地方。而如果用的是类型B,这个问题就可以解决了,你就会得到一条平滑的边线。

当然,上色,高光提亮和外边线修饰的选择也是多样的。

下面的动画展示了一些基本的方法组合。

决定采用哪种方法取决于你将要创建什么样的图形风格。

创建网格

如前所述,类型B是最适合用来构建以网格为基础或tile类Isometric图形的方法。

现在大家都知道怎么用正确的角度画两条对角相连的线段,但关于怎么铺tiles还是需要解释一下。

为了正确的排列一个tile,黑线应只被用在每个方块(正确的是每个菱形)的两边。

希望上面的动画可以说明一下网格的每个组成的tile的实际形状。

下面的动画显示了这些形体怎么被组合起来的。

非常重要的是要注意到tile的左边缘和右边缘是2像素高的。

这个极度放大的图应该可以让你了解到左右边缘的双像素高度的意义在哪。

这两个可能对你有帮助的图形。

一个是基本的Isometric网格,另外一个是可以用来填充(PS的fill)完成一个Isometric网格的方形图案。

基本形创建

·下面是一些多样的形体和方块的构建:

圆形是最考技术的Isometric图形。

但是相对来说平行的或Isometric视角下的扁圆简单一些,那些轮子和中轴倾向右上的圆形就难多了。

顶上的圆形只要画一个正圆做为指导然后压扁就可。

但侧面的圆形则需要先画好圆再扭曲变形,就好像上面的动画一样。

2D图形到Isometric的转化

有一点需要着重注意的是你不能单靠变形来将2D图像转换为isometric视角,因为一个2D的图像没有透视上的深度,单纯的靠将图形变形后向后拉伸并不能达到预期的效果。

以上两个图形都可作为旁边小一点的2D视角图形的代表。

单纯的将一个图形变形到26.565°不会给你一个真正的isometric效果。

它会显得有点被拉长的感觉。

就像上面的图形所示,单纯的将一个图形变形会使形体显得被拉长。

中间的图显示2D视角下和Isometric视角下图形底部的比较:x1 > x2。

右边的例子是符合数学原理的正确版本。

实际绘画时,图像在变形前先被水平地压扁,但其实通常只创建一些辅助线然后根据辅助线重新绘画会更容易些。

变形通常也容易但来不必要的抗锯齿。

如果你仍想运用变形的方法,你需要首先知道需要将你的2D图像压扁到怎样的程度。

要计算这个数量,“x”的长度(如下图所示)需要先被计算。

现在计算你需要水平压扁的百分率:将这个x 的值除以原始宽度(2)然后再乘以100。

1.7889 ÷ 2 x 100 = 89.443%

雕刻方法

有一个方法,有时被认为是较简易的方法,就是将大的形体切割,像雕刻般把不要的部分切除。

请看下面桌子的例子。

1.首先,标出桌子的四脚。

2.不要的部分抹掉。

3.现在的成图看起来很平板。桌脚没有厚度,看起来很薄的样子。这是因为实际上你还会看到每只脚的另外一边,这些面需要被加上。

4.最后,红色指示线被外边线取代,高光也被加上。

上色和明暗渲染

到现在为止,我只展示了Isometric的数学和基础型构建,而没有提到上色和明暗渲染。

但以上的例子提供了形体如何被上色的一些提示。

特别是上面桌子的例子。

对Isometric这种独特的“漫画”风格,在形体的最外一层有一条黑色或深色的外边线。(不是在形体的内边线上)

对于一个上色很棒的物体来说,需要有4重明度色彩(还需要有1重外边线色彩)。

最浅的一重是高光色。第二重是作为被光照射到的底部色,其他的两重分别作为背光的另外两个面的颜色。

在上面的桌子例子里,我还将第二重色彩作为桌脚的边缘的高光色。

如果把最亮的颜色用在一个阴影的区域里会显得过亮了。

做一个简单的例子,弄一个有着奇怪形状的物体的线稿。然后,大色块上好。

下一步,我将内部的黑线条移除并以高光色或暗色代替。

这里需要注意的是我仅把高光上在凸角的边缘上。

而关于凹角的边缘我则是在两个色部的任意一边上涂上比两色均暗的颜色。

接着我添加了一些窗户(只是色块而已),同样的,朝右的面颜色较暗。然后在窗户的边缘上涂上了高光,把立体感塑造出来。

最后我在旁边加了些青草增加效果,给草也加了点阴影。

其他例子

这个图像,展示了一些高光和颜色渲染的技巧。

注意到小货车的右手边是暗部,但人的暗部却是左手边。

但是,货车的其余部分用了最少的颜色来达到最佳的高光和明暗效果。

将这副图的局部放大,我们可以更近的观察到细节部分。

以上展示了在内边线上运用细高光线。

这个展示了在不同的物体外部添加黑色外边线 来强调他们的效果。

注意在大多数情况下,黑色只用在外边线上。

这个例子,你可以看到运用其他角度的线条来建造不规则图形的技巧。

已开启创作声明,允许规范转载
8
3
看帖是喜欢,评论才是真爱:
0 / 1000
  • 全部评论
  • 只看楼主
排序:最早

游戏领域作者、攻略作者

所属版块

0
3
8
扫码下载
米游社App