所谓2.5D图形的绘制基础,主要的point不在表现,而在基础研究。涉及到初中鸡三角函数(tanθ/正切)、大学鸭工程制图Isometric projection等,最后结合到软件绘制应用...

ISOMETRIC PROJECTION

等轴测投影(Isometric projection)是技术制图和工程制图中,一种在二维平面呈现三维物体的方法,属于轴测投影的一种,三条坐标轴的投影缩放比例相同,并且任意两条坐标轴投影之间的角度都是120度。1

近来留意了一下早前流行的2.5D插画
其实嘛~本质上就是以前学工程制图时 三维投影2 – 等轴测投影 的内容。

网络上当然已经有相当多的教程,画法、表现等等。

So, 本宅只在此琢磨一下软件上的一些基础制图方法思路。


DRAW BY ILLUSTRATOR

等轴测投影图可通过使各坐标轴的投影之间角度相等(120°)的视角来获得。

用人话说就是,以 正方形 举例,投影后则会变成两组对角分别为 120°60°菱形 ,如下图示:

在使用平面软件绘制的时候,如何将对应的 TOP / FRONT / SIDE 视图投影到空间平面则有好几种方法。

Photoshop基于位图,之前曾经做过一个动作处理文件,但未能很好适应不同size的图形,会出现不同情况的偏差。

所以以下基于Illustrator总结了一下相关的方法(虽然AI也只支持到小数点3位置-.-)。

Freestyle @grid

有一定空间基础的可以直接建立等轴测参考网格,然后在上面进行绘制。

参考网格可参照下图绘制:

具体绘制方式就随意了,方法太多。

轴测网格建立好后,就自己Freestyle啦。

譬如用 实时上色工具(K) 或者直接用 钢笔(P) 等。

Transform

对于木有空间基础or相对复杂的图形可以通过变形转换的方式,将正视图转换成投影图,辅助绘制。

在此小结了三种转换方式:

三角函数(附 .aia)

通过三角函数计算出转换比例

思路

以TOP-VIEW为例,图形为正方形。

可以知道 正方形 -> 等轴测投影 -> 60°/120°菱形,
具体投影后的长度变化在此先忽略,
所以我们可以粗略地先想一下如何将 正方形 -> 60°/120°菱形。

  1. 压缩单轴比例 | 比例缩放工具(S);
  2. 倾斜角度形成60°/120°对角 | 倾斜工具;
  3. 旋转至对应角度 | 旋转工具(R)。

此法难点在于单轴的缩放比例,我们先猥琐地保留边长吧!
(这样就可以只算长宽比变化就好了)

方法

如上图,设正方形边长为a,菱形高为h,正方形、菱形边长相等,

则:

\dfrac{a}{2} : h = tan30^{\circ}

h = \frac{a}{2} / tan30^{\circ} = \frac{3a}{2\sqrt{3}}

h \approx 86.603\%a

以TOP投影面为例,图形随便:

  1. 选取需转换的图形;
  2. 比例缩放工具(S),🔘不等比,垂直:86.603%
  3. 倾斜工具,倾斜角度-30°,轴:🔘水平;
  4. 旋转工具(R),角度30°

// FRONT投影面缩放 水平,倾斜 🔘垂直-30°
// SIDE投影面缩放 水平,倾斜 🔘垂直30°
// 无需旋转。

由于√3为无理数,且Illustrator最多只支持小数点3位,故缩放比例为近似值,所以生成图形非完全准确。

但实践证明,经此法生成图形的图形锚点能重合,
so~可以接受啦,不极端强迫还是没什么的,
毕竟这个差别肉眼也分不出来了。

小结

  • 可动作化;
  • 兼容性较高;
  • 转换步骤快;
  • 准确度尚可。

附:
Illustrator动作文件「📥 to2.5D.aia」下载。

几何绘图

此法基本同上,主要压缩单轴比例的方式不采用缩放工具,而采用绘制参考线的方式

思路

如上述,前一方法缩放比例为近似值 86.603%,看着有点别扭。

由于投影面结果为60°/120°菱形,连接120°对角线,可拆分为2个等边三角形。

如上图,设正方形边长为a,菱形边长为a’,菱形对角线为b,

则可得:

a = a’ = b

故只需将正方形顺时针旋转30°,可令 a ≌ a’,
得出图形可作为缩放参考。

  1. 旋转复制出参考图形;
  2. 拉伸图形高度 | 选择工具(V);
  3. 倾斜角度形成60°/120°对角 | 倾斜工具;
  4. 旋转至对应角度 | 旋转工具(R)。

方法

同样以TOP投影面为例:

  1. 以左下角为基准点对辅助正方形进行旋转复制,角度 -30°,得出参考图形;
  2. 一同选取图形及辅助正方形;
  3. 拉伸上缘与参考图形顶点相交
  4. 倾斜、旋转什么的参考前一方法;

小结

  • 准确度相对高;
  • 图形需作辅助框参考;
  • 难以动作化;
  • 操作步骤相对多。

三维转换

三维都出来了就不说什么了

思路

没什么思路,纯粹应用生成…
出来了自取所需即可。

方法

Illustrator方法

  1. 选取需要转换的图形;
  2. 菜单栏 > 效果 > 3D > 凸出和斜角…;
  3. [位置] 选取 [等角 – xx];
  4. 根据自己需要调整 [凸出厚度];
  5. 表面可选 [线框] or [扩散底纹] 之类,随意;
  6. 完成后将效果扩展成拆分的图形,菜单栏 > 对象 > 扩展外观,删除掉不需要的面。

此方法对于绘制复杂图形的其余投影面比较省事。

这里本质上是构建「拉伸体」,对于其他三维形态可考虑结合「绕转」「旋转」效果制作。
当然咯,更复杂的话可尝试运用三维软件进行创作。

小结

  • 速度快;
  • 适应性广;
  • 可动作化;
  • 后续处理步骤多。

FINALLY

其实内容谈得很浅,
既不会出现设计师欢喜的表现手法教学(要看自己找网上的大小咖教程啊!),
也没有在原理上谈得有多深(在下谈不上啊!反正读工设、机械什么的大学肯定教过)。

主要旨在浅析一下后寻求一种 合适、效率化 的方式。

另外有兴趣的可以再去了解一下 Isometric Game 的绘制相关,也是有点意思的。
文章转载:「Isometric Game 及译法漫谈」by 李松峰